Изменение темы элементов управления¶

Тема элемента управления в Avalonia UI состоит из стилей, тем элементов управления и ресурсов, которые определяют шаблоны и настройки внешнего вида элементов управления.

В этом разделе демонстрируются подходы к изменению конкретных параметров тем и стилей для отдельных и всех элементов управления Eremex Avalonia UI в вашем проекте.

Тема по умолчанию¶

Тема Eremex.Avalonia.Themes.DeltaDesign является темой по умолчанию для элементов управления Eremex. Вам необходимо включить эту тему в ваш проект и зарегистрировать её в файле App.axaml. В противном случае элементы управления Eremex будут отображаться пустыми.

Чтобы изменить конкретные настройки (например, цвета или шаблоны элементов управления) текущей используемой темы, мы рекомендуем ознакомиться с исходным кодом темы. Вы можете найти и загрузить исходный код темы на GitHub: Eremex Controls Themes.

Изменение параметров темы включает два шага:

Найдите целевой стиль, ресурс или шаблон, который необходимо переопределить.
Измените целевой стиль/ресурс/шаблон для всех или отдельных элементов управления.

Вам необходимо знать ключ ресурса, чтобы переопределить этот ресурс в вашем приложении.

Поиск целевого стиля, ресурса или шаблона¶

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

На изображении ниже показана структура исходного кода темы DeltaDesign:

deltadesigntheme-structure

Папка Controls — содержит параметры темы для элементов управления Eremex и стандартных элементов управления Avalonia UI.
Папка Charts — содержит параметры темы для элементов управления Chart от Eremex.
Папка Variants — содержит параметры темы для элементов управления для вариантов темы Light и Dark.

Параметры темы (шаблоны, цвета, отступы и т.д.) определены как динамические или статические ресурсы.

Объявление динамических ресурсов в теме оформления Eremex¶

Параметры темы, которые зависят от варианта темы (Light или Dark), определены как динамические ресурсы (DynamicResource). Эти параметры темы включают большинство цветов для элементов управления Eremex.

Следующий фрагмент кода показывает селектор стиля, который инициализирует свойство ColumnHeaderControl.Foreground в элементе управления TreeList. Это свойство определяет цвет переднего плана заголовков столбцов TreeList. Значение свойства ColumnHeaderControl.Foreground определено как динамический ресурс с ключом Text/Neutral/Secondary.

<!-- Eremex.Avalonia.Themes.DeltaDesign\Controls\TreeListControl.axaml -->
<Styles ...>
    <Style Selector="mxdcv|ColumnHeaderControl">
        <Setter Property="Foreground" Value="{DynamicResource   Text/Neutral/Secondary}" />
        <!-- ... -->
    </Style>
</Styles>

Ресурс Text/Neutral/Secondary имеет разные значения для вариантов темы Light и Dark:

<!-- Файл Eremex.Avalonia.Themes.DeltaDesign\Variants\Light\Colors.axaml -->
<SolidColorBrush x:Key="Text/Neutral/Secondary" Color="#ff424d4d"/>

<!-- Файл Eremex.Avalonia.Themes.DeltaDesign\Variants\Dark\Colors.axaml -->
<SolidColorBrush x:Key="Text/Neutral/Secondary" Color="#ffc6d2d2"/>

Обратите внимание, что ресурс Text/Neutral/Secondary также определяет значения других параметров темы для других элементов управления. Вы можете выполнить поиск по строке "Text/Neutral/Secondary" в исходном коде темы, чтобы найти все ссылки на этот ресурс.

Ресурсы, связанные с вариантами темы Light и Dark, объединяются темой оформления Eremex в два словаря ресурсов:

Словарь ресурсов с ключом "Default" объединяет ресурсы, связанные с вариантом темы Light. См. файл Eremex.Avalonia.Themes.DeltaDesign\Variants\Light\Variant.axaml.
Словарь ресурсов с ключом "Dark" объединяет ресурсы, связанные с вариантом темы Dark. См. файл Eremex.Avalonia.Themes.DeltaDesign\Variants\Dark\Variant.axaml.

Вам необходимо знать ключи этих словарей, чтобы переопределять динамические ресурсы для вариантов темы Light и Dark в ваших проектах.

Объявление статических ресурсов в теме оформления Eremex¶

Многие параметры темы одинаковы для вариантов темы Light и Dark. Эти настройки определены как статические ресурсы (StaticResource). Они включают:

Настройки, определяющие внутреннее расположение элементов управления (например, размер и отступы элементов)
Шаблоны, используемые для отображения внутренних элементов и контекстных меню

