Avalonia UI 样式进阶实战：外置样式 + MVVM 主题切换 + 样式优先级全解析

在 Avalonia UI 跨平台开发中，样式（Style）同样是实现界面美化、统一风格、提高代码复用性的核心利器。但很多从 WPF 迁移过来的开发者容易陷入「WPF 思维定势」，写出在 Avalonia 中无法正确工作的 XAML 代码。

今天我们就通过一个完整的模块化实战项目，从「外置样式封装」到「MVVM 模式主题切换」，再到「样式优先级核心知识点」，全方位解锁 Avalonia 样式的高级用法，最终实现一个支持「浅/深色全局主题切换」「按钮专属样式切换」「传统后台代码样式切换」的完整跨平台案例。

一、项目架构梳理：模块化让样式更易维护

一个优秀的 Avalonia 项目，必然离不开清晰的模块化架构。本案例采用「分层 + 模块化」设计，将样式、视图、视图模型、转换器分离管理。

⚠️ Avalonia 与 WPF 架构差异 ：Avalonia 使用 .axaml 扩展名（而非 .xaml），命名空间使用 https://github.com/avaloniaui（而非 WPF 的 http://schemas.microsoft.com/winfx/2006/xaml/presentation）。

核心项目结构如下：

复制代码

AvaloniaStyleDemo/
├─ App.axaml                    # 全局资源与样式注册入口
├─ Views/                       # 视图层
│  ├─ MainContainerWindow.axaml # 主窗口，TabControl 承载所有子页面
│  └─ SubPages/                 # 子页面集合
│     ├─ StyleToggleMVVMPage.axaml    # MVVM 按钮专属样式切换
│     ├─ ThemeSwitchPage.axaml         # 浅/深色全局主题切换
│     ├─ ThemePreviewTextBoxPage.axaml # 文本框主题适配预览
│     └─ CodeBehindStyleTogglePage.axaml# 传统后台代码样式切换
├─ ViewModels/                  # 视图模型层
│  ├─ MainViewModel.cs          # 核心 VM，属性变更与主题切换逻辑
│  └─ RelayCommand.cs           # 精简 ICommand 实现
├─ Converters/                  # 转换器层
│  └─ BoolToContentConverter.cs # 布尔值转按钮文本
└─ Styles/                      # 样式资源层（外置样式核心）
   ├─ BaseStyles.axaml          # 基础颜色/尺寸常量资源
   ├─ LightTheme.axaml          # 浅色主题按钮/文本框样式
   ├─ DarkTheme.axaml           # 深色主题按钮/文本框样式
   └─ MergedStyles.axaml        # 全局资源合并入口（VM 单例 + 转换器）

二、基石：外置样式的封装与全局合并

2.1 为什么要外置样式？

将样式抽离到独立文件中，具备复用性强、可维护性高、支持主题切换等优势。但 Avalonia 的组织方式和 WPF 有本质区别：

⚠️ 关键差异 ：Avalonia 的**样式（Style）放在 Styles 集合中，而 资源（画刷、厚度、字号等）放在 ResourceDictionary 中。两者是分开的。Avalonia 使用 选择器（Selector）**而非 TargetType 来定位控件。

2.2 核心样式文件实现

（1）基础资源抽离：BaseStyles.axaml

这里只放可复用的常量资源（颜色画刷、厚度、字号），不放 Style。

xml 复制代码

<ResourceDictionary xmlns="https://github.com/avaloniaui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <!-- 基础尺寸常量 -->
    <Thickness x:Key="BaseMargin">5</Thickness>
    <Thickness x:Key="BasePadding">8,4</Thickness>
    <x:Double x:Key="BaseFontSize">14</x:Double>

    <!-- 通用颜色 -->
    <SolidColorBrush x:Key="BaseTextColor" Color="#333333" />
    <SolidColorBrush x:Key="BaseBorderColor" Color="#E0E0E0" />
    <SolidColorBrush x:Key="BaseButtonBg" Color="#FF4081" />

    <!-- 浅色主题 -->
    <SolidColorBrush x:Key="LightButtonBg" Color="#34C759" />
    <SolidColorBrush x:Key="LightTextBoxBg" Color="#FFFFFF" />
    <SolidColorBrush x:Key="LightThemeBg" Color="#F5F5F5" />

    <!-- 深色主题 -->
    <SolidColorBrush x:Key="DarkButtonBg" Color="#4CD964" />
    <SolidColorBrush x:Key="DarkTextColor" Color="#E0E0E0" />
    <SolidColorBrush x:Key="DarkBorderColor" Color="#3A3A3C" />
    <SolidColorBrush x:Key="DarkTextBoxBg" Color="#2C2C2E" />
    <SolidColorBrush x:Key="DarkThemeBg" Color="#1C1C1E" />
