如何基于MVVM模式与WPF Canvas进行交互？

问题背景 #

几乎所有MVVM示例都是基于ListBox、TextBox、Button这类偏静态的控件实现数据绑定与交互，但针对绘图程序核心的Canvas这类动态视图，相关的实践示例却很少。Canvas本身没有可直接绑定的交互控件，目前的实现方式是通过View的后台代码捕获Canvas的鼠标事件，调用ViewModel暴露的方法传入坐标数据，再通过ItemsControl绑定展示元素。现寻求更符合MVVM原则的优化实现方式。

当前实现代码 #

CanvasView (XAML)

<ItemsControl x:Name="itemsControl" ItemsSource="{Binding CanvasObjectModels}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas Width="1000" Height="1000" Background="GhostWhite"
                    MouseDown="Canvas_MouseDown"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Canvas.Left" Value="{Binding Origin.X}" />
            <Setter Property="Canvas.Top" Value="{Binding Origin.Y}" />
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <CanvasObject:Node Origin="{Binding Origin}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

IMyCanvas 接口

public interface IMyCanvas
{
    void AddCanvasObject(Point origin);
}

CanvasView 后台代码

public partial class CanvasView : UserControl
{
    private IMyCanvas pViewModel;

    public CanvasView()
    {
        InitializeComponent();
        Loaded += InitializeViewModel;
    }

    private void InitializeViewModel(object sender, RoutedEventArgs e)
    {
        if (DataContext is IMyCanvas viewModel)
            pViewModel = viewModel;
        else
            throw new Exception("DataContext does not implement IMyCanvas!");
            
        Loaded -= InitializeViewModel;
    }

    private void Canvas_MouseDown(object sender, MouseButtonEventArgs e)
    {
        var canvas = sender as Canvas;

        if (e.LeftButton == MouseButtonState.Pressed)
        {
            pViewModel.AddCanvasObject(e.GetPosition(canvas));
        }
    }
}

CanvasObjectModel

public class CanvasObjectModel
{
    public Point Origin { get; set; }
}

CanvasViewModel

internal class CanvasViewModel : ViewModelBase, IMyCanvas
{
    public ObservableCollection<CanvasObjectModel> CanvasObjectModels { get; set; }

    public CanvasViewModel()
    {
        CanvasObjectModels = new ObservableCollection<CanvasObjectModel>();
    }

    public void AddCanvasObject(Point origin)
    {
        CanvasObjectModels.Add(new CanvasObjectModel() { Origin = origin});
    }
}

更优实现方案 #

方案1：使用Blend行为封装交互逻辑

通过Blend的Interactivity行为库，将鼠标事件封装为可绑定的命令，完全消除View后台的业务相关代码，严格遵循MVVM的视图与逻辑分离原则。

实现自定义MouseDown行为

using System.Windows;
using System.Windows.Input;
using System.Windows.Interactivity;

public class CanvasMouseDownBehavior : Behavior<Canvas>
{
    public static readonly DependencyProperty CommandProperty =
        DependencyProperty.Register(nameof(Command), typeof(ICommand), typeof(CanvasMouseDownBehavior));

    public ICommand Command
    {
        get => (ICommand)GetValue(CommandProperty);
        set => SetValue(CommandProperty, value);
    }

    protected override void OnAttached()
    {
        base.OnAttached();
        AssociatedObject.MouseDown += OnCanvasMouseDown;
    }

    protected override void OnDetaching()
    {
        base.OnDetaching();
        AssociatedObject.MouseDown -= OnCanvasMouseDown;
    }

    private void OnCanvasMouseDown(object sender, MouseButtonEventArgs e)
    {
        if (e.LeftButton == MouseButtonState.Pressed && Command != null)
        {
            var point = e.GetPosition(AssociatedObject);
            if (Command.CanExecute(point))
            {
                Command.Execute(point);
            }
        }
    }
}

XAML中使用行为

<ItemsControl x:Name="itemsControl" ItemsSource="{Binding CanvasObjectModels}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas Width="1000" Height="1000" Background="GhostWhite">
                <i:Interaction.Behaviors>
                    <local:CanvasMouseDownBehavior Command="{Binding AddCanvasObjectCommand}"/>
                </i:Interaction.Behaviors>
            </Canvas>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <!-- 其余ItemContainerStyle和ItemTemplate保持不变 -->
</ItemsControl>

修改ViewModel使用命令

internal class CanvasViewModel : ViewModelBase
{
    public ObservableCollection<CanvasObjectModel> CanvasObjectModels { get; set; }
    public ICommand AddCanvasObjectCommand { get; }

    public CanvasViewModel()
    {
        CanvasObjectModels = new ObservableCollection<CanvasObjectModel>();
        AddCanvasObjectCommand = new RelayCommand<Point>(ExecuteAddCanvasObject);
    }

    private void ExecuteAddCanvasObject(Point origin)
    {
        CanvasObjectModels.Add(new CanvasObjectModel() { Origin = origin });
    }
}

方案2：使用附加属性实现命令绑定

如果不想引入Blend行为库，可以通过自定义附加属性来实现相同的效果，将鼠标事件与ViewModel的命令绑定。

实现附加属性

using System.Windows;
using System.Windows.Input;

public static class CanvasMouse
{
    public static readonly DependencyProperty MouseDownCommandProperty =
        DependencyProperty.RegisterAttached(
            "MouseDownCommand",
            typeof(ICommand),
            typeof(CanvasMouse),
            new PropertyMetadata(null, OnMouseDownCommandChanged));

    public static void SetMouseDownCommand(Canvas element, ICommand value)
    {
        element.SetValue(MouseDownCommandProperty, value);
    }

    public static ICommand GetMouseDownCommand(Canvas element)
    {
        return (ICommand)element.GetValue(MouseDownCommandProperty);
    }

    private static void OnMouseDownCommandChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if (d is Canvas canvas)
        {
            canvas.MouseDown -= Canvas_MouseDown;
            if (e.NewValue is ICommand command)
            {
                canvas.MouseDown += (s, args) =>
                {
                    if (args.LeftButton == MouseButtonState.Pressed && command.CanExecute(args.GetPosition(canvas)))
                    {
                        command.Execute(args.GetPosition(canvas));
                    }
                };
            }
        }
    }
}

XAML中使用附加属性

<ItemsControl x:Name="itemsControl" ItemsSource="{Binding CanvasObjectModels}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas Width="1000" Height="1000" Background="GhostWhite"
                    local:CanvasMouse.MouseDownCommand="{Binding AddCanvasObjectCommand}"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <!-- 其余ItemContainerStyle和ItemTemplate保持不变 -->
</ItemsControl>

ViewModel的修改同方案1，使用RelayCommand<Point>即可。

方案对比 #

• 当前方案：实现简单直接，但View后台存在与ViewModel的耦合代码，不符合MVVM“视图仅负责展示，无业务逻辑”的核心原则，不利于单元测试和代码维护。
• 优化方案：通过行为或附加属性将交互逻辑封装，View完全无需后台代码，ViewModel通过命令接收交互数据，实现了视图与逻辑的彻底解耦，代码可测试性和可维护性大幅提升。

内容的提问来源于stack exchange，提问作者Experiment-626