Классы стилей

Вы можете назначить элементу управления Avalonia UI один или несколько классов стилей и использовать их для определения выбора стиля. Классы стилей назначаются в элементе управления с помощью атрибута Classes. Если вы хотите назначить более одного класса, используйте список с разделителями-пробелами.

Например, эта кнопка имеет применённые классы стилей h1 и blue:

<Button Classes="h1 blue"/>

Псевдоклассы

Как и в CSS, элементы управления могут иметь псевдоклассы; это классы, которые определены в самом элементе управления, а не пользователем. Имена псевдоклассов в селекторе всегда начинаются с двоеточия.

Например, псевдокласс :pointerover указывает, что указатель ввода в настоящее время находится над элементом управления (внутри его границ). (Этот псевдокласс аналогичен :hover в CSS.)

Вот пример селектора псевдокласса :pointerover:

<StackPanel>
  <StackPanel.Styles>
    <Style Selector="Border:pointerover">
      <Setter Property="Background" Value="Red"/>
    </Style>
  </StackPanel.Styles>
  <Border>
    <TextBlock>У меня будет красный фон при наведении.</TextBlock>
  </Border>
</StackPanel>

В этом примере селектор псевдокласса изменяет свойства внутри шаблона элемента управления:

<StackPanel>
  <StackPanel.Styles>
    <Style Selector="Button:pressed /template/ ContentPresenter">
        <Setter Property="TextBlock.Foreground" Value="Red"/>
    </Style>
  </StackPanel.Styles>
  <Button>У меня будет красный текст при нажатии.</Button>
</StackPanel>

Другие псевдоклассы включают :focus, :disabled, :pressed для кнопок и :checked для флажков.

к сведению

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

Условные классы

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

<Button Classes.accent="{Binding IsSpecial}" />

Классы в коде

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

control.Classes.Add("blue");
control.Classes.Remove("red");