Xamarin.Forms 中的显式样式
显式样式是一种可以通过设置控件 Style 属性选择性地将其应用于控件的样式。
在 XAML 中创建显式样式
若要在页面级别声明 Style
,必须将 ResourceDictionary
添加到页面,之后可将一个或多个 Style
声明包含在 ResourceDictionary
中。 可以通过为其声明提供 x:Key
特性的方式显式表示 Style
,该特性在 ResourceDictionary
中为其提供描述性密钥。 然后,必须通过设置特定视觉元素的 Style
属性,将显式样式应用于这些元素。
下面的代码示例显示在页面的 ResourceDictionary
中用 XAML 声明的并应用于页面的 Label
实例的显式样式:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.ExplicitStylesPage" Title="Explicit" IconImageSource="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
都用于以不同颜色显示文本,同时还设置字体大小以及水平和垂直布局选项。 可以使用 StaticResource
标记扩展设置其 Style
属性将每个 Style
都应用于不同的 Label
。 这会导致如以下屏幕截图中所示的外观:
此外,最终的 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" IconImageSource="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# 中创建显式样式
可以通过创建新的 ResourceDictionary
然后将 Style
实例添加到 ResourceDictionary
,将 Style
实例添加到 C# 中页面的 Resources
集合,如以下代码示例所示:
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
值。