Avalonia：使用附加属性实现命令与事件的绑定

在学习 Avalonia 框架并实践 ReactiveUI 响应式编程时，常会遇到 "将 ViewModel 中的命令绑定到控件事件" 的需求。常规方案需借助特定 NuGet 包，而通过附加属性实现这一功能，不仅更贴合 Avalonia 的设计理念，还能灵活扩展控件行为。本文将详细介绍两种实现方式（包引用法与附加属性法），并附上完整可运行的代码示例，帮助开发者快速掌握这一实用技巧。

一、常规方案：通过 NuGet 包绑定命令与事件

若需快速实现 "事件触发命令"，可直接安装 Avalonia 生态中成熟的交互行为包，无需手动编写复杂逻辑。

1. 安装依赖包

在项目中安装以下任意一个 NuGet 包（二者功能等效，任选其一即可）：

• 命令行安装：Install-Package Xaml.Behaviors
• 命令行安装：Install-Package Xaml.Behaviors.Interactions

2. XAML 中配置事件与命令绑定

以控件的 Loaded 事件（控件加载完成时触发）为例，通过 <Interaction.Behaviors> 标签配置事件触发器，将其与 ViewModel 中的 InitCommand 命令绑定：

<Interaction.Behaviors>
    <!-- 监听 Loaded 事件 -->
    <EventTriggerBehavior EventName="Loaded">
        <!-- 事件触发时执行 InitCommand 命令 -->
        <InvokeCommandAction Command="{Binding InitCommand}"/>
    </EventTriggerBehavior>
</Interaction.Behaviors>

注意：目前部分 AI 工具（如 DeepSeek、豆包、腾讯元宝）可能会推荐已过时或废弃的旧版包，上述两种包是当前 Avalonia 开发中的最新选择，兼容性与稳定性更优。

二、进阶方案：通过附加属性自定义绑定逻辑

若需更灵活地控制事件与命令的交互（如添加自定义参数、条件判断等），可通过附加属性手动实现绑定逻辑。以下以 "控件加载完成后执行 ViewModel 初始化命令" 为例，完整演示实现流程。

1. 创建附加属性类

在项目中新建 Behaviors 文件夹，在该文件夹下创建 LoadedBehavior.cs 类（需继承 AvaloniaObject，这是 Avalonia 中定义附加属性的基础），代码如下：

using Avalonia;
using Avalonia.Controls;
using Avalonia.Data;
using Avalonia.Interactivity;
using System.Windows.Input;

namespace AttachedPropertyDemo.Behaviors
{
    public class LoadedBehavior : AvaloniaObject
    {
        // 静态构造函数：注册附加属性变化的类处理器
        static LoadedBehavior()
        {
            ExecuteCommandOnLoadedProperty.Changed.AddClassHandler<Interactive>(OnExecuteCommandOnLoadedChanged);
        }

        /// <summary>
        /// 注册附加属性：用于绑定"加载完成后执行的命令"
        /// 泛型参数说明：<当前类, 目标控件类型, 属性值类型>
        /// </summary>
        public static readonly AttachedProperty<ICommand> ExecuteCommandOnLoadedProperty =
            AvaloniaProperty.RegisterAttached<LoadedBehavior, Interactive, ICommand>(
                name: "ExecuteCommandOnLoaded",  // 附加属性名称
                defaultValue: default,            // 默认值（空命令）
                defaultBindingMode: BindingMode.OneTime  // 绑定模式：仅绑定一次
            );

        // 获取附加属性值的静态方法（命名规范：Get + 属性名）
        public static ICommand? GetExecuteCommandOnLoaded(AvaloniaObject element) 
            => element.GetValue(ExecuteCommandOnLoadedProperty);

        // 设置附加属性值的静态方法（命名规范：Set + 属性名）
        public static void SetExecuteCommandOnLoaded(AvaloniaObject element, ICommand value)
        {
            element.SetValue(ExecuteCommandOnLoadedProperty!, value);
        }

        /// <summary>
        /// 附加属性值变化时的回调方法
        /// </summary>
        private static void OnExecuteCommandOnLoadedChanged(Interactive element, AvaloniaPropertyChangedEventArgs e)
        {
            // 若新值是有效的命令，为控件添加 Loaded 事件监听；否则移除监听
            if (e.NewValue is ICommand command)
            {
                element.AddHandler(Control.LoadedEvent, Handler);
            }
            else
            {
                element.RemoveHandler(Control.LoadedEvent, Handler);
            }
        }

        /// <summary>
        /// Loaded 事件的具体处理逻辑
        /// </summary>
        private static void Handler(object? sender, RoutedEventArgs e)
        {
            if (sender is Interactive element)
            {
                // 获取绑定的命令
                ICommand command = element.GetValue(ExecuteCommandOnLoadedProperty);
                // 若命令可执行，触发命令
                if (command?.CanExecute(null) == true)
                {
                    command.Execute(null);
                }
            }
        }
    }
}