</ResourceDictionary>

（2）浅色主题样式：LightTheme.axaml

样式文件的根节点是 <Styles>，不是 <ResourceDictionary>。通过 Selector="Button.lightButton" 类选择器定位控件，应用时在控件上写 Classes="lightButton"。

xml 复制代码

<Styles xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <!-- 合并基础资源 -->
    <Styles.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceInclude Source="avares://AvaloniaStyleDemo/Styles/BaseStyles.axaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Styles.Resources>

    <!-- 浅色按钮：应用 Classes="lightButton" -->
    <Style Selector="Button.lightButton">
        <Setter Property="Background" Value="{StaticResource LightButtonBg}" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="MinWidth" Value="100" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="CornerRadius" Value="4" />
        <Setter Property="Padding" Value="16,8" />
        <!-- 伪类替代 WPF Trigger -->
        <Style Selector="^:pointerover">
            <Setter Property="Background" Value="#45D96A" />
        </Style>
        <Style Selector="^:pressed">
            <Setter Property="Background" Value="#2BA84A" />
        </Style>
        <Style Selector="^:disabled">
            <Setter Property="Background" Value="#E0E0E0" />
            <Setter Property="Foreground" Value="#999999" />
        </Style>
    </Style>

    <!-- 浅色文本框：应用 Classes="lightTextBox" -->
    <Style Selector="TextBox.lightTextBox">
        <Setter Property="MinWidth" Value="200" />
        <Setter Property="BorderBrush" Value="{StaticResource BaseBorderColor}" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="Background" Value="{StaticResource LightTextBoxBg}" />
        <Setter Property="Foreground" Value="{StaticResource BaseTextColor}" />
        <Setter Property="CornerRadius" Value="4" />
        <Setter Property="Padding" Value="8,4" />
        <Style Selector="^:focus">
            <Setter Property="BorderBrush" Value="#FF4081" />
        </Style>
    </Style>
</Styles>

⚠️ Avalonia 样式系统核心差异：

样式定义在 <Styles> 集合中，不是 <ResourceDictionary> 中

使用 Selector="Button.lightButton"（类选择器）替代 WPF 的 x:Key + TargetType

使用 :pointerover、:pressed、:focus、:disabled 等伪类替代 WPF 的 Trigger

嵌套样式使用 ^ 符号表示父选择器（如 ^:pointerover 等价于 Button.lightButton:pointerover）

不支持 BasedOn 样式继承 ，改用 Classes 组合实现样式复用

（3）深色主题样式：DarkTheme.axaml

与浅色主题对称，定义 darkButton 和 darkTextBox 两个样式类。

xml 复制代码

<Styles xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Styles.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceInclude Source="avares://AvaloniaStyleDemo/Styles/BaseStyles.axaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Styles.Resources>

    <!-- 深色按钮：应用 Classes="darkButton" -->
    <Style Selector="Button.darkButton">
        <Setter Property="Background" Value="{StaticResource DarkButtonBg}" />
        <Setter Property="Foreground" Value="{StaticResource DarkTextColor}" />
        <Setter Property="MinWidth" Value="100" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="CornerRadius" Value="4" />
        <Setter Property="Padding" Value="16,8" />
        <Style Selector="^:pointerover">
            <Setter Property="Background" Value="#5EE97E" />
        </Style>
        <Style Selector="^:pressed">
            <Setter Property="Background" Value="#3AB854" />
        </Style>
        <Style Selector="^:disabled">
            <Setter Property="Background" Value="#3A3A3C" />
            <Setter Property="Foreground" Value="#666666" />
        </Style>
    </Style>

    <!-- 深色文本框：应用 Classes="darkTextBox" -->
    <Style Selector="TextBox.darkTextBox">
        <Setter Property="MinWidth" Value="200" />
        <Setter Property="BorderBrush" Value="{StaticResource DarkBorderColor}" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="Background" Value="{StaticResource DarkTextBoxBg}" />
        <Setter Property="Foreground" Value="{StaticResource DarkTextColor}" />
        <Setter Property="CornerRadius" Value="4" />
        <Setter Property="Padding" Value="8,4" />
        <Style Selector="^:focus">
            <Setter Property="BorderBrush" Value="{StaticResource DarkButtonBg}" />
        </Style>
    </Style>
</Styles>

（4）全局资源合并入口：MergedStyles.axaml

这个文件是 ResourceDictionary，负责注册全局 ViewModel 单例和转换器实例，并合并基础资源。

xml 复制代码

