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

Xamarin.Forms Классы стилей позволяют применять несколько стилей к элементу управления, не прибегая к наследованию стилей.

Создание классов стилей

Класс стиля можно создать, задав Class для свойства значение, Style 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" } }
    }
};