How would you interact with a WPF Canvas with MVVM?

Question

Almost all examples of MVVM are applications that have View that may consist of ListBoxes, TextBoxes, Labels, Buttons, etc. to present and process data. ListBoxes, TextBoxes, and Labels are bound to properties and Buttons are bound to Commands in a ViewModel. Those types of Views are mainly static in nature.

However, there are not any real examples of how to deal with a fluid View, such as a drawing program. When you think about it, a drawing program is just a Canvas. Because there are no Buttons to which to bind nor Listboxes, TextBoxes, or Labels to interact with, how should you interact with the Canvas?

So far, the only way that I have found to interact with the Canvas is to use the Canvas' code-behind to use the Mouse Events to allow you to pass data into the ViewModel through exposed methods such as Add(Point point) which will add a point to an ObservableCollection only to be bound to an ItemsControl that will process the point data based on the ItemTemplate.

CanvasView

<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
{
    public void AddCanvasObject(Point origin);
}

CanvasView Code-Behind

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});
    }
}

Is there a better way to do this?

Answer 1

If you want to bind events to VM commands you can use Interactivity:

<Canvas Width="1000" Height="1000" Background="GhostWhite">
  <i:Interaction.Triggers>
    <i:EventTrigger EventName="MouseDown">
      <i:InvokeCommandAction Command="{Binding MyCommand}"/>
    </i:EventTrigger>
  </i:Interaction.Triggers>
<Canvas/>

For more information you can check the question

Answer 2

You can use the CallMethodAction behavior from Microsoft.Xaml.Behaviors.Wpf (NuGet Package) to directly call your view model methods from XAML.

I am giving you a button example but you can handle the events of your canvas in the same way

1. Add this namespace to your XAML:

xmlns:i="http://schemas.microsoft.com/xaml/behaviors"

2. Add the CallMethodAction trigger to your button in XAML:

<Button x:Name="button">
  <Behaviors:Interaction.Triggers>
    <Behaviors:EventTrigger EventName="Click" SourceObject="{Binding ElementName=button}">
      <Behaviors:CallMethodAction TargetObject="{Binding}" MethodName="IncrementCount"/>
    </Behaviors:EventTrigger>
  </Behaviors:Interaction.Triggers>
</Button>

3. Place a IncrementCount method in your view model:

public int Count { get; set; }

public void IncrementCount()
{
    Count++;
}

Now you can skip the boilerplate code in the code behind. Also, you can check the XamlBehaviorsWpf wiki here: https://github.com/Microsoft/XamlBehaviorsWpf/wiki There are some other behaviors as well :)