How can I directly update an ObservableCollection in a ViewModel with a List from a Model?

Question

As many have observed with MVVM, you do not want the View and Model to be directly coupled. Therefore, I have my View bound to an ObservableCollection in my ViewModel which needs to be updated from a List in my Model.

What I have tried to do is create the CanvasObject in the CanvasModel, add it to the List, and send a reference, via events, to the ViewModel and update the ObservableCollection there.

The following code and explanation will hopefully illustrate my attempt:

In my View, I have an ItemsControl with the ItemSource binding to my ObservableCollection with an ItemsPanelTemplate pointing to a Canvas.

<ItemsControl ItemsSource="{Binding CanvasObjects}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas Width="1000" Height="1000" Background="GhostWhite"
                    MouseDown="Canvas_MouseDown"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

To allow a mouse click, I added a MouseDown event

public partial class CanvasView : UserControl
{
    dynamic viewModel;

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

    private void InitializeViewModel(object sender, RoutedEventArgs e)
    {
        viewModel = DataContext;
        Loaded -= InitializeViewModel;
    }

    private void Canvas_MouseDown(object sender, MouseButtonEventArgs e)
    {
        viewModel.MouseDownEventHandler(sender, e);
    }
}

In my ViewModel, I implement INotifyPropertyChanged and also implemented a custom Interface for handling the mouse events from the View as you can see from the above code. I also implement a few event dispatchers for a separate ToolPanelView and other interconnected events. The ObservableCollection is a basic Property and I am creating the Model here in the ViewModel

internal class CanvasViewModel : ViewModelBase, IMouseEventController
{
    private readonly ToolPanelDispatcher pToolPanelDispatcher;
    private readonly CanvasDispatcher pCanvasDispatcher;
    private readonly CanvasObjectDispatcher pCanvasObjectDispatcher;

    private CanvasModel pCanvasModel;
    private ToolMode pToolMode;
    private Point pCurrentMousePointerCoordinates;
    private Point pPreviousMousePointerCoordinates;

    public ObservableCollection<CanvasObject> CanvasObjects { get; set; }

    public CanvasViewModel(ToolPanelDispatcher toolPanelDispatcher, CanvasDispatcher canvasDispatcher, CanvasObjectDispatcher canvasObjectDispatcher)
    {
        pToolPanelDispatcher = toolPanelDispatcher;
        pCanvasDispatcher = canvasDispatcher;
        pCanvasObjectDispatcher = canvasObjectDispatcher;

        // Injects CanvasDispatcher and CanvasObjectDispatcher into CanvasModel
        pCanvasModel = new CanvasModel(pCanvasDispatcher, pCanvasObjectDispatcher);

        CanvasObjects = new ObservableCollection<CanvasObject>();

        // Subscribes/listens for when ToolMode changes on the ToolPanelView
        pToolPanelDispatcher.ToolModeChanged += ToolModeChangedEventHandler;
        pCanvasDispatcher.CanvasObjectAdded += CanvasObjectAddedEventHandler;
     }

    private void ToolModeChangedEventHandler(ToolMode toolMode)
    {
        pToolMode = toolMode;
        // Relays current tool mode to CanvasObjects
        pCanvasDispatcher.PublishToolModeChanged(pToolMode);
    }

    private void CanvasObjectAddedEventHandler(CanvasObject canvasObject)
    {
        CanvasObjects.Add(canvasObject);
    }

    public void MouseDownEventHandler(object sender, MouseButtonEventArgs e)
    {
        pCurrentMousePointerCoordinates = e.GetPosition(sender as Canvas);

        switch (pToolMode)
        {
            case ToolMode.Node:
                pCanvasModel.DrawCanvasObject(CanvasObjectType.Node, pCurrentMousePointerCoordinates);
                break;
        }

        pPreviousMousePointerCoordinates = pCurrentMousePointerCoordinates;
    }
}

In my Model, it is pretty basic: I have my List for CanvasObjects, the event dispatchers, and a draw/create method.

internal class CanvasModel
{
    private readonly List<CanvasObject> pCanvasObjects;

    private readonly CanvasDispatcher pCanvasDispatcher;
    private readonly CanvasObjectDispatcher pCanvasObjectDispatcher;

    public CanvasModel(CanvasDispatcher canvasDispatcher, CanvasObjectDispatcher canvasObjectDispatcher)
    {
        pCanvasObjects = new List<CanvasObject>();
        pCanvasDispatcher = canvasDispatcher;
        pCanvasObjectDispatcher = canvasObjectDispatcher;
    }