Например, файл Eremex.Avalonia.Themes.DeltaDesign\Controls\TreeListControl.axaml содержит параметры темы для элемента управления TreeList. Размер шрифта заголовков столбцов TreeList определен как статический ресурс с ключом "ColumnHeaderFontSize".

<!-- Файл Eremex.Avalonia.Themes.DeltaDesign\Controls\TreeListControl.axaml -->
<Styles ...>
    <Style Selector="mxdcv|ColumnHeaderControl">
        <Setter Property="FontSize" Value="{StaticResource ColumnHeaderFontSize}" />
        <!-- ... -->
    </Style>

    <Styles.Resources>
        <x:Double x:Key="ColumnHeaderFontSize">12</x:Double>
    </Styles.Resources>
</Styles>

Селекторы стилей темы для классов стилей¶

Тема DeltaDesign содержит темы элементов управления и селекторы стилей для элементов управления Eremex и стандартных элементов управления Avalonia, которые имеют определенные классы стилей. Когда вы устанавливаете определенный класс стилей для элемента управления (используя свойство Classes элемента управления), тема применяет соответствующий селектор стилей.

Например, вы можете применить класс стилей warning к элементу CheckBox следующим образом:

<CheckBox Content="Important" Classes="warning"/>

В этом случае тема DeltaDesign применяет селектор стилей, который нацелен на этот класс стилей:

<!-- Eremex.Avalonia.Themes.DeltaDesign\Controls\StandardControls\CheckBox.axaml -->

<ControlTheme x:Key="{x:Type CheckBox}" TargetType="CheckBox">
    <!-- Warning State -->
    <Style Selector="^.warning /template/ Border#NormalRectangle">
        <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxWarningRectBorderBrush}" />
    </Style>
    <!-- ... -->
</ControlTheme>

Флажок с этим классом стилей показан ниже:

themes-checkbox-styleclass-warning

В следующем списке показаны основные классы стилей, для которых тема DeltaDesign содержит селекторы стилей:

accent — Настройки внешнего вида с акцентом. Целевые стандартные элементы управления Avalonia: Button, RepeatButton.
warning — Настройки внешнего вида для указания предупреждений и ошибок. Целевые стандартные элементы управления Avalonia: Button, RepeatButton, CheckBox, RadioButton.

Вы можете комбинировать классы стилей accent и warning:
secondary — Настройки внешнего вида для элементов управления, отображаемых на сером фоне. Целевые элементы управления Eremex: редакторы со встроенным текстовым полем (TextEditor, ButtonEditor, ComboBoxEditor, SpinEditor, DateEditor и т.д.) и SegmentedEditor. Целевые стандартные элементы управления Avalonia: TextBox, Button, RepeatButton, ToggleButton, CheckBox, ProgressBar, RadioButton и Slider.

Изменение динамического ресурса, используемого несколькими элементами управления¶

Несколько элементов управления могут использовать один и тот же ресурс. Чтобы изменить общий ресурс для всех целевых элементов управления в вашем приложении, измените этот ресурс на уровне приложения с помощью свойства Application.Resources. Используйте свойство Window.Resources для изменения общего ресурса для целевых элементов управления в пределах окна.

Пример — Изменение кисти границы сфокусированной строки для элементов управления в вашем приложении для вариантов темы Light и Dark¶

Предположим, что вам нужно изменить кисть, используемую для рисования границы сфокусированной строки в элементах управления DataGrid, TreeList и/или ListView во всем вашем приложении. Эта кисть должна иметь разные значения для вариантов темы Light и Dark.

Тема оформления по умолчанию определяет кисть границы сфокусированной строки как динамический ресурс с ключом Outline/Accent/Focus.

<!-- Файл Eremex.Avalonia.Themes.DeltaDesign\Controls\DataGridControl.axaml -->
<Style Selector="mxdgv|DataGridRowControl:focusedState /template/ Border#FocusBorder, mxdgv|DataGridRowControl:focusedAndSelectedState /template/ Border#FocusBorder">
    <!-- ... -->
    <Setter Property="BorderBrush" Value="{DynamicResource Outline/Accent/Focus}" />
</Style>

<!-- Eremex.Avalonia.Themes.DeltaDesign\Controls\ListViewControl.axaml -->
<Style Selector="mxl|ListViewGroupControl:focus-visible/template/Rectangle#PART_Border">
    <Setter Property="Stroke" Value="{DynamicResource Outline/Accent/Focus}"/>
</Style>

