Pseudo-classes в Avalonia — замість WPF Triggers

Avalonia обрала інший шлях

У статті 29 ми детально вивчили WPF Triggers — Property Trigger, DataTrigger, MultiTrigger, EventTrigger, VisualStateManager. Це потужна система, але вона несе значний XML-шум: навіть проста зміна кольору при hover вимагає окремого блоку <Style.Triggers> із вкладеними тегами.

Avalonia вирішила цю проблему радикально — відмовилась від Triggers взагалі. У Avalonia немає Trigger, DataTrigger, MultiTrigger, EventTrigger. Натомість — CSS pseudo-classes та селектори, які вже знайомі кожному веброзробнику.

Це рішення має принципові наслідки:

Що це дає: Лаконічність. Те, що у WPF займає 8 рядків <Style.Triggers>, в Avalonia — один <Style Selector="Button:pointerover">. Знайомий синтаксис для тих, хто знає CSS. Відсутність концепції «порядку тригерів» — замість неї Specificity (стаття 27a).

Що це означає для WPF-розробника: При портуванні WPF-проєкту на Avalonia всі Trigger-и потрібно переписати на Selector + Pseudo-class. Але ця задача значно менш болісна, ніж здається — пряма відповідність між концепціями існує майже завжди.

У цій статті ми побудуємо повне відображення WPF → Avalonia для кожного типу Trigger і відпрацюємо кастомні pseudo-classes для власних стилів.

Вбудовані pseudo-classes: повна таблиця

Avalonia надає набір вбудованих pseudo-classes, прив'язаних до внутрішніх станів контролу. Їх не потрібно «вмикати» — вони активуються автоматично відповідно до стану елемента.

Зверніть на :focus-within та :not() — ці pseudo-classes взагалі не мають аналогів у WPF Triggers. Нарешті :nth-child, :first-child, :last-child — можливості, недоступні у WPF взагалі.

Відповідність WPF Triggers → Avalonia Pseudo-classes

Property Trigger →

WPF:

<Style TargetType="Button">
    <Setter Property="Background" Value="#4F46E5"/>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="#3730A3"/>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="Background" Value="#312E81"/>
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Opacity" Value="0.5"/>
        </Trigger>
    </Style.Triggers>
</Style>

Avalonia — той самий результат:

<Style Selector="Button">
    <Setter Property="Background" Value="#4F46E5"/>
</Style>
<Style Selector="Button:pointerover">
    <Setter Property="Background" Value="#3730A3"/>
</Style>
<Style Selector="Button:pressed">
    <Setter Property="Background" Value="#312E81"/>
</Style>
<Style Selector="Button:disabled">
    <Setter Property="Opacity" Value="0.5"/>
</Style>

WPF: 12+ рядків вкладеного XML. Avalonia: 4 плоских <Style>. Семантика ідентична.

Важлива відмінність: авто-відкочення у Avalonia

У WPF Trigger автоматично відкочує зміни, коли умова перестає виконуватись. В Avalonia — CSS Specificity та механізм Selector-ів гарантують те саме: коли :pointerover неактивний — відповідний <Style> не застосовується, і базові значення повертаються автоматично. Поведінка ідентична, механізм — CSS-like.

DataTrigger → Binding + Classes або CompiledBinding

Це найбільш значуща відмінність між WPF і Avalonia. У WPF DataTrigger дозволяє реагувати на Binding-значення безпосередньо у XAML без жодного C#:

<!-- WPF DataTrigger -->
<DataTrigger Binding="{Binding IsCompleted}" Value="True">
    <Setter Property="Background" Value="#ECFDF5"/>
</DataTrigger>

В Avalonia прямого аналогу DataTrigger немає. Натомість використовуються два підходи:

Підхід 1: Style Classes (рекомендований)

Замість того, щоб реагувати на значення Binding прямо у стилях, динамічно додаємо/видаляємо CSS-клас у code-behind або через спеціальні Behaviors:

// У ViewModel або code-behind
isCompletedBinding.Subscribe(isCompleted =>
{
    if (isCompleted)
        border.Classes.Add("completed");
    else
        border.Classes.Remove("completed");
});

<!-- У XAML — стиль реагує на клас -->
<Style Selector="Border.completed">
    <Setter Property="Background" Value="#ECFDF5"/>
</Style>

Підхід 2: Avalonia Binding Classes (декларативний)

Avalonia підтримує спеціальний синтаксис Classes.className="{Binding PropertyName}" прямо у XAML:

<Border>
    <Border.Classes>
        <!-- Клас "completed" активний коли IsCompleted = True -->
        <Classes>completed</Classes>
    </Border.Classes>