说明：上述代码完全遵循 Avalonia 官方附加属性设计规范，通过 RegisterAttached 注册属性、AddClassHandler 监听属性变化，确保逻辑严谨且可复用。

2. 编写 ViewModel 逻辑（结合 ReactiveUI）

为简化响应式编程代码，需先安装 ReactiveUI.SourceGenerators 包（源代码生成器，自动生成 INotifyPropertyChanged 等样板代码）。ViewModel 核心逻辑为：反射 Avalonia.Media 命名空间下的所有颜色，存入集合供 View 展示。创建 ViewModels/ColorsViewModel.cs：

using Avalonia.Media;
using ReactiveUI;
using ReactiveUI.SourceGenerators;
using System.Collections.ObjectModel;
using System.Linq;
using System.Reflection;

namespace AttachedPropertyDemo.ViewModels
{
    public partial class ColorsViewModel : ViewModelBase
    {
        // 响应式属性：当前选中的颜色名称（自动实现属性变化通知）
        [Reactive]
        private string? _colorName;

        // 响应式属性：当前选中的颜色（自动实现属性变化通知）
        [Reactive]
        private Color? _color;

        // 颜色集合（供 View 中的 ItemsControl 绑定）
        public ObservableCollection<ColorsViewModel> Colors { get; } = [];

        // 构造函数
        public ColorsViewModel()
        {
        }

        /// <summary>
        /// 初始化命令（由 ReactiveUI 自动生成 ICommand 实现）
        /// </summary>
        [ReactiveCommand]
        private void Init()
        {
            // 反射获取 Colors 类中所有公开静态的 Color 类型属性
            var colorProperties = typeof(Colors).GetProperties(
                BindingFlags.Public | BindingFlags.Static)
                .Where(p => p.PropertyType == typeof(Color));

            // 遍历属性，将颜色信息存入集合
            foreach (var property in colorProperties)
            {
                if (property.GetValue(null) is Color color)
                {
                    Colors.Add(new ColorsViewModel
                    {
                        Color = color,
                        ColorName = property.Name
                    });
                }
            }
        }
    }
}

创建 ViewModels/MainWindowViewModel.cs（主窗口 ViewModel，用于管理页面切换）：

using ReactiveUI.SourceGenerators;

namespace AttachedPropertyDemo.ViewModels
{
    public partial class MainWindowViewModel : ViewModelBase
    {
        // 响应式属性：当前显示的页面（ViewModel 实例）
        [Reactive]
        private ViewModelBase? _currentPage;

        // 构造函数：初始化时加载 ColorsViewModel 页面
        public MainWindowViewModel()
        {
            CurrentPage = new ColorsViewModel();
        }
    }
}

3. 编写 View 代码（XAML 布局与绑定）

View 需完成两项核心工作：引用命名空间、绑定附加属性与 ViewModel 命令，同时注意修复默认生成代码中的命名空间问题（确保 ViewLocator 能正常匹配 View 与 ViewModel）。

（1）颜色展示页面：Views/ColorsView.axaml

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:vm="using:AttachedPropertyDemo.ViewModels"  <!-- 引用 ViewModel 命名空间 -->
             xmlns:b="using:AttachedPropertyDemo.Behaviors"   <!-- 引用附加属性命名空间 -->
             mc:Ignorable="d" 
             d:DesignWidth="800" 
             d:DesignHeight="450"
             x:Class="AttachedPropertyDemo.Views.ColorsView"  <!-- 手动修正：默认生成无 Views 目录，需添加 -->
             x:DataType="vm:ColorsViewModel">  <!-- 指定数据上下文类型，增强编译时校验 -->
    
    <!-- 为 Grid 附加属性：加载完成后执行 Init 命令 -->
    <Grid RowDefinitions="Auto,*" b:LoadedBehavior.ExecuteCommandOnLoaded="{Binding InitCommand}">
        <!-- 显示颜色总数 -->
        <TextBlock Text="{Binding Colors.Count, StringFormat='Avalonia.Media Colors: {0}'}"/>
        
        <!-- 滚动容器：展示所有颜色 -->
        <ScrollViewer Grid.Row="1">
            <ItemsControl ItemsSource="{Binding Colors}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" Spacing="10" Margin="5">
                            <!-- 颜色块：绑定 Color 属性 -->
                            <Rectangle Width="600" Height="30">
                                <Rectangle.Fill>
                                    <SolidColorBrush Color="{Binding Color}"/>
                                </Rectangle.Fill>
                            </Rectangle>
                            <!-- 颜色名称：绑定 ColorName 属性 -->
                            <TextBlock Text="{Binding ColorName}"/>
                        </StackPanel>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ScrollViewer>
    </Grid>
</UserControl>