<!-- Файл Eremex.Avalonia.Themes.DeltaDesign\Controls\TreeListControl.axaml -->
<Style Selector="mxtlv|TreeListRowControl:focusedState /template/ Border#FocusBorder, mxtlv|TreeListRowControl:focusedAndSelectedState /template/ Border#FocusBorder">
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="BorderBrush" Value="{DynamicResource Outline/Accent/Focus}" />
</Style>

В теме по умолчанию ресурс Outline/Accent/Focus имеет разные значения для вариантов темы Light и Dark:

<!-- Файл Eremex.Avalonia.Themes.DeltaDesign\Variants\Light\Colors.axaml -->
<ResourceDictionary xmlns="https://github.com/avaloniaui" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <!-- ... -->
    <SolidColorBrush x:Key="Outline/Accent/Focus" Color="#ff129190"/>
</ResourceDictionary>

<!-- Файл Eremex.Avalonia.Themes.DeltaDesign\Variants\Dark\Colors.axaml -->
<ResourceDictionary xmlns="https://github.com/avaloniaui" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <!-- ... -->
    <SolidColorBrush x:Key="Outline/Accent/Focus" Color="#ff36afb0"/>
</ResourceDictionary>

Выполните следующие действия, чтобы изменить кисть границы сфокусированной строки для всех элементов управления в приложении для вариантов темы Light и Dark.

В вашем проекте создайте файл "ModifiedResources.axaml" в папке "Resources".
Определите два словаря ресурсов в этом файле с ключами "Default" и "Dark" для вариантов темы Light и Dark соответственно.

<ResourceDictionary xmlns="https://github.com/avaloniaui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ResourceDictionary.ThemeDictionaries>

        <!-- Переопределение ресурсов для варианта темы Light -->
        <ResourceDictionary x:Key="Default">

        </ResourceDictionary>

        <!-- Переопределение ресурсов для варианта темы Dark -->
        <ResourceDictionary x:Key="Dark">

        </ResourceDictionary>

    </ResourceDictionary.ThemeDictionaries>   
</ResourceDictionary>

Определите значения ресурса Outline/Accent/Focus в словарях ресурсов "Default" и "Dark":

<ResourceDictionary xmlns="https://github.com/avaloniaui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ResourceDictionary.ThemeDictionaries>

        <!-- Переопределение ресурсов для варианта темы Light -->
        <ResourceDictionary x:Key="Default">
            <SolidColorBrush x:Key="Outline/Accent/Focus" Color="Blue"/>
        </ResourceDictionary>

        <!-- Переопределение ресурсов для варианта темы Dark -->
        <ResourceDictionary x:Key="Dark">
            <SolidColorBrush x:Key="Outline/Accent/Focus" Color="Orange"/>
        </ResourceDictionary>

    </ResourceDictionary.ThemeDictionaries>   
</ResourceDictionary>

В файле App.axaml объедините ресурсы из файла "Resources/ModifiedResources.axaml" с ресурсами приложения.

<Application ...>
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceInclude Source="/Resources/ModifiedResources.axaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

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

themes-example-modify-focusedrowborder-dark

Изменение ресурсов темы для конкретного элемента управления¶

Вы можете использовать свойство Resources элемента управления для изменения конкретных ресурсов только для этого элемента управления. Другие элементы управления не затрагиваются этим изменением ресурсов.

Пример - Изменение цвета отдельной кнопки в нажатом и сфокусированном состояниях¶

Тема DeltaDesign содержит темы элементов управления и селекторы стилей, которые изменяют цвета определенных стандартных элементов управления Avalonia UI, чтобы их внешний вид соответствовал внешнему виду элементов управления Eremex, размещенных в том же окне.

Внешний вид по умолчанию стандартного элемента управления Button в нажатом состоянии, отображаемый темой DeltaDesign, показан ниже:

В нажатом состоянии применяются следующие селекторы стилей:

<!-- Eremex.Avalonia.Themes.DeltaDesign\Controls\StandardControls\Button.axaml -->
<ControlTheme x:Key="{x:Type Button}" TargetType="Button">
    <!-- Pressed State -->
    <Style Selector="^:pressed">
        <Style Selector="^ /template/ Border#PART_BackgroundBorder">
            <Setter Property="Background" Value="{DynamicResource ButtonBackgroundPressed}" />
        </Style>
        <Style Selector="^  /template/ ContentPresenter#PART_ContentPresenter">
            <Setter Property="Foreground" Value="{DynamicResource ButtonForegroundPressed}" />
            <Setter Property="Opacity" Value="0.8"/>
        </Style>
    </Style>
    <!--Focus Border-->
    <Style Selector="^:focus /template/ Border#PART_ButtonBorder">
        <Setter Property="BorderBrush" Value="{DynamicResource ButtonFocusBorderBrush}" />
        <Setter Property="BorderThickness" Value="{StaticResource EditorBorderThickness}"/>
    </Style>
    <!-- ... -->
