Введение в стили Xamarin.FormsIntroduction to Xamarin.Forms Styles

Стили позволяют внешний вид визуальных элементов для специальной настройки. Стили определяются для конкретного типа и содержит значения для свойств, доступных для этого типа.Styles allow the appearance of visual elements to be customized. Styles are defined for a specific type and contain values for the properties available on that type.

Приложения Xamarin.Forms часто содержат несколько элементов управления, имеющих идентичным внешним видом.Xamarin.Forms applications often contain multiple controls that have an identical appearance. Например, приложение может иметь несколько Label экземпляров, которые имеют одинаковые параметры шрифта и параметры макета, как показано в следующем примере кода XAML:For example, an application may have multiple Label instances that have the same font options and layout options, as shown in the following XAML code example:

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

В следующем примере кода создается эквивалентная страница на языке C#:The following code example shows the equivalent page created in C#:

public class NoStylesPageCS : ContentPage
{
    public NoStylesPageCS ()
    {
        Title = "No Styles";
        IconImageSource = "csharp.png";
        Padding = new Thickness (0, 20, 0, 0);

        Content = new StackLayout {
            Children = {
                new Label {
                    Text = "These labels",
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions = LayoutOptions.CenterAndExpand,
                    FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label))
                },
                new Label {
                    Text = "are not",
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions = LayoutOptions.CenterAndExpand,
                    FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label))
                },
                new Label {
                    Text = "using styles",
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions = LayoutOptions.CenterAndExpand,
                    FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label))
                }
            }
        };
    }
}

Каждый Label экземпляр имеет одинаковые значения свойств для внешний вид текста, отображаемого элементом управления Label.Each Label instance has identical property values for controlling the appearance of the text displayed by the Label. Результат показан на следующих снимках экрана.This results in the appearance shown in the following screenshots:

Настройка внешнего вида каждого отдельного элемента управления может быть повторяющихся и подвержено ошибкам.Setting the appearance of each individual control can be repetitive and error prone. Вместо этого стиля могут создаваться, определяет внешний вид, а затем применяются к необходимыми элементами управления.Instead, a style can be created that defines the appearance, and then applied to the required controls.

Создание стиляCreate a style

Style Класс группирует коллекцию значений свойств в один объект, который затем можно применить к нескольким экземплярам визуальный элемент.The Style class groups a collection of property values into one object that can then be applied to multiple visual element instances. Это позволяет сократить повтора разметки и позволяет внешний вид приложения, проще изменять.This helps to reduce repetitive markup, and allows an applications appearance to be more easily changed.

Несмотря на то, что стили предназначены главным образом для приложений на основе XAML, они также могут создаваться в C#:Although styles were designed primarily for XAML-based applications, they can also be created in C#:

  • Style экземпляры, созданные в XAML обычно определяются в ResourceDictionary , назначенный Resources коллекцию элемента управления, странице или к Resources коллекции приложения.Style instances created in XAML are typically defined in a ResourceDictionary that's assigned to the Resources collection of a control, page, or to the Resources collection of the application.
  • Style экземпляры, созданные на языке C# обычно определяются в классе страницы или в классе, который может осуществляться глобально.Style instances created in C# are typically defined in the page's class, or in a class that can be globally accessed.

От того, где определен шаблон Style, зависит то, где его можно использовать.Choosing where to define a Style impacts where it can be used:

  • Style экземпляров, определенные на уровне управления может применяться только к элементу управления и с его дочерними элементами.Style instances defined at the control level can only be applied to the control and to its children.
  • Style экземпляров, определенные на уровне страниц может применяться только к странице и с его дочерними элементами.Style instances defined at the page level can only be applied to the page and to its children.
  • Style экземпляры, определенные на уровне приложения можно применять в приложении.Style instances defined at the application level can be applied throughout the application.

