Avalonia MVVM模式下，如何在代码后台更新Canvas控件？

一、ViewModel部分说明 #

你的ViewModel实现是正确的，无需额外添加命名空间或继承其他类：

• 已经通过ViewModelBase继承了CommunityToolkit.Mvvm的ObservableObject，满足MVVM的属性通知需求
• 正确使用[ObservableProperty]特性自动生成属性变更通知逻辑
• 所需的CommunityToolkit.Mvvm.ComponentModel命名空间已正确引入

二、Canvas更新方案 #

方案1：符合MVVM原则的推荐实现（数据驱动视图） #

MVVM核心是视图与业务逻辑分离，ViewModel不应直接操作View控件。正确做法是由ViewModel提供绘制数据，View通过绑定自动更新Canvas：

步骤1：扩展ViewModel，添加绘制数据集合

在MapsViewModel中添加用于Canvas绘制的元素集合，并在选中项变化时更新数据：

using CommunityToolkit.Mvvm.ComponentModel;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;

public partial class MapsViewModel : ViewModelBase
{
    [ObservableProperty]
    private MapItem? _selectedMapItem;
    
    // 新增Canvas绘制元素集合
    [ObservableProperty]
    private ObservableCollection<MapDrawingElement> _canvasElements = new();

    partial void OnSelectedMapItemChanged(MapItem? value)
    {
        CanvasElements.Clear();
        if (value == null) return;

        // 根据选中项匹配对应Map数据
        var targetMap = _maps.First(m => m.Seed == value.Seed);
        
        // 生成示例绘制元素（地图边界矩形）
        CanvasElements.Add(new MapDrawingElement
        {
            X = 10,
            Y = 10,
            Width = targetMap.SizeX * 8,
            Height = targetMap.SizeY * 8,
            FillColor = "Blue"
        });
    }

    public ObservableCollection<MapItem> MapItems { get; }
    private List<Map> _maps;

    public MapsViewModel()
    {
        _maps = new List<Map>()
        {
            new Map{ Seed = "seed-001", Type="Imported", SizeX=24, SizeY=12 },
            new Map{ Seed = "seed-002", Type="Imported", SizeX=12, SizeY=6 },
        };
        MapItems = new ObservableCollection<MapItem>(_maps.Select(x => new MapItem(x.Seed, x.Type)).ToList());
    }
}

// 定义绘制元素模型
public class MapDrawingElement
{
    public double X { get; set; }
    public double Y { get; set; }
    public double Width { get; set; }
    public double Height { get; set; }
    public string FillColor { get; set; }
}

步骤2：修改View的XAML，绑定绘制数据

在Canvas中添加ItemsControl，通过数据模板自动渲染ViewModel提供的绘制元素：

<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="clr-namespace:LocalArena.ViewModels"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="LocalArena.Views.MapsView"
             x:DataType="vm:MapsViewModel">
  <Grid ColumnDefinitions="*" RowDefinitions="*,2*">
      <Viewbox Grid.Row="0" Grid.Column="0" Stretch="Uniform">
          <Canvas x:Name="viewer" Width="200" Height="100" MaxWidth="200" MaxHeight="100" Background="Yellow" Margin="3">
              <!-- 通过ItemsControl绑定绘制元素集合 -->
              <ItemsControl ItemsSource="{Binding CanvasElements}">
                  <ItemsControl.ItemTemplate>
                      <DataTemplate DataType="vm:MapDrawingElement">
                          <Rectangle Width="{Binding Width}" Height="{Binding Height}"
                                     Fill="{Binding FillColor}" Stroke="Black"
                                     Canvas.Left="{Binding X}" Canvas.Top="{Binding Y}"/>
                      </DataTemplate>
                  </ItemsControl.ItemTemplate>
              </ItemsControl>
          </Canvas>
      </Viewbox>
      <DataGrid Grid.Row="1" Grid.Column="0" Margin="3" ItemsSource="{Binding MapItems}"
                SelectedItem="{Binding SelectedMapItem}" AutoGenerateColumns="True" IsReadOnly="True"
                GridLinesVisibility="All" BorderThickness="1" BorderBrush="Gray">
      </DataGrid>
  </Grid>
</UserControl>

方案2：直接在View代码后台访问Canvas（不推荐，但满足需求） #

如果必须直接操作Canvas控件，应在View的代码后台（而非ViewModel）实现，避免ViewModel依赖View控件：

编写View后台代码（MapsView.xaml.cs）

using Avalonia;
using Avalonia.Controls;
using Avalonia.Media;
using System.Linq;

namespace LocalArena.Views
{
    public partial class MapsView : UserControl
    {
        public MapsView()
        {
            InitializeComponent();
            Loaded += MapsView_Loaded;
        }

        private void MapsView_Loaded(object? sender, RoutedEventArgs e)
        {
            if (DataContext is ViewModels.MapsViewModel vm)
            {
                vm.PropertyChanged += Vm_PropertyChanged;
            }
        }

        private void Vm_PropertyChanged(object? sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            if (e.PropertyName == nameof(ViewModels.MapsViewModel.SelectedMapItem))
            {
                var vm = (ViewModels.MapsViewModel)sender!;
                UpdateCanvas(vm.SelectedMapItem);
            }
        }

        private void UpdateCanvas(ViewModels.MapItem? selectedItem)
        {
            // 直接操作viewer控件
            viewer.Children.Clear();
            if (selectedItem == null) return;

            var vm = (ViewModels.MapsViewModel)DataContext!;
            var targetMap = vm._maps.First(m => m.Seed == selectedItem.Seed);

            // 示例：添加地图边界矩形
            var mapRect = new Rectangle
            {
                Width = targetMap.SizeX * 8,
                Height = targetMap.SizeY * 8,
                Fill = Brushes.Blue,
                Stroke = Brushes.Black
            };
            Canvas.SetLeft(mapRect, 10);
            Canvas.SetTop(mapRect, 10);
            viewer.Children.Add(mapRect);
        }

        // 卸载时取消订阅，避免内存泄漏
        protected override void OnUnloaded(RoutedEventArgs e)
        {
            base.OnUnloaded(e);
            if (DataContext is ViewModels.MapsViewModel vm)
            {
                vm.PropertyChanged -= Vm_PropertyChanged;
            }
        }
    }
}

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