</ControlTheme>

Чтобы изменить цвета отдельной кнопки в нажатом и сфокусированном состоянии, измените ресурсы ButtonBackgroundPressed, ButtonForegroundPressed и ButtonFocusBorderBrush из свойства Button.Resources.

<Button Content="Simple Button" HorizontalAlignment="Center" >
    <Button.Resources>
        <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="LightSeaGreen" />
        <SolidColorBrush x:Key="ButtonForegroundPressed" Color="Snow" />
        <SolidColorBrush x:Key="ButtonFocusBorderBrush" Color="SlateGray" />
    </Button.Resources>
</Button>

Изменение ресурсов темы для элементов управления в пределах окна¶

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

Пример - Изменение акцентированных кнопок в пределах окна для вариантов темы Light и Dark¶

Тема DeltaDesign содержит определенные селекторы стилей, применяемые когда вы устанавливаете классы стилей accent и/или warning для стандартного элемента управления Button Avalonia. Этот пример показывает, как переопределить настройки внешнего вида акцентированных кнопок в окне для вариантов темы Light и Dark.

Вы можете применить классы стилей accent и warning, чтобы придать кнопке emphasis:

<Button Content="Warning&amp;Accent Button" Classes="warning accent"/>

См. файл Eremex.Avalonia.Themes.DeltaDesign\Controls\StandardControls\Button.axaml, чтобы узнать селекторы стилей, применяемые к акцентированным кнопкам в нормальном, наведенном, нажатом и отключенном состояниях. Приведенный ниже фрагмент кода демонстрирует два селектора стилей для нормального состояния акцентированной кнопки:

<!-- Файл Eremex.Avalonia.Themes.DeltaDesign\Controls\StandardControls\Button.axaml -->
<ControlTheme x:Key="{x:Type Button}" TargetType="Button">
    <!-- WarningAccent style -->
    <Style Selector="^.warning.accent">
        <Style Selector="^ /template/ Border#PART_BackgroundBorder">
            <Setter Property="Background" Value="{DynamicResource ButtonWarningAccentBackground}" />
        </Style>
        <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
            <Setter Property="Foreground" Value="{DynamicResource ButtonWarningAccentForeground}" />
        </Style>
        <!-- ... -->
    </Style>
    <!-- ... -->
</ControlTheme>

Используйте свойство Window.Resources для переопределения цветов фона для акцентированных кнопок для вариантов темы Light и Dark на уровне окна. Приведенный ниже код переопределяет соответствующие ресурсы темы в словарях ресурсов с ключами Default и Dark. Эти словари определяют ресурсы для вариантов темы Light и Dark соответственно:

<mx:MxWindow 
    xmlns:mx="https://schemas.eremexcontrols.net/avalonia">

    <mx:MxWindow.Resources>
        <ResourceDictionary>
            <ResourceDictionary.ThemeDictionaries>
                <!--Ресурсы для варианта темы Light-->
                <ResourceDictionary x:Key="Default">
                    <SolidColorBrush x:Key="ButtonWarningAccentBackground" Color="Purple" />
                </ResourceDictionary>

                <!--Ресурсы для варианта темы Dark-->
                <ResourceDictionary x:Key="Dark">
                    <SolidColorBrush x:Key="ButtonWarningAccentBackground" Color="LightYellow" />
                </ResourceDictionary>
            </ResourceDictionary.ThemeDictionaries>
        </ResourceDictionary>
    </mx:MxWindow.Resources>
    <!-- ... -->
</mx:MxWindow>

Вы также можете изменить кисти, связанные с дополнительными состояниями акцентированных кнопок:

При наведении — ButtonWarningAccentBackgroundPointerOver и ButtonWarningAccentForegroundPointerOver
При нажатии — ButtonWarningAccentBackgroundPressed и ButtonWarningAccentForegroundPressed
При отключении — ButtonWarningAccentBackgroundDisabled и ButtonWarningAccentForegroundDisabled.

Изменение стилей элементов управления, определенных в теме оформления Eremex¶

