Xamarin.Forms之样式

使用XAML样式设置Xamarin.Forms应用的样式
Xamarin.Forms应用程序的样式传统上是通过使用Style类将一组属性值分组到一个对象中来完成的，然后可以将其应用于多个视觉元素实例。这有助于减少重复标记，并使应用外观更容易更改。

使用级联样式表样式化Xamarin.Forms应用程序
Xamarin.Forms支持使用级联样式表（CSS）设置视觉元素的样式。样式表由规则列表组成，每个规则由一个或多个选择器以及一个声明块组成。

但是在Xamarin.Forms中，CSS样式表在运行时而不是在编译时进行分析和评估，并且样式表在使用时进行重新分析。更多参考

以下只介绍通过XAML Styles来设置

介绍

样式允许自定义视觉元素的外观。样式是为特定类型定义的，并包含该类型上可用属性的值。

Xamarin.Forms应用程序通常包含外观相同的多个控件。例如，一个应用程序可能具有多个具有相同字体选项和布局选项的Label实例，如以下XAML代码示例所示：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

    x:Class="Styles.NoStylesPage"

    Title="No Styles"

    IconImageSource="xaml.png">

    <ContentPage.Content>

        <StackLayout Padding="0,20,0,0">

            <Label Text="These labels"

                   HorizontalOptions="Center"

                   VerticalOptions="CenterAndExpand"

                   FontSize="Large" />

            <Label Text="are not"

                   HorizontalOptions="Center"

                   VerticalOptions="CenterAndExpand"

                   FontSize="Large" />

            <Label Text="using styles"

                   HorizontalOptions="Center"

                   VerticalOptions="CenterAndExpand"

                   FontSize="Large" />

        </StackLayout>

    </ContentPage.Content>

</ContentPage>

设置每个单独控件的外观可能会重复且容易出错，instead，可以创建定义外观的样式，然后将其应用于所需的控件。

Create a style

Style类将属性值的集合分组为一个对象，然后可以将其应用于多个视觉元素实例。这有助于减少重复标记，并使应用程序外观更容易更改。

尽管样式主要是为基于XAML的应用程序设计的，但是它们也可以在C＃中创建：

在XAML中创建的样式实例通常在ResourceDictionary中定义，该ResourceDictionary分配给控件、页面的Resources集合或应用程序的Resources集合。
用C＃创建的样式实例通常在页面的类中定义，或者在可以全局访问的类中定义。

选择在哪里定义样式会影响可以在哪里使用：

在控件级别定义的样式实例只能应用于控件及其子级。
在页面级别定义的样式实例只能应用于页面及其子元素。
在应用程序级别定义的样式实例可以应用于整个应用程序。

注：视图层次结构中较低的样式优先于较高的样式。例如，在应用程序级别设置将Label.TextColor设置为Red的样式将被将Label.TextColor设置为Green的页面级别样式覆盖。同样，页面级别样式将被控件级别样式覆盖。另外，如果直接在控件属性上设置Label.TextColor，则它优先于所有样式。

每个Style实例都包含一个或多个Setter对象的集合，每个Setter都具有一个Property和一个Value。 “属性”是样式将应用到的元素的可绑定属性的名称，“值”是应用于属性的值。

每个Style实例可以是显式的，也可以是隐式的：

通过指定TargetType和x：Key值，以及将目标元素的Style属性设置为x：Key引用，可以定义一个显式的Style实例。有关显式样式的更多信息，请参见显式样式。
通过仅指定TargetType来定义隐式Style实例。然后，Style实例将自动应用于该类型的所有元素。请注意，TargetType的子类不会自动应用样式。有关隐式样式的更多信息，请参见隐式样式。

创建样式时，始终需要TargetType属性。以下代码示例显示了在XAML中创建的显式样式（请注意x：Key）：

<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="labelStyle" 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>

要应用样式，目标对象必须是与样式的TargetType属性值匹配的VisualElement，如以下XAML代码示例所示：