关键提醒：默认生成的 x:Class 为 AttachedPropertyDemo.ColorsView，需手动改为 AttachedPropertyDemo.Views.ColorsView（添加 Views 目录），否则 ViewLocator 无法自动关联 View 与对应的 ViewModel。

（2）主窗口：Views/MainWindow.axaml

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:AttachedPropertyDemo.ViewModels"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" 
        d:DesignWidth="1024" 
        d:DesignHeight="560"
        Width="1024" 
        Height="560"
        x:Class="AttachedPropertyDemo.Views.MainWindow"
        x:DataType="vm:MainWindowViewModel"
        Icon="/Assets/avalonia-logo.ico"
        Title="AttachedPropertyDemo">

    <!-- 设计时数据上下文（仅用于 IDE 预览） -->
    <Design.DataContext>
        <vm:MainWindowViewModel/>
    </Design.DataContext>

    <Grid RowDefinitions="Auto,*">
        <!-- 顶部标题栏 -->
        <Border Grid.Row="0" Height="100" Background="{DynamicResource PrimaryGradient}">
            <TextBlock Text="通过附加属性执行命令" Classes="head"/>
        </Border>
        
        <!-- 页面容器：动态加载当前页面（绑定 CurrentPage 属性） -->
        <TransitioningContentControl Grid.Row="1" Content="{Binding CurrentPage}"/>
    </Grid>
</Window>

4. 配置应用样式与全局资源

在 App.axaml 中定义全局样式、资源与 ViewLocator（用于自动匹配 View 与 ViewModel）：

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="AttachedPropertyDemo.App"
             xmlns:local="using:AttachedPropertyDemo"
             RequestedThemeVariant="Default">  <!-- 跟随系统主题（支持 Light/Dark） -->

    <!-- 配置 ViewLocator：自动根据 ViewModel 找到对应的 View -->
    <Application.DataTemplates>
        <local:ViewLocator/>
    </Application.DataTemplates>

    <!-- 全局资源（颜色、渐变等） -->
    <Application.Resources>
        <SolidColorBrush x:Key="PrimaryBackground">#14172D</SolidColorBrush>
        <SolidColorBrush x:Key="PrimaryForeground">#cfcfcf</SolidColorBrush>
        <LinearGradientBrush x:Key="PrimaryGradient" StartPoint="0%,0%" EndPoint="0%,100%">
            <GradientStop Offset="0" Color="#111214"/>
            <GradientStop Offset="1" Color="#151E3E"/>
        </LinearGradientBrush>
    </Application.Resources>

    <!-- 全局样式 -->
    <Application.Styles>
        <!-- 引用 Avalonia 内置 Fluent 主题 -->
        <FluentTheme/>

        <!-- Grid 控件默认背景 -->
        <Style Selector="Grid">
            <Setter Property="Background" Value="{DynamicResource PrimaryBackground}"/>
        </Style>

        <!-- TextBlock 控件默认前景色 -->
        <Style Selector="TextBlock">
            <Setter Property="Foreground" Value="{DynamicResource PrimaryForeground}"/>
        </Style>

        <!-- 标题文本样式（head 类） -->
        <Style Selector="TextBlock.head">
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="FontSize" Value="30"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
        </Style>

        <!-- 所有 TextBlock 垂直居中 + 边距 -->
        <Style Selector=":is(TextBlock)">
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Margin" Value="5"/>
        </Style>
    </Application.Styles>
</Application>

三、运行效果

启动项目后，主窗口将展示以下内容：

1. 顶部标题栏显示 "通过附加属性执行命令"；
2. 下方区域自动加载 Avalonia.Media 命名空间中的所有颜色（共 141 种）；
3. 每种颜色以 "色块 + 名称" 的形式横向排列，支持滚动查看（如 AliceBlue、AntiqueWhite、Aqua 等）。

四、关键注意事项

1. 命名空间引用 ：在 XAML 中必须正确引用 ViewModel（vm 前缀）与附加属性（b 前缀）的命名空间，否则会出现编译错误；
2. ViewLocator 匹配规则 ：确保 View 位于 Views 目录、ViewModel 位于 ViewModels 目录，且类名遵循 "View 对应 ViewModel"（如 ColorsView 对应 ColorsViewModel）；
3. 附加属性命名规范 ：静态方法 GetXXX/SetXXX 必须与附加属性名称一致，否则 Avalonia 无法正确识别属性；
4. ReactiveUI 包依赖 ：[Reactive] 和 [ReactiveCommand] 特性需依赖 ReactiveUI.SourceGenerators 包，安装后需重新生成项目以触发代码生成。

通过附加属性绑定命令与事件，不仅摆脱了对第三方包的依赖，还能根据业务需求灵活扩展逻辑（如添加命令参数、条件过滤等）。希望本文的代码与说明能帮助开发者更深入地理解 Avalonia 的核心特性！