<!-- Або через атрибутний синтаксис Avalonia 11.1+: -->
<Border Classes.completed="{Binding IsCompleted}"
        Classes.urgent="{Binding IsUrgent}">

Це найближчий аналог WPF DataTrigger — декларативно у XAML, без C#.

Повний приклад: стилізація картки через pseudo-classes

<StackPanel Margin="20" Spacing="16">
  <StackPanel.Styles>

    <!-- Базова картка -->
    <Style Selector="Border.card">
      <Setter Property="Background"      Value="White"/>
      <Setter Property="CornerRadius"    Value="12"/>
      <Setter Property="Padding"         Value="20"/>
      <Setter Property="BorderBrush"     Value="#E5E7EB"/>
      <Setter Property="BorderThickness" Value="1"/>
      <Setter Property="Cursor"          Value="Hand"/>
      <Setter Property="Transitions">
        <Setter.Value>
          <Transitions>
            <BrushTransition Property="Background" Duration="0:0:0.15"/>
            <BrushTransition Property="BorderBrush" Duration="0:0:0.15"/>
          </Transitions>
        </Setter.Value>
      </Setter>
    </Style>

    <!-- Hover: :pointerover -->
    <Style Selector="Border.card:pointerover">
      <Setter Property="Background"   Value="#F5F3FF"/>
      <Setter Property="BorderBrush"  Value="#A5B4FC"/>
    </Style>

    <!-- Картка "completed" клас -->
    <Style Selector="Border.card.completed">
      <Setter Property="Background"  Value="#ECFDF5"/>
      <Setter Property="BorderBrush" Value="#6EE7B7"/>
    </Style>

    <!-- Картка "urgent" клас -->
    <Style Selector="Border.card.urgent">
      <Setter Property="Background"  Value="#FEF2F2"/>
      <Setter Property="BorderBrush" Value="#FCA5A5"/>
    </Style>

    <!-- TextBox: базовий стан -->
    <Style Selector="TextBox">
      <Setter Property="Background"      Value="#F9FAFB"/>
      <Setter Property="BorderBrush"     Value="#D1D5DB"/>
      <Setter Property="BorderThickness" Value="1.5"/>
      <Setter Property="CornerRadius"    Value="8"/>
      <Setter Property="Padding"         Value="12,8"/>
      <Setter Property="Transitions">
        <Setter.Value>
          <Transitions>
            <BrushTransition Property="BorderBrush" Duration="0:0:0.15"/>
            <BrushTransition Property="Background"  Duration="0:0:0.15"/>
          </Transitions>
        </Setter.Value>
      </Setter>
    </Style>

    <!-- TextBox hover -->
    <Style Selector="TextBox:pointerover">
      <Setter Property="BorderBrush" Value="#9CA3AF"/>
    </Style>

    <!-- TextBox focus: синя рамка -->
    <Style Selector="TextBox:focus">
      <Setter Property="Background"   Value="White"/>
      <Setter Property="BorderBrush"  Value="#4F46E5"/>
    </Style>

    <!-- CheckBox checked: зелений текст поруч -->
    <Style Selector="CheckBox:checked /template/ ContentPresenter">
      <Setter Property="Foreground" Value="#10B981"/>
    </Style>

    <!-- CheckBox disabled -->
    <Style Selector="CheckBox:disabled">
      <Setter Property="Opacity" Value="0.4"/>
    </Style>

  </StackPanel.Styles>

  <!-- Картки з різними класами -->
  <Border Classes="card">
    <TextBlock Text="Звичайне завдання — hover для зміни фону"/>
  </Border>

  <Border Classes="card completed">
    <TextBlock Text="✓ Завершено — завжди зелений"/>
  </Border>

  <Border Classes="card urgent">
    <TextBlock Text="🔥 Терміново — завжди червоний"/>
  </Border>

  <!-- TextBox із focus -->
  <TextBox Watermark="Клікни — рамка стане синьою"/>

  <!-- CheckBox: checked колір через /template/ -->
  <StackPanel Spacing="8">
    <CheckBox Content="Підтверджено" IsChecked="True"/>
    <CheckBox Content="Очікує" IsChecked="False"/>
    <CheckBox Content="Заблоковано" IsEnabled="False"/>
  </StackPanel>

</StackPanel>

Custom Pseudo-classes: PseudoClasses.Set()

Вбудовані pseudo-classes охоплюють більшість стандартних сценаріїв, але іноді потрібно визначити власний стан для кастомного контролу. Наприклад: :loading, :active, :selected, :dragging.

В Avalonia для цього використовується API PseudoClasses.Set() та PseudoClasses.Remove() на рівні коду контролу. Цей метод доступний у класах, що успадковують StyledElement (тобто будь-який UI-елемент).

Реалізація кастомного pseudo-class у Custom Control