<Label Text="Demonstrating an explicit style" Style="{StaticResource labelStyle}" />

显式样式

显式样式是通过设置控件的样式属性而有选择地应用于控件的样式。

要在页面级别声明样式，必须将ResourceDictionary添加到页面，然后可以在ResourceDictionary中包含一个或多个样式声明。通过为其声明提供x：Key属性来使Style显式化，该属性在ResourceDictionary中为其提供了描述性键。然后必须通过设置显式样式的“样式”属性将其应用于特定的视觉元素。

上面的例子就是定义的显示样式（在页面级别）。

还可以在控件级别定义样式：

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

隐式样式

隐式样式是同一TargetType的所有控件使用的隐式样式，不需要每个控件都引用该样式。

要在页面级别声明样式，必须将ResourceDictionary添加到页面，然后可以在ResourceDictionary中包含一个或多个样式声明。通过不指定x：Key属性来使样式隐式化。然后，该样式将应用于与TargetType完全匹配的视觉元素，但不适用于从TargetType值派生的元素。

以下代码示例显示了XAML在页面的ResourceDictionary中声明的隐式样式，并将其应用于页面的Entry实例：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:Styles;assembly=Styles" x:Class="Styles.ImplicitStylesPage" Title="Implicit" IconImageSource="xaml.png">

    <ContentPage.Resources>

        <ResourceDictionary>

            <Style TargetType="Entry">

                <Setter Property="HorizontalOptions" Value="Fill" />

                <Setter Property="VerticalOptions" Value="CenterAndExpand" />

                <Setter Property="BackgroundColor" Value="Yellow" />

                <Setter Property="FontAttributes" Value="Italic" />

                <Setter Property="TextColor" Value="Blue" />

            </Style>

        </ResourceDictionary>

    </ContentPage.Resources>

    <ContentPage.Content>

        <StackLayout Padding="0,20,0,0">

            <Entry Text="These entries" />

            <Entry Text="are demonstrating" />

            <Entry Text="implicit styles," />

            <Entry Text="and an implicit style override" BackgroundColor="Lime" TextColor="Red" />

            <local:CustomEntry Text="Subclassed Entry is not receiving the style" />

        </StackLayout>

    </ContentPage.Content>

</ContentPage>

ResourceDictionary定义了一种应用于页面的Entry实例的隐式样式。样式用于在黄色背景上显示蓝色文本，同时还设置其他外观选项。样式将添加到页面的ResourceDictionary中，而无需指定x：Key属性。因此，将样式隐式地应用于所有Entry实例，因为它们与Style的TargetType属性完全匹配。但是，该样式不适用于CustomEntry实例，它是一个Entry的子类。

将样式用于派生类型

Style.ApplyToDerivedTypes属性使样式可以应用于从TargetType属性引用的基本类型派生的控件。因此，将此属性设置为true可使单个样式定位多种类型，前提是这些类型派生自TargetType属性中指定的基本类型。

下面的示例显示一个隐式样式，该样式将Button实例的背景色设置为红色：

全局样式

通过将样式添加到应用程序的资源字典中，可以使样式全局可用。这有助于避免在页面或控件之间重复样式。

默认情况下，从模板创建的所有Xamarin.Forms应用程序都使用App类来实现Application子类。若要在应用程序级别声明样式，必须在使用XAML的应用程序的ResourceDictionary中，将默认App类替换为XAML App类并在其后添加相关代码。有关更多信息，请参见Working with the App Class.

以下代码示例显示了在应用程序级别声明的Style：

<Application xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.App">

    <Application.Resources>

        <ResourceDictionary>

            <Style x:Key="buttonStyle" TargetType="Button">

                <Setter Property="HorizontalOptions" Value="Center" />

                <Setter Property="VerticalOptions" Value="CenterAndExpand" />

                <Setter Property="BorderColor" Value="Lime" />

                <Setter Property="BorderRadius" Value="5" />

                <Setter Property="BorderWidth" Value="5" />

                <Setter Property="WidthRequest" Value="200" />

                <Setter Property="TextColor" Value="Teal" />

            </Style>

        </ResourceDictionary>

    </Application.Resources>