<ResourceDictionary xmlns="https://github.com/avaloniaui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:vm="using:AvaloniaStyleDemo.ViewModels"
                    xmlns:conv="using:AvaloniaStyleDemo.Converters">
    <!-- 全局 ViewModel 单例：各子页面通过 {StaticResource MainVM} 引用 -->
    <vm:MainViewModel x:Key="MainVM" />
    <!-- 全局值转换器 -->
    <conv:BoolToContentConverter x:Key="BoolToContentConverter" />

    <ResourceDictionary.MergedDictionaries>
        <ResourceInclude Source="avares://AvaloniaStyleDemo/Styles/BaseStyles.axaml" />
    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

（5）应用全局注册：App.axaml

在 Application.Styles 中引入内置 FluentTheme 和两个外置样式文件；在 Application.Resources 中合并全局资源，并定义 ThemeDictionaries 主题变体字典。

xml 复制代码

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="AvaloniaStyleDemo.App"
             RequestedThemeVariant="Light">
    <Application.Styles>
        <!-- Avalonia 内置 Fluent 主题 -->
        <FluentTheme />
        <!-- 外置自定义样式：浅色 / 深色按钮与文本框样式（通过 Classes 选择器应用） -->
        <StyleInclude Source="avares://AvaloniaStyleDemo/Styles/LightTheme.axaml" />
        <StyleInclude Source="avares://AvaloniaStyleDemo/Styles/DarkTheme.axaml" />
    </Application.Styles>

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceInclude Source="avares://AvaloniaStyleDemo/Styles/MergedStyles.axaml" />
            </ResourceDictionary.MergedDictionaries>

            <!--
              ThemeDictionaries：Avalonia 11+ 主题变体机制
              通过 RequestedThemeVariant 切换 Light / Dark 时，
              用 DynamicResource 引用的资源会自动跟随切换。
              注意：必须用 DynamicResource，StaticResource 无法解析 ThemeDictionaries 中的资源。
            -->
            <ResourceDictionary.ThemeDictionaries>
                <ResourceDictionary x:Key="Light">
                    <SolidColorBrush x:Key="GlobalThemeBg" Color="#F5F5F5" />
                    <SolidColorBrush x:Key="GlobalButtonBg" Color="#34C759" />
                    <SolidColorBrush x:Key="GlobalTextBoxBg" Color="#FFFFFF" />
                    <SolidColorBrush x:Key="GlobalTextColor" Color="#333333" />
                    <SolidColorBrush x:Key="GlobalCardBg" Color="#FFFFFF" />
                </ResourceDictionary>
                <ResourceDictionary x:Key="Dark">
                    <SolidColorBrush x:Key="GlobalThemeBg" Color="#1C1C1E" />
                    <SolidColorBrush x:Key="GlobalButtonBg" Color="#4CD964" />
                    <SolidColorBrush x:Key="GlobalTextBoxBg" Color="#2C2C2E" />
                    <SolidColorBrush x:Key="GlobalTextColor" Color="#E0E0E0" />
                    <SolidColorBrush x:Key="GlobalCardBg" Color="#2C2C2E" />
                </ResourceDictionary>
            </ResourceDictionary.ThemeDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

csharp 复制代码

using Avalonia;
using Avalonia.Controls.ApplicationLifetimes;
using Avalonia.Markup.Xaml;

namespace AvaloniaStyleDemo;

public partial class App : Application
{
    public override void Initialize()
    {
        AvaloniaXamlLoader.Load(this);
    }

    public override void OnFrameworkInitializationCompleted()
    {
        if (ApplicationLifetime is IClassicDesktopStyleApplicationLifetime desktop)
        {
            desktop.MainWindow = new Views.MainContainerWindow();
        }
        base.OnFrameworkInitializationCompleted();
    }
}

⚠️ Avalonia 主题变体核心机制：

ThemeDictionaries 是 Avalonia 11+ 引入的主题变体系统，通过 RequestedThemeVariant 自动切换

使用 DynamicResource 引用主题变体中的资源，切换主题时自动更新

RequestedThemeVariant="Default" 表示跟随系统主题；"Light" / "Dark" 强制指定

三、主容器实现：承载所有子页面

Avalonia 主容器是 Window，使用 TabControl 承载子页面（UserControl）。