Каждый Style экземпляр содержит коллекцию из одного или нескольких Setter объектов, каждый Setter необходимости Property и Value.Each Style instance contains a collection of one or more Setter objects, with each Setter having a Property and a Value. Property Имя привязываемые свойства элемента применяется стиль, и Value является значением, которое применяется к свойству.The Property is the name of the bindable property of the element the style is applied to, and the Value is the value that is applied to the property.

Каждый Style экземпляр может быть явные, или неявное:Each Style instance can be explicit, or implicit:

  • Явные Style экземпляр определяется путем указания TargetType и x:Key значение, а также задать целевого элемента Style свойства x:Key ссылки.An explicit Style instance is defined by specifying a TargetType and an x:Key value, and by setting the target element's Style property to the x:Key reference. Дополнительные сведения о явные стили, см. в разделе явные стили.For more information about explicit styles, see Explicit Styles.
  • Неявное Style экземпляр определяется путем указания только TargetType .An implicit Style instance is defined by specifying only a TargetType. Style Экземпляр затем автоматически применяются ко всем элементам этого типа.The Style instance will then automatically be applied to all elements of that type. Обратите внимание, подклассы TargetType , не получают автоматически Style применения.Note that subclasses of the TargetType do not automatically have the Style applied. Дополнительные сведения о неявное стили, см. в разделе неявные стили.For more information about implicit styles, see Implicit Styles.

При создании Style , TargetType свойство всегда является обязательным.When creating a Style, the TargetType property is always required. В следующем коде показано в примере явные стиля (Примечание x:Key) создан в XAML:The following code example shows an explicit style (note the x:Key) created in XAML:

<Style x:Key="labelStyle" TargetType="Label">
    <Setter Property="HorizontalOptions" Value="Center" />
    <Setter Property="VerticalOptions" Value="CenterAndExpand" />
    <Setter Property="FontSize" Value="Large" />
</Style>

Чтобы применить Style, целевой объект должен иметь VisualElement , соответствующий TargetType значение свойства Style, как показано в следующем примере кода XAML:To apply a Style, the target object must be a VisualElement that matches the TargetType property value of the Style, as shown in the following XAML code example:

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

Стили более низкого уровня в иерархии представлений имеют приоритет над определенных выше вверх.Styles lower in the view hierarchy take precedence over those defined higher up. Например, установка Style , задает Label.TextColor для Red приложения будут переопределены уровень стиль уровня страницы, который задает Label.TextColor для Green.For example, setting a Style that sets Label.TextColor to Red at the application level will be overridden by a page level style that sets Label.TextColor to Green. Аналогичным образом стиль уровня будут переопределены уровня стиль элемента управления.Similarly, a page level style will be overridden by a control level style. Кроме того Если Label.TextColor задано напрямую на свойства элемента управления, имеет приоритет над любые стили.In addition, if Label.TextColor is set directly on a control property, this takes precedence over any styles.

Статьи в этом разделе демонстрируют и объясняется, как создать и применить явные и неявное стили, как создать глобальные стили, стиль наследования, как реагировать на изменения стиля во время выполнения и как использовать встроенные стили, включенные в Xamarin.Forms.The articles in this section demonstrate and explain how to create and apply explicit and implicit styles, how to create global styles, style inheritance, how to respond to style changes at runtime, and how to use the in-built styles included in Xamarin.Forms.

Примечание

Что такое StyleId?What is StyleId?

Предшествующих версии 2.2 Xamarin.Forms StyleId свойство используется для идентификации отдельных элементов в приложении для идентификации при тестировании пользовательского интерфейса, а также в тему движков, таких как Pixate.Prior to Xamarin.Forms 2.2, the StyleId property was used to identify individual elements in an application for identification in UI testing, and in theme engines such as Pixate. Однако представлены Xamarin.Forms 2.2 AutomationId свойство, которое используется для StyleId свойство.However, Xamarin.Forms 2.2 introduced the AutomationId property, which has superseded the StyleId property.