</Application>

样式继承

样式可以继承其他样式，以减少重复并实现重用。

通过将Style.BasedOn属性设置为现有Style，可以执行样式继承。在XAML中，这是通过将BasedOn属性设置为引用以前创建的Style的StaticResource标记扩展来实现的。在C＃中，这是通过将BasedOn属性设置为Style实例来实现的。

从基本样式继承的样式可以包括新属性的Setter实例，或使用它们从基本样式中覆盖样式。

此外，从基本样式继承的样式必须以相同的类型为目标，或者从基本样式为目标的类型派生的类型为目标。例如，如果基本样式针对View实例，则基于基本样式的样式可以针对View实例或从View类派生的类型，例如Label和Button实例。

以下代码演示了XAML页面中的显式样式继承：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.StyleInheritancePage" Title="Inheritance" IconImageSource="xaml.png">

    <ContentPage.Resources>

        <ResourceDictionary>

            <Style x:Key="baseStyle" TargetType="View">

                <Setter Property="HorizontalOptions"

                        Value="Center" />

                <Setter Property="VerticalOptions"

                        Value="CenterAndExpand" />

            </Style>

            <Style x:Key="labelStyle" TargetType="Label"

                   BasedOn="{StaticResource baseStyle}">

                ...

                <Setter Property="TextColor" Value="Teal" />

            </Style>

            <Style x:Key="buttonStyle" TargetType="Button"

                   BasedOn="{StaticResource baseStyle}">

                <Setter Property="BorderColor" Value="Lime" />

                ...

            </Style>

        </ResourceDictionary>

    </ContentPage.Resources>

    <ContentPage.Content>

        <StackLayout Padding="0,20,0,0">

            <Label Text="These labels"

                   Style="{StaticResource labelStyle}" />

            ...

            <Button Text="So is the button"

                    Style="{StaticResource buttonStyle}" />

        </StackLayout>

    </ContentPage.Content>

</ContentPage>

baseStyle以View实例为目标，并设置HorizontalOptions和VerticalOptions属性，baseStyle不能直接在任何控件上设置。而是，labelStyle和buttonStyle从其继承，设置其他可绑定属性值，然后，通过设置其Style属性，将labelStyle和buttonStyle应用于Label实例和Button实例。

注：隐式样式可以从显式样式派生，但是显式样式不能从隐式样式派生。

尊重继承链
样式只能继承视图层次结构中相同级别或更高级别的样式。这意味着：

应用程序级资源只能继承其他应用程序级资源。
页面级资源可以从应用程序级资源和其他页面级资源继承。
控制级资源可以从应用程序级资源，页面级资源和其他控制级资源继承。

动态样式

样式不响应属性更改，并且在应用程序持续时间内保持不变。例如，在将样式分配给视觉元素后，如果修改，删除了一个Setter实例或添加了一个新的Setter实例，则更改将不会应用于视觉元素。但是，应用程序可以使用动态资源在运行时动态响应样式更改。

DynamicResource标记扩展与StaticResource标记扩展类似，两者均使用字典键从ResourceDictionary获取值。但是，StaticResource执行单个字典查找，DynamicResource会维护指向字典键的链接。因此，如果替换了与键关联的字典条目，则更改将应用于可视元素，这使得可以在应用程序中进行运行时样式更改。