xml 复制代码

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:AvaloniaStyleDemo.ViewModels"
        xmlns:sub="using:AvaloniaStyleDemo.Views.SubPages"
        x:Class="AvaloniaStyleDemo.Views.MainContainerWindow"
        Title="Avalonia 样式核心示例（完整模块化版）"
        Height="520" Width="880"
        Background="{DynamicResource GlobalThemeBg}">
    <!-- 设计时数据上下文，便于 IDE 预览 -->
    <Design.DataContext>
        <vm:MainViewModel />
    </Design.DataContext>

    <Grid Background="{DynamicResource GlobalThemeBg}">
        <TabControl Margin="10" TabStripPlacement="Top">
            <TabItem Header="MVVM 样式切换（按钮专属）">
                <sub:StyleToggleMVVMPage />
            </TabItem>
            <TabItem Header="全局主题切换（浅/深）">
                <sub:ThemeSwitchPage />
            </TabItem>
            <TabItem Header="文本框主题预览（跟随全局）">
                <sub:ThemePreviewTextBoxPage />
            </TabItem>
            <TabItem Header="后台代码切换样式（传统方式）">
                <sub:CodeBehindStyleTogglePage />
            </TabItem>
        </TabControl>
    </Grid>
</Window>

csharp 复制代码

using Avalonia.Controls;

namespace AvaloniaStyleDemo.Views;

public partial class MainContainerWindow : Window
{
    public MainContainerWindow()
    {
        InitializeComponent();
    }
}

⚠️ Avalonia 特有 ：Design.DataContext 用于设计时数据上下文预览，类似 WPF 的 d:DataContext。窗口背景通过 {DynamicResource GlobalThemeBg} 引用主题变体资源，切换主题时自动变色。

四、核心实战：MVVM 模式下的全局主题切换

4.1 MVVM 基础封装：RelayCommand

⚠️ 重要修正 ：Avalonia 中没有 WPF 的 CommandManager.RequerySuggested。如果照搬 WPF 的写法会编译失败。Avalonia 版本使用标准 CLR 事件，并提供 RaiseCanExecuteChanged() 手动触发。

csharp 复制代码

using System;
using System.Windows.Input;

namespace AvaloniaStyleDemo.ViewModels;

/// <summary>
/// 精简版 ICommand 实现（Avalonia 与 WPF 通用）。
/// 注意：Avalonia 中没有 WPF 的 CommandManager.RequerySuggested，
/// 因此使用标准 CLR 事件，并提供 RaiseCanExecuteChanged 手动触发。
/// </summary>
public class RelayCommand : ICommand
{
    private readonly Action _execute;
    private readonly Func<bool>? _canExecute;

    public RelayCommand(Action execute, Func<bool>? canExecute = null)
    {
        _execute = execute ?? throw new ArgumentNullException(nameof(execute));
        _canExecute = canExecute;
    }

    public bool CanExecute(object? parameter)
        => _canExecute?.Invoke() ?? true;

    public void Execute(object? parameter)
        => _execute.Invoke();

    public event EventHandler? CanExecuteChanged;

    public void RaiseCanExecuteChanged()
        => CanExecuteChanged?.Invoke(this, EventArgs.Empty);
}

4.2 核心视图模型：MainViewModel

⚠️ 关键修正 ：切换主题时不要手动写 app.Resources["GlobalThemeBg"] = new SolidColorBrush(...)。GlobalThemeBg 定义在 ThemeDictionaries 中，手动覆盖会破坏主题变体机制。正确做法是只设置 RequestedThemeVariant ，ThemeDictionaries 中的 DynamicResource 会自动跟随切换。

csharp 复制代码

using System.ComponentModel;
using System.Runtime.CompilerServices;
using Avalonia;
using Avalonia.Styling;

namespace AvaloniaStyleDemo.ViewModels;

/// <summary>
/// 主视图模型：管理按钮专属样式开关与全局浅/深主题切换。
/// 主题切换通过 Application.Current.RequestedThemeVariant 完成，
/// ThemeDictionaries 中的 DynamicResource 资源会自动跟随更新。
/// </summary>
public class MainViewModel : INotifyPropertyChanged
{
    private bool _isSpecialStyleEnabled;
    private bool _isDarkThemeEnabled;

    /// <summary>按钮专属样式（specialButton）是否启用</summary>
    public bool IsSpecialStyleEnabled
    {
        get => _isSpecialStyleEnabled;
        set
        {
            _isSpecialStyleEnabled = value;
            OnPropertyChanged();
        }
    }

    /// <summary>全局深色主题是否启用</summary>
    public bool IsDarkThemeEnabled
    {
        get => _isDarkThemeEnabled;
        set
        {
            _isDarkThemeEnabled = value;
            OnPropertyChanged();
            UpdateGlobalTheme();
        }
    }

    public RelayCommand ToggleButtonStyleCommand { get; }
    public RelayCommand ToggleThemeCommand { get; }

