Avalonia UserControl 如何实现数据绑定

### 创建带有数据绑定的Avalonia UserControl

为了实现在 Avalonia 中 `UserControl` 的数据绑定，可以遵循以下模式。此过程涉及创建视图模型 (ViewModel)，并将其与用户控件关联起来。

#### 定义视图模型类
首先，在项目中定义一个视图模型类用于存储要显示的数据属性以及任何命令逻辑。这里假设有一个名为 `MyUserControlViewModel.cs` 文件：

using ReactiveUI;

public class MyUserControlViewModel : ViewModelBase
{
    private string _message;
    
    public string Message
    {
        get => _message;
        set => this.RaiseAndSetIfChanged(ref _message, value);
    }
}

这段代码展示了如何通过继承 `ViewModelBase` 来构建响应式的视图模型，并利用 `RaiseAndSetIfChanged()` 方法通知 UI 更新[^1]。

#### 构建 UserContol 并设置 DataContext
接着是在 XAML 和 C# 后端文件里配置 `UserControl` 。下面是一个简化版的例子，其中包含了基本布局和初始化部分：

**XAML 部分**

<UserControl xmlns="https://github.com/avaloniaui"
             x:Class="YourNamespace.MyUserControl">
  <StackPanel>
      <!-- 绑定到Message 属性 -->
      <TextBlock Text="{Binding Message}" />
  </StackPanel>
</UserControl>

**Code-Behind 部分**

using Avalonia.Controls;
using YourNamespace.ViewModels;

namespace YourNamespace.Views
{
    public partial class MyUserControl : UserControl
    {
        public MyUserControl()
        {
            InitializeComponent();
            
            // 设置DataContext为新的视图模型实例
            DataContext = new MyUserControlViewModel { Message = "Hello from VM!" };
        }

        private void InitializeComponent()
        {
            AvaloniaXamlLoader.Load(this);
        }
    }
}

上述代码片段说明了怎样在一个新创建的 `UserControl` 类型对象内指定其 `DataContext` ，从而允许子元素访问该上下文中定义的数据源[^3]。

当运行应用程序时，文本框将会显示出由视图模型提供的消息字符串 `"Hello from VM!"`。