Avalonia 11 MVVM中选中项变更后如何重绘Canvas？

针对你的场景，有两种简洁的实现方式，既能保持MVVM的分离原则，又能在代码后置中操作Canvas完成绘制：

方法1：监听ViewModel的属性变更（推荐，符合MVVM） #

首先确保ViewModel里的SelectedItem使用MVVM Toolkit的[ObservableProperty]标记，自动触发属性变更通知：

// ViewModel代码
using CommunityToolkit.Mvvm.ComponentModel;

public partial class YourViewModel : ObservableObject
{
    [ObservableProperty]
    private YourDataModel? _selectedItem; // 替换成你的数据实体类型
}

然后在窗口的代码后置（比如YourWindow.axaml.cs）中，订阅ViewModel的属性变更事件，或者用Avalonia的响应式API监听SelectedItem的变化：

// 代码后置
using Avalonia.Controls;
using Avalonia.ReactiveUI;

public partial class YourWindow : Window
{
    public YourWindow()
    {
        InitializeComponent();
        
        // 确保DataContext已绑定到ViewModel
        if (DataContext is YourViewModel vm)
        {
            // 方式A：订阅PropertyChanged事件
            vm.PropertyChanged += (sender, e) =>
            {
                if (e.PropertyName == nameof(vm.SelectedItem))
                {
                    UpdateCanvasWithSelectedItem(vm.SelectedItem);
                }
            };

            // 方式B：用Reactive扩展更优雅（需引用Avalonia.ReactiveUI）
            this.WhenAnyValue(x => x.ViewModel.SelectedItem)
                .Subscribe(selectedItem => UpdateCanvasWithSelectedItem(selectedItem));
        }
    }

    private void UpdateCanvasWithSelectedItem(YourDataModel? selectedItem)
    {
        // 直接操作Canvas（确保Canvas在XAML中设置了x:Name="MyCanvas"）
        MyCanvas.Children.Clear();
        
        if (selectedItem == null) return;
        
        // 这里写你的绘制逻辑，比如添加图形、文本等
        var shape = new Ellipse
        {
            Fill = Brushes.Red,
            Width = selectedItem.Size,
            Height = selectedItem.Size,
            Margin = new Thickness(selectedItem.PositionX, selectedItem.PositionY, 0, 0)
        };
        MyCanvas.Children.Add(shape);
    }
}

方法2：直接监听DataGrid的SelectionChanged事件 #

如果更倾向于直接绑定控件事件，可在XAML中给DataGrid添加SelectionChanged事件绑定：

<!-- XAML代码 -->
<DataGrid x:Name="MyDataGrid" SelectionChanged="MyDataGrid_SelectionChanged" />
<Canvas x:Name="MyCanvas" />

然后在代码后置中实现事件处理方法：

// 代码后置
private void MyDataGrid_SelectionChanged(object? sender, SelectionChangedEventArgs e)
{
    if (DataContext is YourViewModel vm && vm.SelectedItem != null)
    {
        UpdateCanvasWithSelectedItem(vm.SelectedItem);
    }
}

// 复用上面的UpdateCanvasWithSelectedItem方法
private void UpdateCanvasWithSelectedItem(YourDataModel? selectedItem)
{
    // 绘制逻辑...
}

注意事项 #

• 确保Canvas在XAML中设置了x:Name，这样代码后置能直接访问到控件实例。
• 两种方法都保持了ViewModel的纯净性（不直接操作UI），绘制逻辑集中在代码后置的UI层，符合MVVM的职责分离。

内容的提问来源于stack exchange，提问作者Cedric Royer-Bertrand