    public MainViewModel()
    {
        ToggleButtonStyleCommand = new RelayCommand(ToggleButtonStyle);
        ToggleThemeCommand = new RelayCommand(ToggleTheme);
    }

    private void ToggleButtonStyle()
        => IsSpecialStyleEnabled = !IsSpecialStyleEnabled;

    private void ToggleTheme()
        => IsDarkThemeEnabled = !IsDarkThemeEnabled;

    /// <summary>
    /// 切换全局主题变体。
    /// 只需设置 RequestedThemeVariant，ThemeDictionaries 中的资源会自动切换，
    /// 无需手动覆盖 app.Resources 中的画刷（那样反而会破坏 ThemeDictionaries 机制）。
    /// </summary>
    private void UpdateGlobalTheme()
    {
        if (Application.Current is { } app)
        {
            app.RequestedThemeVariant = _isDarkThemeEnabled
                ? ThemeVariant.Dark
                : ThemeVariant.Light;
        }
    }

    public event PropertyChangedEventHandler? PropertyChanged;

    protected void OnPropertyChanged([CallerMemberName] string? propertyName = null)
        => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

4.3 转换器实现：BoolToContentConverter

Avalonia 的 IValueConverter 在 Avalonia.Data.Converters 命名空间下，参数均为可空 object?。

csharp 复制代码

using System;
using System.Globalization;
using Avalonia.Data.Converters;

namespace AvaloniaStyleDemo.Converters;

/// <summary>
/// 布尔值转按钮文本转换器（Avalonia 版本）。
/// 通过 ConverterParameter="Theme" 区分主题切换按钮与样式切换按钮。
/// </summary>
public class BoolToContentConverter : IValueConverter
{
    public static readonly BoolToContentConverter Instance = new();

    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
    {
        if (value is not bool boolValue)
            return "点击切换";

        if (parameter?.ToString() == "Theme")
        {
            return boolValue
                ? "已切换深色主题（点击恢复浅色）"
                : "点击切换深色主题";
        }

        return boolValue
            ? "已切换专属样式（点击恢复默认）"
            : "点击切换专属样式";
    }

    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
        => throw new NotImplementedException();
}

4.4 子页面实现

（1）全局主题切换页面：ThemeSwitchPage.axaml

点击按钮切换 RequestedThemeVariant，窗口背景、卡片背景、文本颜色以及按钮本身的样式都会同步变化。

xml 复制代码

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:vm="using:AvaloniaStyleDemo.ViewModels"
             x:Class="AvaloniaStyleDemo.Views.SubPages.ThemeSwitchPage">
    <Design.DataContext>
        <vm:MainViewModel />
    </Design.DataContext>

    <Grid DataContext="{StaticResource MainVM}"
          Background="{DynamicResource GlobalThemeBg}">
        <Border Padding="30"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                BoxShadow="0 4 12 0 #30000000"
                CornerRadius="10"
                Background="{DynamicResource GlobalCardBg}">
            <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Spacing="16">
                <TextBlock Text="全局主题切换演示"
                           FontSize="18"
                           FontWeight="SemiBold"
                           Foreground="{DynamicResource GlobalTextColor}"
                           HorizontalAlignment="Center" />
                <TextBlock Text="通过 RequestedThemeVariant + ThemeDictionaries 实现浅/深色自动切换，背景与按钮样式同步变化"
                           FontSize="12"
                           Foreground="{DynamicResource GlobalTextColor}"
                           Opacity="0.7"
                           TextWrapping="Wrap"
                           MaxWidth="300"
                           HorizontalAlignment="Center" />

                <!-- 按钮本身也跟随主题在 lightButton / darkButton 之间切换 -->
                <Button Command="{Binding ToggleThemeCommand}"
                        MinWidth="260"
                        Height="42"
                        Classes.lightButton="{Binding !IsDarkThemeEnabled}"
                        Classes.darkButton="{Binding IsDarkThemeEnabled}">
                    <Button.Content>
                        <Binding Path="IsDarkThemeEnabled"
                                 Converter="{StaticResource BoolToContentConverter}"
                                 ConverterParameter="Theme" />
                    </Button.Content>
                </Button>
            </StackPanel>
        </Border>
    </Grid>
</UserControl>

⚠️ 关键差异：

Avalonia 没有 DataTrigger！状态切换通过绑定到 Classes 属性 或直接使用 ThemeVariant 系统实现

阴影效果使用 Border.BoxShadow（CSS 风格语法），替代 WPF 的 DropShadowEffect

CornerRadius 是 Avalonia 控件直接支持的属性，无需在模板中设置

Classes.lightButton="{Binding !IsDarkThemeEnabled}" 是 Avalonia 特有的类绑定语法 ，! 前缀表示取反

（2）MVVM 按钮专属样式切换页面：StyleToggleMVVMPage.axaml

通过 Classes 属性绑定，在默认 lightButton 样式和页面级 specialButton 样式之间切换。

xml 复制代码

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:vm="using:AvaloniaStyleDemo.ViewModels"
             x:Class="AvaloniaStyleDemo.Views.SubPages.StyleToggleMVVMPage">
    <Design.DataContext>
        <vm:MainViewModel />
    </Design.DataContext>

