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 值。