下面的代码示例演示XAML页面中的动态样式：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.DynamicStylesPage" Title="Dynamic" IconImageSource="xaml.png">

    <ContentPage.Resources>

        <ResourceDictionary>

            <Style x:Key="baseStyle" TargetType="View">

              ...

            </Style>

            <Style x:Key="blueSearchBarStyle"

                   TargetType="SearchBar"

                   BasedOn="{StaticResource baseStyle}">

              ...

            </Style>

            <Style x:Key="greenSearchBarStyle"

                   TargetType="SearchBar">

              ...

            </Style>

            ...

        </ResourceDictionary>

    </ContentPage.Resources>

    <ContentPage.Content>

        <StackLayout Padding="0,20,0,0">

            <SearchBar Placeholder="These SearchBar controls"

                       Style="{DynamicResource searchBarStyle}" />

            ...

        </StackLayout>

    </ContentPage.Content>

</ContentPage>

SearchBar实例使用DynamicResource标记扩展来引用名为searchBarStyle的样式，该样式未在XAML中定义。但是，由于SearchBar实例的Style属性是使用DynamicResource设置的，因此缺少的字典键不会导致引发异常。

需要在代码隐藏文件中，构造函数使用key=searchBarStyle创建一个ResourceDictionary条目，如以下代码示例所示：

public partial class DynamicStylesPage : ContentPage

{

    bool originalStyle = true;

    public DynamicStylesPage ()

    {

        InitializeComponent ();

        Resources ["searchBarStyle"] = Resources ["blueSearchBarStyle"];

    }

    void OnButtonClicked (object sender, EventArgs e)

    {

        if (originalStyle) {

            Resources ["searchBarStyle"] = Resources ["greenSearchBarStyle"];

            originalStyle = false;

        } else {

            Resources ["searchBarStyle"] = Resources ["blueSearchBarStyle"];

            originalStyle = true;

        }

    }

}

动态样式继承

使用Style.BasedOn属性无法实现从动态样式派生样式。而是，Style类包括BaseResourceKey属性，可以将其设置为字典键，其值可能会动态更改。

下面的代码示例演示了XAML页面中的动态样式继承：

【见示例】

SearchBar实例使用StaticResource标记扩展来引用名为tealSearchBarStyle的样式。此样式设置一些其他属性，并使用BaseResourceKey属性引用searchBarStyle。不需要DynamicResource标记扩展，因为tealSearchBarStyle不会改变，除了它派生的Style之外【BaseResourceKey】。因此，tealSearchBarStyle维护指向searchBarStyle的链接，并且在基本样式更改时更改。

在代码隐藏文件中，构造函数使用键searchBarStyle创建一个ResourceDictionary条目，如上一个演示动态样式的示例所示。执行OnButtonClicked事件处理程序时，searchBarStyle将在blueSearchBarStyle和greenSearchBarStyle之间切换。这导致以下屏幕快照中显示的外观：

设备样式

Xamarin.Forms在Device.Styles类中包含六种动态样式，称为设备样式。

这些设备样式为：

所有六个样式只能应用于Label实例。例如，显示段落正文的Label可以将其Style属性设置为BodyStyle。

以下代码示例演示了如何在XAML页面中使用设备样式：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.DeviceStylesPage" Title="Device" IconImageSource="xaml.png">

    <ContentPage.Resources>

        <ResourceDictionary>

            <Style x:Key="myBodyStyle" TargetType="Label"

              BaseResourceKey="BodyStyle">

                <Setter Property="TextColor" Value="Accent" />

            </Style>

        </ResourceDictionary>

    </ContentPage.Resources>

    <ContentPage.Content>

        <StackLayout Padding="0,20,0,0">

            <Label Text="Title style"

              Style="{DynamicResource TitleStyle}" />

            <Label Text="Subtitle text style"

              Style="{DynamicResource SubtitleStyle}" />

            <Label Text="Body style"

              Style="{DynamicResource BodyStyle}" />

            <Label Text="Caption style"

              Style="{DynamicResource CaptionStyle}" />

            <Label Text="List item detail text style"

              Style="{DynamicResource ListItemDetailTextStyle}" />

            <Label Text="List item text style"

              Style="{DynamicResource ListItemTextStyle}" />

            <Label Text="No style" />

            <Label Text="My body style"

              Style="{StaticResource myBodyStyle}" />

        </StackLayout>

    </ContentPage.Content>