    <Grid DataContext="{StaticResource MainVM}"
          Background="{DynamicResource GlobalThemeBg}">
        <Border Padding="30"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                BoxShadow="0 4 12 0 #30000000"
                CornerRadius="10"
                Background="{DynamicResource GlobalCardBg}">
            <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Spacing="16">
                <TextBlock Text="MVVM 按钮专属样式切换"
                           FontSize="18"
                           FontWeight="SemiBold"
                           Foreground="{DynamicResource GlobalTextColor}"
                           HorizontalAlignment="Center" />
                <TextBlock Text="通过 Classes 属性绑定动态切换样式类，替代 WPF 的 DataTrigger"
                           FontSize="12"
                           Foreground="{DynamicResource GlobalTextColor}"
                           Opacity="0.7"
                           TextWrapping="Wrap"
                           MaxWidth="300"
                           HorizontalAlignment="Center" />

                <!--
                  核心：Classes.className="{Binding BoolProperty}" 是 Avalonia 特有的类绑定语法。
                  ! 前缀表示取反。两个类互斥，实现默认样式与专属样式之间的切换。
                -->
                <Button Command="{Binding ToggleButtonStyleCommand}"
                        MinWidth="240"
                        Height="42"
                        Classes.lightButton="{Binding !IsSpecialStyleEnabled}"
                        Classes.specialButton="{Binding IsSpecialStyleEnabled}">
                    <Button.Content>
                        <Binding Path="IsSpecialStyleEnabled"
                                 Converter="{StaticResource BoolToContentConverter}" />
                    </Button.Content>
                </Button>
            </StackPanel>
        </Border>
    </Grid>

    <!-- 页面级专属样式：specialButton，仅在本页面内生效 -->
    <UserControl.Styles>
        <Style Selector="Button.specialButton">
            <Setter Property="Background" Value="{StaticResource BaseButtonBg}" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="MinWidth" Value="100" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="CornerRadius" Value="21" />
            <Setter Property="FontWeight" Value="Bold" />
            <Setter Property="Padding" Value="16,8" />
            <Style Selector="^:pointerover">
                <Setter Property="Background" Value="#FF5C95" />
            </Style>
            <Style Selector="^:pressed">
                <Setter Property="Background" Value="#E63970" />
            </Style>
        </Style>
    </UserControl.Styles>
</UserControl>

⚠️ 注意：BoxShadow 是 Border 的属性，不是 Button 的属性。在 Button 的 Style Setter 中设置 BoxShadow 会编译报错。如果需要按钮阴影，可以将 Button 放在 Border 内，或自定义控件模板。

（3）文本框主题预览页面：ThemePreviewTextBoxPage.axaml

切换全局主题后，文本框通过 Classes 绑定自动在 lightTextBox / darkTextBox 之间切换。

xml 复制代码

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:vm="using:AvaloniaStyleDemo.ViewModels"
             x:Class="AvaloniaStyleDemo.Views.SubPages.ThemePreviewTextBoxPage">
    <Design.DataContext>
        <vm:MainViewModel />
    </Design.DataContext>

    <Grid DataContext="{StaticResource MainVM}"
          Background="{DynamicResource GlobalThemeBg}">
        <Border Padding="30"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                BoxShadow="0 4 12 0 #30000000"
                CornerRadius="10"
                Background="{DynamicResource GlobalCardBg}">
            <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Spacing="16">
                <TextBlock Text="文本框主题适配预览"
                           FontSize="18"
                           FontWeight="SemiBold"
                           Foreground="{DynamicResource GlobalTextColor}"
                           HorizontalAlignment="Center" />
                <TextBlock Text="在「全局主题切换」页切换主题后，返回本页可看到文本框样式通过 Classes 绑定自动跟随"
                           FontSize="12"
                           Foreground="{DynamicResource GlobalTextColor}"
                           Opacity="0.7"
                           TextWrapping="Wrap"
                           MaxWidth="300"
                           HorizontalAlignment="Center" />

