avalonia 前后端绑定

### 实现Avalonia UI框架中的前后端数据绑定

在Avalonia中，实现前后端的数据绑定主要依赖于`DataContext`和MVVM架构模式。通过设置视图的`DataContext`为相应的ViewModel实例，并利用XAML定义绑定表达式来连接UI控件与业务逻辑层。

#### 创建ViewModel类并继承INotifyPropertyChanged接口
为了使界面能够响应数据的变化，ViewModel应当实现`INotifyPropertyChanged`接口以便通知UI更新。下面是一个简单的ViewModel示例：

using System.ComponentModel;
using Avalonia.Collections;

public class MainViewModel : INotifyPropertyChanged
{
    private string _message = "Hello from ViewModel!";
    
    public event PropertyChangedEventHandler? PropertyChanged;

    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    public string Message 
    { 
        get => _message;  
        set 
        { 
            if (_message != value) 
            { 
                _message = value; 
                OnPropertyChanged(nameof(Message)); 
            }
        } 
    }
}

此段代码展示了如何创建一个具有可变属性Message的ViewModel[^1]。

#### 设置窗口或用户控件的DataContext
为了让View知道它应该显示哪个ViewModel的数据，可以在构造函数里指定DataContext:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        DataContext = new MainViewModel(); // 将MainWindow的DataContext设为MainViewModel实例
    }
}

这段C#代码片段说明了怎样在一个窗体加载时为其分配特定的ViewModel作为其上下文环境。

#### 使用XAML进行数据绑定
接下来，在对应的AXAML文件内声明要展示的内容以及它们是如何关联到ViewModel上的各个字段上去的。例如：

<Window xmlns="https://github.com/avaloniaui"
        Title="Data Binding Example">
  <StackPanel>
      <!-- 绑定TextBox的Text属性至ViewModel中的Message -->
      <TextBox Text="{Binding Path=Message}" />
      
      <!-- 显示当前Message值 -->
      <TextBlock Text="{Binding Path=Message}"/>
  </StackPanel>
</Window>

上述XML配置实现了两个功能：一是让用户输入的信息可以实时反映给Model；二是将Model里的最新状态呈现出来供查看。

对于设计时预览的需求，可以通过添加`Design.DataContext`标签来指明IDE应使用的虚拟数据源，而不会影响实际运行期间的行为[^2]:

<!-- Design-time data context setup -->
<Design.DataContext>
    <local:MainViewModel/>
</Design.DataContext>

<!-- Runtime content... -->

这样做的好处是在开发阶段就能直观看到布局效果而不必启动整个应用程序。