</ContentPage>

设备样式必须使用DynamicResource标记扩展名进行绑定。通过更改文本大小的辅助功能设置，可以在iOS中看到样式的动态性质。每个平台上设备样式的外观都不同，如以下屏幕截图所示：

设备样式也可以通过将BaseResourceKey属性设置为设备样式的键名称来派生。在上面的代码示例中，myBodyStyle继承自BodyStyle并设置了带重音的文本颜色。有关动态样式继承的更多信息，请参见动态样式继承。

可访问性

设备样式尊重可访问性首选项，因此字体大小将随每个平台上可访问性首选项的改变而变化。因此，要支持可访问的文本，请确保将设备样式用作应用程序中任何文本样式的基础。

样式类

Xamarin.Forms样式类使多种样式可以应用于控件，而无需求助于样式继承。

创建样式类

可以通过将Style的Class属性设置为表示类名的字符串来创建样式类。与使用x：Key属性定义显式样式相比，此方法提供的优点是可以将多个样式类应用于VisualElement。

注：多种样式可以共享相同的类名，只要它们针对不同的类型。这使多个名称相同的样式类可以针对不同的类型。

下面的示例显示三个BoxView样式类和一个VisualElement样式类：

<ContentPage ...>

    <ContentPage.Resources>

        <Style TargetType="BoxView"

               Class="Separator">

            <Setter Property="BackgroundColor"

                    Value="#CCCCCC" />

            <Setter Property="HeightRequest"

                    Value="1" />

        </Style>

        <Style TargetType="BoxView"

               Class="Rounded">

            <Setter Property="BackgroundColor"

                    Value="#1FAECE" />

            <Setter Property="HorizontalOptions"

                    Value="Start" />

            <Setter Property="CornerRadius"

                    Value="10" />

        </Style>    

        <Style TargetType="BoxView"

               Class="Circle">

            <Setter Property="BackgroundColor"

                    Value="#1FAECE" />

            <Setter Property="WidthRequest"

                    Value="100" />

            <Setter Property="HeightRequest"

                    Value="100" />

            <Setter Property="HorizontalOptions"

                    Value="Start" />

            <Setter Property="CornerRadius"

                    Value="50" />

        </Style>

        <Style TargetType="VisualElement"

               Class="Rotated"

               ApplyToDerivedTypes="true">

            <Setter Property="Rotation"

                    Value="45" />

        </Style>

    </ContentPage.Resources>

</ContentPage>

Separator，Rounded和Circle样式类分别将BoxView属性设置为特定值。

Rotated样式类具有VisualElement的TargetType，这意味着它只能应用于VisualElement实例。但是，其ApplyToDerivedTypes属性设置为true，以确保可以将其应用于从VisualElement派生的任何控件，例如BoxView。

使用样式类

可以通过将控件的StyleClass属性（类型为IList <string>）设置为样式类名称列表来使用样式类。如果控件的类型与样式类的TargetType相匹配，则将应用样式类。

下面的示例显示三个BoxView实例，每个实例设置为不同的样式类：

<ContentPage ...>

    <ContentPage.Resources>

        ...

    </ContentPage.Resources>

    <StackLayout Margin="20">

        <BoxView StyleClass="Separator" />

        <BoxView WidthRequest="100"

                 HeightRequest="100"

                 HorizontalOptions="Center"

                 StyleClass="Rounded, Rotated" />

        <BoxView HorizontalOptions="Center"

                 StyleClass="Circle" />

    </StackLayout>

</ContentPage>

在此示例中，第一个BoxView的样式设置为行分隔符，而第三个BoxView的样式设置为圆形。第二个BoxView应用了两个样式类，这些类给其圆角并将其旋转45度：

注：可以将多个样式类应用于控件，因为StyleClass属性的类型为IList <string>。发生这种情况时，样式类将以升序排列。因此，当多个样式类设置相同的属性时，位于列表最高位置的样式类中的属性将优先。