Chi arriva da WPF trova in Avalonia una grande novità: gli stili si applicano con selettori simili a quelli dei CSS, invece che con trigger e chiavi di risorsa.

Il tema di base

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="Magazzino.App"
             RequestedThemeVariant="Default">
    <Application.Styles>
        <FluentTheme />
    </Application.Styles>
</Application>

Con RequestedThemeVariant="Default" l'applicazione segue il tema chiaro o scuro del sistema operativo; si può forzare Light o Dark.

Classi e pseudo-classi

<Window.Styles>
    <Style Selector="Button.primario">
        <Setter Property="Background" Value="#2a8442" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="CornerRadius" Value="8" />
    </Style>
    <Style Selector="Button.primario:pointerover /template/ ContentPresenter">
        <Setter Property="Background" Value="#23703a" />
    </Style>
    <Style Selector="TextBox:error">
        <Setter Property="BorderBrush" Value="Firebrick" />
    </Style>
</Window.Styles>

<Button Classes="primario" Content="Conferma ordine" />

Le classi si possono aggiungere e togliere anche da codice o da binding (Classes.attivo="{Binding IsAttivo}"), un modo pulito per cambiare aspetto in base allo stato.

Risorse per i due temi

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Light">
                <SolidColorBrush x:Key="SfondoPannello" Color="#F4F6F8" />
            </ResourceDictionary>
            <ResourceDictionary x:Key="Dark">
                <SolidColorBrush x:Key="SfondoPannello" Color="#1E2226" />
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Application.Resources>

<Border Background="{DynamicResource SfondoPannello}" />

ControlTheme

Per ridisegnare completamente un controllo si usa un ControlTheme, che ne definisce template e stili di base. Per piccoli ritocchi, invece, gli stili con selettore sono più semplici e restano compatibili con gli aggiornamenti del tema Fluent.