                <TextBox Text="Avalonia 主题预览文本框（跟随全局主题）"
                         MinWidth="280"
                         Height="42"
                         Classes.lightTextBox="{Binding !IsDarkThemeEnabled}"
                         Classes.darkTextBox="{Binding IsDarkThemeEnabled}" />

                <TextBox Watermark="请输入内容..."
                         MinWidth="280"
                         Height="42"
                         Classes.lightTextBox="{Binding !IsDarkThemeEnabled}"
                         Classes.darkTextBox="{Binding IsDarkThemeEnabled}" />
            </StackPanel>
        </Border>
    </Grid>
</UserControl>

五、传统方案：后台代码（CodeBehind）样式切换

如果不使用 MVVM，也可以在后台代码中通过 button.Classes.Set() 动态切换样式类。

xml 复制代码

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="AvaloniaStyleDemo.Views.SubPages.CodeBehindStyleTogglePage">
    <Grid Background="{DynamicResource GlobalThemeBg}">
        <Border Padding="30"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                BoxShadow="0 4 12 0 #30000000"
                CornerRadius="10"
                Background="{DynamicResource GlobalCardBg}">
            <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Spacing="16">
                <TextBlock Text="后台代码（CodeBehind）样式切换"
                           FontSize="18"
                           FontWeight="SemiBold"
                           Foreground="{DynamicResource GlobalTextColor}"
                           HorizontalAlignment="Center" />
                <TextBlock Text="通过 button.Classes.Set(className, true/false) 在代码中动态添加/移除样式类"
                           FontSize="12"
                           Foreground="{DynamicResource GlobalTextColor}"
                           Opacity="0.7"
                           TextWrapping="Wrap"
                           MaxWidth="300"
                           HorizontalAlignment="Center" />

                <Button x:Name="CodeToggleButton"
                        Content="后台代码切换样式（点击触发）"
                        MinWidth="260"
                        Height="42"
                        Classes="lightButton"
                        Click="CodeToggleButton_Click" />
            </StackPanel>
        </Border>
    </Grid>
</UserControl>

csharp 复制代码

using Avalonia.Controls;
using Avalonia.Interactivity;

namespace AvaloniaStyleDemo.Views.SubPages;

public partial class CodeBehindStyleTogglePage : UserControl
{
    private bool _isCustomStyleEnabled;

    public CodeBehindStyleTogglePage()
    {
        InitializeComponent();
    }

