如何用Axaml数据绑定实现TreeView与TextBox双向同步？

核心思路 #

通过Avalonia的XAML数据绑定标记，直接关联TreeView的选中项和TextBox的文本，结合MVVM模式实现双向同步，完全替代后台事件处理代码。

1. XAML标记实现（MainApplicationWindow.axaml） #

直接在XAML中完成绑定配置，不需要后台事件逻辑：

<!-- TreeView绑定数据源与选中项 -->
<TreeView ItemsSource="{Binding TreeItems}"
          SelectedItem="{Binding SelectedTreeItem, Mode=TwoWay}">
    <!-- 自定义节点模板，根据你的数据结构调整 -->
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding Children}">
            <TextBlock Text="{Binding Name}" />
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

<!-- TextBox双向绑定选中节点的Name属性 -->
<TextBox Text="{Binding SelectedTreeItem.Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />

2. ViewModel与数据类准备 #

要让绑定生效，ViewModel和节点数据类需要实现属性变更通知（推荐使用Avalonia自带的ReactiveObject简化代码）：

// 主窗口ViewModel
public class MainWindowViewModel : ReactiveObject
{
    // TreeView的数据源集合
    private ObservableCollection<TreeItem> _treeItems;
    public ObservableCollection<TreeItem> TreeItems
    {
        get => _treeItems;
        set => this.RaiseAndSetIfChanged(ref _treeItems, value);
    }

    // 绑定TreeView选中项的属性
    private TreeItem _selectedTreeItem;
    public TreeItem SelectedTreeItem
    {
        get => _selectedTreeItem;
        set => this.RaiseAndSetIfChanged(ref _selectedTreeItem, value);
    }

    // 初始化测试数据
    public MainWindowViewModel()
    {
        TreeItems = new ObservableCollection<TreeItem>
        {
            new TreeItem { Name = "根节点", Children = new ObservableCollection<TreeItem>
                {
                    new TreeItem { Name = "子节点1" },
                    new TreeItem { Name = "子节点2" }
                }
            }
        };
    }
}

// 树节点数据类
public class TreeItem : ReactiveObject
{
    private string _name;
    // 绑定TextBox的属性，变更时自动通知UI
    public string Name
    {
        get => _name;
        set => this.RaiseAndSetIfChanged(ref _name, value);
    }

    // 子节点集合（如果是树形结构需要）
    public ObservableCollection<TreeItem> Children { get; set; } = new ObservableCollection<TreeItem>();
}

3. 替换后台代码的关键步骤 #

• 删除后台代码中所有手动处理TreeView.SelectionChanged、TextBox.TextChanged的逻辑
• 确保窗口的DataContext指向ViewModel实例：
  可以在后台构造函数中添加：

  public MainApplicationWindow()
  {
      InitializeComponent();
      DataContext = new MainWindowViewModel();
  }
  

这样配置后，选中TreeView节点时TextBox会自动显示对应数据，编辑TextBox内容时，TreeView的节点文本也会实时更新，完全通过数据绑定实现，无需额外后台事件代码。

内容的提问来源于stack exchange，提问作者Eric Bergman-Terrell