Классы стилей Xamarin.FormsXamarin.Forms Style Classes

Скачать пример Скачать примерDownload Sample Download the sample

Классы стилей Xamarin.Forms включить несколько стилей, применяемых к элементу управления, не прибегая к наследования стиля.Xamarin.Forms style classes enable multiple styles to be applied to a control, without resorting to style inheritance.

Создание классовCreate style classes

Класс стиля можно создать, задав Class свойство Style для string , представляющая имя класса.A style class can be created by setting the Class property on a Style to a string that represents the class name. Это обеспечивает через определение явный стиль с помощью преимущество x:Key атрибута, что несколько классов стиля могут применяться к VisualElement .The advantage this offers, over defining an explicit style using the x:Key attribute, is that multiple style classes can be applied to a VisualElement.

Важно!

Несколько стилей могут совместно использовать то же имя класса, если они предназначены для разных типов.Multiple styles can share the same class name, provided they target different types. Это позволяет нескольким классам стиль, с одинаковыми именами, к разным типам целевого.This enables multiple style classes, that are identically named, to target different types.

В следующем примере показаны три BoxView стиля классы и VisualElement класс стиля:The following example shows three BoxView style classes, and a VisualElement style class:

<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 свойства с указанными значениями.The Separator, Rounded, and Circle style classes each set BoxView properties to specific values.

Rotated Класс стиля имеет TargetType из VisualElement , то есть может применяться только к VisualElement экземпляров.The Rotated style class has a TargetType of VisualElement, which means it can only be applied to VisualElement instances. Тем не менее его ApplyToDerivedTypes свойству true, которое гарантирует, что он может применяться ко всем элементам управления, которые являются производными от VisualElement, такие как BoxView .However, its ApplyToDerivedTypes property is set to true, which ensures that it can be applied to any controls that derive from VisualElement, such as BoxView. Дополнительные сведения о применении стиля к производному типу, см. в разделе применение стиля к производным типам.For more information about applying a style to a derived type, see Apply a style to derived types.

Эквивалентный код на C# выглядит так:The equivalent C# code is:

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

Использовать классы стилейConsume style classes

Можно использовать классы стилей, задав StyleClass свойства элемента управления, который имеет тип IList<string>, в список имена классов стилей.Style classes can be consumed by setting the StyleClass property of the control, which is of type IList<string>, to a list of style class names. Классы стиль будет применяться, при условии, что соответствующий тип элемента управления TargetType стилей классов.The style classes will be applied, provided that the type of the control matches the TargetType of the style classes.

В следующем примере показаны три BoxView экземпляров, каждый набор другой стиль классам:The following example shows three BoxView instances, each set to different style classes:

<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 является циклической.In this example, the first BoxView is styled to be a line separator, while the third BoxView is circular. Второй BoxView два класса стиля применил к нему, которой присвойте ИТ округленное углы и вращать на 45 градусов:The second BoxView has two style classes applied to it, which give it rounded corners and rotate it 45 degrees:

Важно!

Несколько классов стиля можно применить к элементу управления, поскольку StyleClass свойство имеет тип IList<string>.Multiple style classes can be applied to a control because the StyleClass property is of type IList<string>. В этом случае стиль классы применяются в возрастающем порядке списка.When this occurs, style classes are applied in ascending list order. Таким образом когда несколько классов стиля такими же свойствами, свойство в классе стиля, который находится в высшей позиции списка будет иметь приоритет.Therefore, when multiple style classes set identical properties, the property in the style class that's in the highest list position will take precedence.

Эквивалентный код на C# выглядит так:The equivalent C# code is:

...
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" } }
    }
};