Общие сведения о стилях 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:

Внешний вид метки без стилейLabel Appearance without Styles

Настройка внешнего вида каждого отдельного элемента управления может быть повторена и подвержена ошибкам.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 объектов Property , Valueкаждый Setter из которых имеет и.Each Style instance contains a collection of one or more Setter objects, with each Setter having a Property and a Value. — Это имя привязываемого свойства элемента, к которому применяется стиль, Value а — это значение, которое применяется к свойству. PropertyThe 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 экземпляр Style определяется с помощьюx:Key указания изначенияx:Key , а также путем присвоения свойству целевого элемента ссылки. TargetTypeAn 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.

Примечание

Что такое Стилеид?What is StyleId?

До Xamarin. Forms 2,2 StyleId свойство было использовано для идентификации отдельных элементов в приложении для идентификации в тестировании пользовательского интерфейса, а также в механизмах тем, например пиксате.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.