显式样式
使用显式样式来定制特定控件的外观
显式样式是通过设置其Style属性来选择性地应用于控件的。
在XAML中创建显式样式
要Style
在页面级别声明一个,ResourceDictionary
必须在页面中添加一个,然后Style
可以包含一个或多个声明ResourceDictionary
。一个Style
是由明确给予其声明的x:Key
属性,这使得它在描述性的密钥ResourceDictionary
。然后必须通过设置其属性将显式样式应用于特定的视觉元素Style
。
以下代码示例显示了页面中XAML中声明的应用于页面实例的显式样式:ResourceDictionary
Label
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.ExplicitStylesPage" Title="Explicit" Icon="xaml.png">
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="labelRedStyle" TargetType="Label">
<Setter Property="HorizontalOptions"
Value="Center" />
<Setter Property="VerticalOptions"
Value="CenterAndExpand" />
<Setter Property="FontSize" Value="Large" />
<Setter Property="TextColor" Value="Red" />
</Style>
<Style x:Key="labelGreenStyle" TargetType="Label">
...
<Setter Property="TextColor" Value="Green" />
</Style>
<Style x:Key="labelBlueStyle" TargetType="Label">
...
<Setter Property="TextColor" Value="Blue" />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout Padding="0,20,0,0">
<Label Text="These labels"
Style="{StaticResource labelRedStyle}" />
<Label Text="are demonstrating"
Style="{StaticResource labelGreenStyle}" />
<Label Text="explicit styles,"
Style="{StaticResource labelBlueStyle}" />
<Label Text="and an explicit style override"
Style="{StaticResource labelBlueStyle}"
TextColor="Teal" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
在ResourceDictionary
定义了三个明确的被应用到页面的样式Label
实例。每个Style
用于以不同的颜色显示文本,同时还设置字体大小和水平和垂直布局选项。每个Style
都Label
通过Style
使用StaticResource
标记扩展名设置其属性来应用于其他。这将导致以下屏幕截图中显示的外观:
另外,最后Label
一个Style
应用到它,但也覆盖TextColor
属性到一个不同的Color
值。
在控制级别创建显式样式
除了在页面级别创建显式样式之外,还可以在控件级别创建它们,如以下代码示例所示:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.ExplicitStylesPage" Title="Explicit" Icon="xaml.png">
<ContentPage.Content>
<StackLayout Padding="0,20,0,0">
<StackLayout.Resources>
<ResourceDictionary>
<Style x:Key="labelRedStyle" TargetType="Label">
...
</Style>
...
</ResourceDictionary>
</StackLayout.Resources>
<Label Text="These labels" Style="{StaticResource labelRedStyle}" />
...
</StackLayout>
</ContentPage.Content>
</ContentPage>
在这个例子中,显式 Style
实例被分配给控件的Resources
集合StackLayout
。然后可以将样式应用于控件及其子项。
有关在应用程序中创建样式的信息ResourceDictionary
,请参阅全局样式。
在C#中创建一个显式样式
Style
实例可以Resources
通过创建新的C#添加到页面的集合中ResourceDictionary
,然后通过将Style
实例添加到ResourceDictionary
,如下面的代码示例所示:
public class ExplicitStylesPageCS : ContentPage
{
public ExplicitStylesPageCS ()
{
var labelRedStyle = new Style (typeof(Label)) {
Setters = {
...
new Setter { Property = Label.TextColorProperty, Value = Color.Red }
}
};
var labelGreenStyle = new Style (typeof(Label)) {
Setters = {
...
new Setter { Property = Label.TextColorProperty, Value = Color.Green }
}
};
var labelBlueStyle = new Style (typeof(Label)) {
Setters = {
...
new Setter { Property = Label.TextColorProperty, Value = Color.Blue }
}
};
Resources = new ResourceDictionary ();
Resources.Add ("labelRedStyle", labelRedStyle);
Resources.Add ("labelGreenStyle", labelGreenStyle);
Resources.Add ("labelBlueStyle", labelBlueStyle);
...
Content = new StackLayout {
Children = {
new Label { Text = "These labels",
Style = (Style)Resources ["labelRedStyle"] },
new Label { Text = "are demonstrating",
Style = (Style)Resources ["labelGreenStyle"] },
new Label { Text = "explicit styles,",
Style = (Style)Resources ["labelBlueStyle"] },
new Label { Text = "and an explicit style override",
Style = (Style)Resources ["labelBlueStyle"], TextColor = Color.Teal }
}
};
}
}
构造函数定义了应用于页面实例的三种显式样式Label
。每个显式 Style
添加到ResourceDictionary
使用该Add
方法,指定一个key
字符串来引用该Style
实例。每个Style
都Label
通过设置其Style
属性应用于不同的。
但是,在ResourceDictionary
这里使用没有任何优势。相反,Style
实例可以直接分配给Style
所需可视元素的属性,并且ResourceDictionary
可以将其删除,如以下代码示例所示:
public class ExplicitStylesPageCS : ContentPage
{
public ExplicitStylesPageCS ()
{
var labelRedStyle = new Style (typeof(Label)) {
...
};
var labelGreenStyle = new Style (typeof(Label)) {
...
};
var labelBlueStyle = new Style (typeof(Label)) {
...
};
...
Content = new StackLayout {
Children = {
new Label { Text = "These labels", Style = labelRedStyle },
new Label { Text = "are demonstrating", Style = labelGreenStyle },
new Label { Text = "explicit styles,", Style = labelBlueStyle },
new Label { Text = "and an explicit style override", Style = labelBlueStyle,
TextColor = Color.Teal }
}
};
}
}
构造函数定义了应用于页面实例的三种显式样式Label
。每个Style
用于以不同的颜色显示文本,同时还设置字体大小和水平和垂直布局选项。每个Style
都Label
通过设置其Style
属性应用于不同的。另外,最后Label
一个Style
应用到它,但也覆盖TextColor
属性到一个不同的Color
值。