Xamarin.Forms 样式类

下载示例

Xamarin.Forms 样式类使多个样式可应用于一个控件，而无需借助样式继承。

创建样式类

可以通过将 Style 上的 Class 属性设置为表示类名的 string 来创建样式类。 与使用 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 样式类的 TargetType 为 VisualElement，这意味着它只能应用于 VisualElement 实例。 但是，其 ApplyToDerivedTypes 属性设置为 true，这可确保它可以应用于派生自 VisualElement 的任何控件，如 BoxView。 要详细了解将样式应用于派生类型，请参阅将样式应用于派生类型。

等效 C# 代码如下：

var separatorBoxViewStyle = new Style(typeof(BoxView))
{
    Class = "Separator",
    Setters =
    {
        new Setter
        {
            Property = VisualElement.BackgroundColorProperty,
            Value = Color.FromHex("#CCCCCC")
        },
        new Setter
        {
            Property = VisualElement.HeightRequestProperty,
            Value = 1
        }
    }
};

var roundedBoxViewStyle = new Style(typeof(BoxView))
{
    Class = "Rounded",
    Setters =
    {
        new Setter
        {
            Property = VisualElement.BackgroundColorProperty,
            Value = Color.FromHex("#1FAECE")
        },
        new Setter
        {
            Property = View.HorizontalOptionsProperty,
            Value = LayoutOptions.Start
        },
        new Setter
        {
            Property = BoxView.CornerRadiusProperty,
            Value = 10
        }
    }
};

var circleBoxViewStyle = new Style(typeof(BoxView))
{
    Class = "Circle",
    Setters =
    {
        new Setter
        {
            Property = VisualElement.BackgroundColorProperty,
            Value = Color.FromHex("#1FAECE")
        },
        new Setter
        {
            Property = VisualElement.WidthRequestProperty,
            Value = 100
        },
        new Setter
        {
            Property = VisualElement.HeightRequestProperty,
            Value = 100
        },
        new Setter
        {
            Property = View.HorizontalOptionsProperty,
            Value = LayoutOptions.Start
        },
        new Setter
        {
            Property = BoxView.CornerRadiusProperty,
            Value = 50
        }
    }
};

var rotatedVisualElementStyle = new Style(typeof(VisualElement))
{
    Class = "Rotated",
    ApplyToDerivedTypes = true,
    Setters =
    {
        new Setter
        {
            Property = VisualElement.RotationProperty,
            Value = 45
        }
    }
};

Resources = new ResourceDictionary
{
    separatorBoxViewStyle,
    roundedBoxViewStyle,
    circleBoxViewStyle,
    rotatedVisualElementStyle
};

使用样式类

可以通过将控件的 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>，因此可以将多个样式类应用于控件。 发生这种情况时，样式类按列表升序应用。 因此，当多个样式类设置相同的属性时，样式类中处于最高列表位置的属性将优先。

等效 C# 代码如下：

...
Content = new StackLayout
{
    Children =
    {
        new BoxView { StyleClass = new [] { "Separator" } },
        new BoxView { WidthRequest = 100, HeightRequest = 100, HorizontalOptions = LayoutOptions.Center, StyleClass = new [] { "Rounded", "Rotated" } },
        new BoxView { HorizontalOptions = LayoutOptions.Center, StyleClass = new [] { "Circle" } }
    }
};

相关链接

• 基本样式（示例）