    public void DrawCanvasObject(CanvasObjectType canvasObjectType, Point origin)
    {
        var canvasObject = new Node(origin, pCanvasDispatcher, pCanvasObjectDispatcher);

        pCanvasObjects.Add(canvasObject);
        pCanvasDispatcher.OnCanvasObjectAdded(canvasObject);
    }
}

You may note that in the DrawCanvasObject method there is an unused CanvasObjectType. This is for expanded functionality that is not implemented yet. Also note that CanvasObject is a base for Node and other unnamed CanvasObjects that are Custom Controls inherited from Control to allow them to be children of a Canvas and to utilize Mouse Events. Further note that the events are basic events utilizing this pattern:

public delegate void CanvasObjectAddedEventHandler(CanvasObject canvasObject);
public event CanvasObjectAddedEventHandler? CanvasObjectAdded;

public void OnCanvasObjectAdded(CanvasObject canvasObject)
{
    CanvasObjectAdded?.Invoke(canvasObject);
}

However, to reitterate, this is only way that I was able to think on how to update the ObservableCollection by "dispatching" a reference of the CanvasObject and have the ViewModel listen for and then update the ObservableCollection.

Is this the only way it can be done or is there a more efficient/direct way to update an ObservableCollection from a List?

Any help would be greatly appreciated, especially if there are best practices that could be better followed.

Answer 1

You could have an ObservableCollection instead of a List in the model class

internal class CanvasModel
{
    public ObservableCollection<CanvasObject> CanvasObjects { get; }
        = new ObservableCollection<CanvasObject>();

    public void DrawCanvasObject(...)
    {
        ...
        CanvasObjects.Add(...);
        ...
    }

    ...
}

and a wrapper property in the view model that exposes the ObservableCollection of the underlying model:

internal class CanvasViewModel : ...
{
    private readonly CanvasModel canvasModel;

    public ObservableCollection<CanvasObject> CanvasObjects
    {
        get { return canvasModel.CanvasObjects; }
    }

    ...
}

Answer 2

Your design has several flaws.

1. Don't pass RoutedEventArgs to your View Model. This event args object is part of the view. You see where you end up when passing an instance to the View Model: you start to handle controls in your View Model, for example:

// Bad smelling *View* *Model* code that breaks the MVVM pattern
pCurrentMousePointerCoordinates = e.GetPosition(sender as Canvas);

You obtained the reference to the control via the sender parameter. Additionally, your View Model class should not mimic the event handler:

// Bad View Model code
public void MouseDownEventHandler(object sender, MouseButtonEventArgs e) {}

Instead it should expose a normal method that takes the arguments it needs:

// Fixed version
public void CrateNewItem(Point location) {}

"CanvasObject is a base for Node and other unnamed CanvasObjects that are Custom Controls to allow them to be children of a Canvas"

2. Your model object must not extend DispatcherObject (UIElement, Control etc.). You implement MVVM to avoid exactly this mixup. You want a clean separation between UI and business logic. Because the Canvas is the panel of the ItemsControl the item model are wrapped into a ContentPresenter. ContemntPresenter extends UIElement and therefore can be a child of Canvas. Just keep your models simple and design them like there is no View. There is only data that your business logic need s in order to do the application's business.

3. Because the Model must be View agnostic it will never have a DrawCanvasObject method. Drawing requires knowledge about UI details. For example a graphics application may have a CreateDrawingModels.

4. You are throwing around a lot of dispatchers. In case CanvasDispatcher and CanvasObjectDispatcher are wrappers of Dispatcher them those refrences shouldn't exist in the Model. We don't know what those types are, but it looks suspicious.

5. The View Model is not a delegate or broker to establish any communication between the View and the Model. Your code does just that. In MVVM the boundaries are crucial. This wrong understanding results in a bad design where responsibilities are wrong. The View Model gets data from the Model to present it to the View and updates the Model with data that was modified by the view. For example, when the user adds an item to a DataGrid then the View communicates with the View Model to trigger the associated operation. The View Model then creates the new item model and adds it to the source collection. Now at some point, for example when the user saves his changes by clicking a corresponding button, you commit the changes by updating the Model with the modified and added/removed items.

Depending on the size/complexity of the application you may opt to use the same model classes for View Model and Model.
However, the following example assumes that the Model has its usual business entities and related data models defined (just to highlight the boundaries in the following example).

The following example shows the data flow between the MVVM components:
View Model gets data from Model. View Model presents data to the View. View manipulates data or creates new data. View Model creates new item for the View. View Model updates Model with modified and new data. Model persists new data and executes business logic on the data.

It also shows how to correctly position the item containers on a Canvas to eliminate the idea that your item models have to extend UIElement in order to be a child of Canvas:

ShapeModel.cs
Data model of the Model component.

class ShapeModel
{
  public Point Location { get; private set;}
}

ShapeController.cs
A random class of the Model component to act like a business entity that handles shape data models.

class ShapeController
{
  private IList<ShapeModel> Shapes { get; }
  
  public void AddNewShapes(IEnumerable<ShapeModel> newShapes)
  {
    // Do something with the new shape e.g. persist it or add it to a collection etc.
   newShapes.ToList().ForEach(this.Shapes.Add);
  }
  
  // Pretend this takes a while because much data must be fetched from a database etc
  public async Task<IEnumerable<ShapeModel>> GetShapesAsync(ShapeModel newShape)
    => this.Shapes;
}

ShapeItem.cs
Data model that serves as a binding source for the View.

class ShapeItem : INotifyPropertyChanged
{
  public Point Location { get; private set;}

  public double HorizontalOffset
  { 
    get => this.Location.X;
    set => this.location = new Point(value, this.VerticalOffset);
  }

  public double VerticalalOffset 
  { 
    get => this.Location.Y;
    set => this.location = new Point(this.HorizontalOffset, value);
  }
}

MainViewModel.cs

class MainViewModel : INotifyPropertyChanged
{
  public ObservableCollection<ShapeItem> ShapeItems { get; }
  public IList<ShapeItem> UnsavedShapeItems { get; }

  // Reference to a Model type
  private ShapeController ShapeController { get; }

  public MainViewModel()
  {
    this.ShapeController = new ShapeController();
  }

  public async Task InitializeAsync()
  {
    IEnumerable<ShaeModel> shapeModels = await this.ShapeController.GetShapesAsync();
    IEnumerable<ShapeItem> shapeItems = ConvertShapeModelToShapeItem(shapeModels);
    this.ShapeItems = new ObservableCollection<ShapeItem>(shapeItems);
  }

  // Example ICommand handler
  private void ExecuteAddNewShapesCommand(object commandParameter)
  {
    var newShapeItem = new ShapeItem();

    // "Directly" interact with the view via data binding. Direct means not using the Model for this.
    this.ShapeItems.Add(newShapeItem);
    this.UnsavedShapeItems.Add(newShapeItem);
  }

  // Example ICommand handler
  private void ExecuteSaveNewShapesCommand(object commandParameter)
  {
    IEnumerable<ShapeModel> shapeModels = ConvertShapeItemToShapeModel(this.UnsavedShapeItems); 

    // Send modified or new data back to the Model
    this.ShapeController.AddNewShapes(shapeModels);
  }

  private IEnumerable<Shapeitem> ConvertShapeModelToShapeItem(IEnumerable<ShapeModel> shapeModels)
    => shapeModels.Select(model => new ShapeItem() { Location = model.Location });

  private IEnumerable<ShapeModel> ConvertShapeItemToShapeModel(IEnumerable<ShapeItem> shapeItems)
    => shapeItems.Select(item => new ShapeModel() { Location = item.Location });
}

MainWindow.xaml.cs

partial class MainWindow : Window
{
  private MainViewModel ViewModel { get; }

  public MainWindow()
  {
    InitializeComponent();
  
    this.ViewModel = new MainViewModel();  
    this.DataContext = this.ViewModel();
    this.Loaded += OnLoaded;
  }

  private async void OnLoaded(object sender, RoutedEventArgs e)
  {
    await this.ViewModel.InitializeAsync();
  }
}

MainWindow.xaml

<Window>
  <ItemsControl ItemsSource="{Binding ShapeItems}"> <ItemsControl.ItemsPanel>
    <ItemsControl.ItemsPanel>
      <ItemsPanelTemplate>
        <Canvas Width="1000" 
                Height="1000" 
                Background="GhostWhite" />
      </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

  <!-- Wire the item container's Canvas position to the item model's Location property -->
    <ItemsControl.ItemsContainerStyle>
      <Style TarghetType="ContenPresenter">
        <Setter Property="Canvas.Left"
                Value="{Binding HorizontalOffset, Mode=TwoWay}" />
        <Setter Property="Canvas.Top"
                Value="{Binding VerticalOffset, Mode=TwoWay}" />
      </Style>
    </ItemsControl.ItemsContainerStyle>

    <!-- Define how the shapes should be rendered e.g. as custom control etc. -->    
    <ItemsControl.ItemTemplate>
      <DataTemplate DataType={x:Type local:ShapeItem}>
        <Rectangle Width="50"
                   Height="50"
                   Fill="Orange" />
      </DataTemplate>   
    </ItemsControl.ItemTemplate>  
  </ItemsControl>
</Window>