// CustomControl.cs
public class StatusCard : ContentControl
{
    public static readonly StyledProperty<bool> IsLoadingProperty =
        AvaloniaProperty.Register<StatusCard, bool>(nameof(IsLoading));

    public bool IsLoading
    {
        get => GetValue(IsLoadingProperty);
        set => SetValue(IsLoadingProperty, value);
    }

    protected override void OnPropertyChanged(AvaloniaPropertyChangedEventArgs e)
    {
        base.OnPropertyChanged(e);

        if (e.Property == IsLoadingProperty)
        {
            // Встановлюємо або знімаємо pseudo-class :loading
            PseudoClasses.Set(":loading", (bool)e.NewValue!);
        }
    }
}

<!-- Використання у XAML: -->
<local:StatusCard IsLoading="True">
    <TextBlock Text="Контент картки"/>
</local:StatusCard>

<!-- Стиль реагує на :loading -->
<Style Selector="local|StatusCard:loading">
    <Setter Property="Opacity" Value="0.6"/>
</Style>
<Style Selector="local|StatusCard:loading /template/ Border">
    <Setter Property="Background" Value="#EEF2FF"/>
</Style>

MultiTrigger та EventTrigger: аналоги

MultiTrigger → Combining Selectors

WPF MultiTrigger вимагає ANDкомбінації умов. В Avalonia ця ж логіка виражається ланцюжком pseudo-classes в одному Selector:

<!-- WPF MultiTrigger: IsSelected AND IsMouseOver -->
<MultiTrigger>
    <MultiTrigger.Conditions>
        <Condition Property="IsSelected"  Value="True"/>
        <Condition Property="IsMouseOver" Value="True"/>
    </MultiTrigger.Conditions>
    <Setter Property="Background" Value="#FEF3C7"/>
</MultiTrigger>

<!-- Avalonia: ланцюжок pseudo-classes = AND -->
<Style Selector="ListBoxItem:selected:pointerover">
    <Setter Property="Background" Value="#FEF3C7"/>
</Style>

Якщо потрібно AND по власних класах та pseudo-classes — просто об'єднуємо:

<Style Selector="Border.card.urgent:pointerover">
    <Setter Property="Background" Value="#FEE2E2"/>
</Style>

EventTrigger → анімації через Transitions або Animation

WPF EventTrigger запускає Storyboard у відповідь на RoutedEvent. В Avalonia:

• Для переходів між станами — Transitions на елементі (найпростіше, без анімаційного коду).
• Для складної анімації — Animation + KeyFrames (аналог WPF Storyboard, але у Avalonia стилі).

<!-- Avalonia: плавна зміна Background при :pointerover через Transition -->
<Style Selector="Button">
    <Setter Property="Transitions">
        <Setter.Value>
            <Transitions>
                <BrushTransition Property="Background" Duration="0:0:0.2"/>
            </Transitions>
        </Setter.Value>
    </Setter>
</Style>
<Style Selector="Button:pointerover">
    <Setter Property="Background" Value="#3730A3"/>
</Style>

Avalonia Transitions — значно менше коду порівняно з WPF EventTrigger + Storyboard + ColorAnimation.

Зведена таблиця відповідностей: WPF → Avalonia

Практичні завдання

Підсумок

Що ми вивчили у цій статті

Avalonia замінила всю систему WPF Triggers на CSS pseudo-classes — рішення більш лаконічне, більш знайоме і більш CSS-like.

Вбудовані pseudo-classes автоматично відображають стан контролу: :pointerover (hover), :pressed, :focus, :focus-within, :disabled, :checked, :unchecked, :selected, :empty, :nth-child(). Деякі не мають аналогів у WPF взагалі.

DataTrigger → Classes.prop="{Binding bool}" — Avalonia 11.1+ підтримує прив'язку класів прямо у XAML. Це найближчий аналог WPF DataTrigger для boolean-умов.

MultiTrigger → ланцюжок pseudo-classes у одному Selector: Button:pressed:focus — AND-умова автоматично.

EventTrigger → Transitions — CSS-like transition на властивостях елемента замість складного Storyboard.

Custom pseudo-class: PseudoClasses.Set(":stateName", value) у класі контролу → стиль Selector="local|Type:stateName" реагує автоматично.

Sentinel limitation: відсутній прямий аналог DataTrigger для нe-boolean значень — потрібен Converter або Behaviors.

Зіставлення підходів

Що далі

Наступна стаття — Data Binding: режими та конвертери. OneWay, TwoWay, IValueConverter, StringFormat, TargetNullValue, FallbackValue, UpdateSourceTrigger — деталі, що відрізняють поверхневе знайомство з Binding від справжнього розуміння.