Если вы изучите исходный код темы оформления DeltaDesign, вы можете увидеть селекторы стилей, которые изменяют не только кисти и цвета элементов управления, но и другие настройки внешнего вида. Например, селекторы стилей определяют размер внутренних элементов элементов управления и шаблоны, которые определяют layout и содержимое элементов управления.

Вы можете переопределить эти селекторы стилей в вашем приложении, используя следующие свойства:

Application.Styles — Коллекция стилей для применения к элементам управления на уровне приложения.
Window.Styles — Коллекция стилей для применения к элементам управления в пределах окна.
Control.Styles — Коллекция стилей для применения к конкретному элементу управления.

Пример - Изменение стиля для кнопки-переключателя цвета в элементе управления ColorEditor на уровне приложения¶

Этот пример показывает, как изменить внешний вид и шаблон кнопок-переключателей цвета в элементах управления ColorEditor и PopupColorEditor. Новые стили применяются ко всем элементам управления ColorEditor и PopupColorEditor в пределах приложения.

theme-coloreditor-colorcheckbutton

Вы можете найти стили по умолчанию для кнопок-переключателей цвета в исходном коде темы DeltaDesign. Создайте свои собственные стили на основе этого определения стиля.

<!-- Eremex.Avalonia.Themes.DeltaDesign\Controls\Editors\ColorEditor.axaml -->
<!--Color Toggle Button-->
<ControlTheme x:Key="{x:Type mxev:ColorToggleButton}" TargetType="mxev:ColorToggleButton">
    <Setter Property="CornerRadius" Value="{StaticResource EditorCornerRadius}"/>
    <Setter Property="BorderThickness" Value="{StaticResource EditorBorderThickness}"/>
    <Setter Property="Width" Value="{StaticResource ColorButtonDefaultSize}"/>
    <!-- ... -->
    <Setter Property="Template">
        <ControlTemplate>
            <Border x:Name="PART_ExternalBorder"
                    CornerRadius="{TemplateBinding CornerRadius}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    ...>
                <Border x:Name="PART_InternalBorder"
                        CornerRadius="{TemplateBinding CornerRadius}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        ...>
                    <Path x:Name="PART_CheckGlyph"
                            Stretch="None"
                            Fill="{Binding $parent[mxev:ColorToggleButton].BorderBrush}"
                            Data="{StaticResource CheckBoxCheckIcon}"
                            .../>
                </Border>
            </Border>
        </ControlTemplate>
    </Setter>
</ControlTheme>

Выполните следующие действия, чтобы изменить внешний вид кнопок-переключателей цвета на уровне приложения:

Создайте файл "ModifiedStyles.axaml" в папке "Resources" вашего проекта.
Добавьте следующий код в файл "ModifiedStyles.axaml". Этот код переопределяет стили для класса ColorToggleButton

<Styles xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mxev="clr-namespace:Eremex.AvaloniaUI.Controls.Editors.Visuals;assembly=Eremex.Avalonia.Controls">
    <Styles.Resources>
        <RectangleGeometry x:Key="ColorCheckedIcon" Rect="0,0,7,7" />
    </Styles.Resources>

    <Style Selector="mxev|ColorToggleButton">
        <Setter Property="CornerRadius" Value="3"/>
        <Setter Property="Template">
            <ControlTemplate>
                <Border x:Name="PART_ExternalBorder"
                                CornerRadius="{TemplateBinding CornerRadius}"
                                BorderThickness="2"
                                BorderBrush="LightSteelBlue"
                                Background="{TemplateBinding Background}">
                    <Border x:Name="PART_InternalBorder"
                                    CornerRadius="{TemplateBinding CornerRadius}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    Background="{TemplateBinding Background}">
                        <Path x:Name="PART_CheckGlyph"
                                    Stretch="None"
                                    VerticalAlignment="Center"
                                    HorizontalAlignment="Center"
                                    Data="{StaticResource ColorCheckedIcon}"
                                    Margin="0"
                                    Width = "7"
                                    Height="7"
                        />
                    </Border>
                </Border>
            </ControlTemplate>
        </Setter>
    </Style>
</Styles>

В файле App.axaml включите стили из файла "Resources/ModifiedStyles.axaml" в коллекцию Application.Styles.

<Application ...>
    <Application.Styles>
        <theme:DeltaDesignTheme/>
        <StyleInclude Source="/Resources/ModifiedStyles.axaml"/>
    </Application.Styles>
</Application>

Запустите приложение, чтобы увидеть результат.

theme-coloreditor-colorcheckbutton-result

^* Эта страница была переведена с помощью нейросети Deepseek.