    private void CodeToggleButton_Click(object? sender, RoutedEventArgs e)
    {
        _isCustomStyleEnabled = !_isCustomStyleEnabled;

        if (sender is Button button)
        {
            if (_isCustomStyleEnabled)
            {
                // Avalonia 中通过 Classes.Set 动态切换样式类，替代 WPF 的 Style 赋值
                button.Classes.Set("lightButton", false);
                button.Classes.Set("darkButton", true);
                button.Content = "已切换自定义样式（点击恢复默认）";
            }
            else
            {
                button.Classes.Set("darkButton", false);
                button.Classes.Set("lightButton", true);
                button.Content = "后台代码切换样式（点击触发）";
            }
        }
    }
}

⚠️ Avalonia 后台代码样式切换：

使用 button.Classes.Set("className", true/false) 来动态添加/移除样式类

替代 WPF 的 button.Style = FindResource("Key") as Style

Classes 本质上是一个字符串集合，Set 方法会在添加和移除之间自动处理

六、关键知识点：Avalonia 样式优先级全解析

Avalonia 的样式优先级与 WPF 有本质不同。Avalonia 使用 BindingPriority 枚举来定义优先级，数值越小优先级越高：

优先级	值	样式类型	说明
最高	-1	`Animation`	动画值，甚至覆盖本地值
1	0	`LocalValue`	控件上直接设置的本地值（如 `<Button Background="Red"/>`）
2	1	`StyleTrigger`	样式触发器（伪类选择器激活时，如 `:pointerover`）
3	2	`Template`	控件模板中设置的值
4	3	`Style`	普通样式 Setter
最低	int.MaxValue	`Unset`	未设置

核心结论 ：本地值（LocalValue）优先级高于样式触发器和普通样式。这意味着如果你在控件上直接写了 Background="Red"，那么即使 Style 中定义了 :pointerover 改变 Background，悬停时也不会生效------因为本地值覆盖了样式值。要让伪类样式生效，不要在控件上直接设置该属性。

七、Avalonia vs WPF 核心差异总结

特性	WPF	Avalonia
文件扩展名	`.xaml`	`.axaml`
XAML 命名空间	`schemas.microsoft.com/winfx/...`	`github.com/avaloniaui`
样式存放	`Resources` 集合	`Styles` 集合
样式引用	`Style="{StaticResource Key}"`	`Classes="className"`
样式继承	`BasedOn="{StaticResource ...}"`	❌ 不支持，用 `Classes` 组合叠加
状态触发	`Trigger` / `DataTrigger`	`:pointerover` / `:pressed` / `:focus` 伪类
主题切换	手动替换资源字典	`RequestedThemeVariant` + `ThemeDictionaries`
圆角	模板内设置	控件直接 `CornerRadius` 属性
阴影	`DropShadowEffect`	`BoxShadow`（CSS 语法，Border 专属）
导航框架	`Frame` + `Page`	`ContentControl` / `TabControl` + `UserControl`
设计时上下文	`d:DataContext`	`Design.DataContext`
ICommand 自动刷新	`CommandManager.RequerySuggested`	❌ 不存在，手动触发事件

八、实战避坑提醒

1. 避免 WPF 思维定势：没有 BasedOn

Avalonia 不支持 BasedOn 样式继承。不要试图用 WPF 的方式继承样式，改用 Classes 组合------一个控件可以同时拥有多个样式类（Classes="lightButton bold large"），这是 WPF 做不到的。

2. 伪类选择器要配合模板选择器

修改 Button 等控件的悬停背景时，简单的 :pointerover 可能不生效，因为 FluentTheme 的控件模板内部有自己的背景处理。需要 targeting 模板内部元素：

axaml 复制代码

<Style Selector="Button:pointerover /template/ ContentPresenter">
    <Setter Property="Background" Value="Red" />
</Style>

本项目中我们通过自定义 Classes 样式 + 直接设置 Background 的方式规避了这个问题（自定义样式类的 Setter 会覆盖模板默认值）。

3. 主题变体资源必须使用 DynamicResource

ThemeDictionaries 中定义的资源（如 GlobalThemeBg）必须通过 {DynamicResource} 引用。StaticResource 在编译时解析，无法找到 ThemeDictionaries 中的资源，运行时会报资源找不到。

4. 不要手动覆盖 ThemeDictionaries 中的资源

切换主题时只需设置 RequestedThemeVariant，不要写 app.Resources["GlobalThemeBg"] = new SolidColorBrush(...)。手动覆盖会在资源字典中插入一个本地值，其优先级高于 ThemeDictionaries，导致主题变体机制失效。

5. RelayCommand 不要用 CommandManager

Avalonia 中没有 System.Windows.Input.CommandManager。照搬 WPF 的 CanExecuteChanged 实现会编译失败。使用标准 CLR 事件，在需要时手动调用 RaiseCanExecuteChanged()。

6. BoxShadow 是 Border 的属性

BoxShadow 不是所有控件都有的属性，它是 Border 的专属属性。在 Button、TextBox 等控件的 Style 中设置 BoxShadow 会编译报错。需要按钮阴影时，将按钮放在 Border 内，或自定义控件模板。

7. 使用 ThemeVariantScope 实现局部主题

Avalonia 支持在 UI 树的不同分支使用不同主题变体。通过 ThemeVariantScope.RequestedThemeVariant 可以让某个子区域使用与全局不同的主题。

九、Avalonia 特有优势总结

跨平台一致性：一套代码运行在 Windows、macOS、Linux、Android、iOS 和 WebAssembly。
ThemeDictionaries 原生支持：内置 Light/Dark 主题变体系统，无需手动管理资源字典切换。
CSS 风格选择器 ：类选择器、伪类、嵌套选择器（^），熟悉前端开发的开发者可以快速上手。
Classes 多类组合 ：一个控件可同时应用多个样式类，实现比 WPF BasedOn 更灵活的样式复用。
现代化设计：内置 FluentTheme 和 SimpleTheme，支持密度调整和调色板自定义。
性能优化：XAML 编译（Avalonia XAML Compiler）在编译时将 XAML 转为 IL，运行时无需解析 XAML，启动更快。

十、项目运行方式

bash 复制代码

cd AvaloniaStyleDemo
dotnet restore
dotnet run

需要 .NET 8 SDK。项目已在 Windows 上编译验证通过（0 警告 0 错误），可直接运行。

运行后会看到一个包含四个 Tab 的窗口：

MVVM 样式切换（按钮专属）：点击按钮在默认绿色圆角样式和粉色胶囊样式之间切换
全局主题切换（浅/深）：点击按钮切换全局浅/深色主题，窗口背景、卡片、文字、按钮同步变色
文本框主题预览（跟随全局）：展示两个文本框，切换全局主题后样式自动跟随
后台代码切换样式（传统方式）：通过事件处理代码在浅/深按钮样式间切换

👋 关注我！持续分享 C# 实战技巧、代码示例 & 工具网站 & 技术干货