Перейти к основному содержимому

Стили

Система стилей Avalonia UI - это механизм, который позволяет общим свойствам использоваться между элементами управления.

подсказка

Style в Avalonia больше похож на стиль CSS, чем на стиль WPF/UWP. Эквивалентом стиля WPF/UWP в Avalonia является ControlTheme.

Как это работает​

По сути, механизм стилизации состоит из двух шагов: выбора и подстановки. XAML для стиля может определять, как должны выполняться оба эти шага, но часто вы будете помогать шагу выбора, определяя метки 'class' на элементах управления.

к сведению

Использование меток 'class' на элементах управления в системе стилизации Avalonia UI аналогично тому, как CSS (каскадные таблицы стилей) работают с элементами HTML.

Система стилизации реализует каскадные стили, выполняя поиск вверх по логическому дереву от элемента управления на этапе выбора. Это означает, что стили, определенные на самом высоком уровне приложения (файл App.axaml), могут использоваться в любом месте приложения, но все равно могут быть переопределены ближе к элементу управления (например, в окне или пользовательском элементе управления).

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

Как это пишется​

XAML для стиля имеет две части: атрибут селектора и один или несколько элементов установщика. Значение селектора содержит строку, использующую синтаксис селектора стилей Avalonia UI. Каждый элемент установщика определяет свойство, которое будет изменено по имени, и новое значение, которое будет подставлено. Шаблон выглядит так:

<Style Selector="селектор стилей">
     <Setter Property="имя свойства" Value="новое значение"/>
     ...
</Style>
к сведению

селектор стилей Avalonia UI аналогичен используемому в CSS (каскадные таблицы стилей). Для подробной справочной информации см. здесь.

Пример​

Вот пример того, как стиль написан и применен к элементу управления, с классом стиля для помощи в выборе:

<Window ... >
    <Window.Styles>
        <Style Selector="TextBlock.h1">
            <Setter Property="FontSize" Value="24"/>
            <Setter Property="FontWeight" Value="Bold"/>
        </Style>
    </Window.Styles>
    <StackPanel Margin="20">
       <TextBlock Classes="h1">Заголовок 1</TextBlock>
    </StackPanel>
</Window>

В этом примере все элементы TextBlock с классом стиля h1 будут отображаться с размером и весом шрифта, установленными стилем. Это работает в панели предварительного просмотра:

Где размещать стили​

Стили размещаются внутри элемента коллекции Styles на Control или на Application. Например, коллекция стилей окна выглядит так:

<Window.Styles>
   <Style> ...  </Style>
</Window.Styles>

Местоположение коллекции стилей определяет область действия содержащихся в ней стилей. В приведенном выше примере стили будут применяться к окну и всему его содержимому. Если стиль добавлен к Application, то он будет применяться глобально.

Селектор​

Селектор стиля определяет, на какие элементы управления будет действовать стиль. Селектор использует различные форматы, один из самых простых:

<Style Selector="TargetControlClass.styleClassName">

Этот селектор будет соответствовать всем элементам управления с ключом стиля TargetControlClass, имеющим класс стиля styleClassName.

к сведению

Полный список селекторов можно найти здесь.

Установщики​

Установщики описывают, что произойдет, когда селектор соответствует элементу управления. Это простые пары свойство/значение, записанные в формате:

<Setter Property="FontSize" Value="24"/>
<Setter Property="Padding" Value="4 2 0 4"/>

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

к сведению

Для получения дополнительной информации об установщиках см. здесь.

Вложенные стили​

Стили могут быть вложены в другие стили. Чтобы вложить стиль, просто включите дочерний стиль как дочерний элемент родительского элемента <Style> и начните селектор с Селектора вложения (^):

<Style Selector="TextBlock.h1">
    <Setter Property="FontSize" Value="24"/>
    <Setter Property="FontWeight" Value="Bold"/>

    <Style Selector="^:pointerover">
        <Setter Property="Foreground" Value="Red"/>
    </Style>
</Style>

Когда это происходит, селектор из родительского стиля будет автоматически применяться к дочернему стилю. В приведенном выше примере вложенный стиль фактически будет иметь селектор TextBlock.h1:pointerover, что означает, что он будет отображаться с красным передним планом, когда указатель находится над элементом управления.

к сведению

Селектор вложения должен присутствовать и должен появляться в начале дочернего селектора.

Ключ стиля​

Тип объекта, соответствующего селектору стиля, определяется не конкретным типом элемента управления, а путем изучения его свойства StyleKey.

По умолчанию свойство StyleKey возвращает тип текущего экземпляра. Однако, если вы хотите, чтобы ваш элемент управления, который наследуется от Button, стилизовался как Button, вы можете переопределить свойство StyleKeyOverride в вашем классе и вернуть typeof(Button).

public class MyButton : Button
{
    // `MyButton` будет стилизован как стандартный элемент управления `Button`.
    protected override Type StyleKeyOverride => typeof(Button);
}
к сведению

Обратите внимание, что эта логика инвертирована по сравнению с WPF/UWP: в этих фреймворках, когда вы создаете новый элемент управления, он будет стилизован как его базовый элемент управления, если вы не переопределите свойство DefaultStyleKey. В Avalonia элемент управления будет стилизован с использованием его конкретного типа, если не предоставлен другой ключ стиля.

к сведению

До Avalonia 11 ключ стиля переопределялся путем реализации IStyleable и предоставления новой реализации свойства IStyleable.StyleKey. Этот механизм все еще поддерживается в Avalonia 11 для совместимости, но может быть удален в будущей версии.

Стили и ресурсы​

Ресурсы часто используются со стилями для поддержания согласованного представления. Ресурсы могут помочь определить стандартные цвета и значки в приложении; или в нескольких приложениях, когда они включены из отдельных файлов.

к сведению

Для руководства по использованию ресурсов в вашем приложении см. здесь.

Дополнительная информация​

к сведению

Для руководства по совместному использованию стилей путем включения файла стилей см. здесь.