Question

I’m in the early phases of developing a WPF application (using the MVVM pattern) that will allow the user to create a flowchart for a process.

The preliminary view looks as follows:

The symbols in the left-hand pane are WPF Path objects.

What needs to happen is that the user must be able to drag a symbol from the symbol panel onto the diagram portion.

Now this is all very simple to do in straight WPF with code-behind events, but I need suggestions on how to implement this using the MVVM pattern. I presume that in my model I will have an Observable collection that contains all the symbols dragged onto the canvas(?). How would I then update that collection every time a symbol is dragged onto the canvas?

I understand that ideally, the view’s code-behind must be completely empty when using MVVM, but would it break the pattern if I place code there that exclusively handles events on the view?

Any help would be appreciated.

Answer 1

In your canvas’ ViewModel, define a property

public ObservableCollection<SymbolViewModel> Symbols { get; }

and in your view use an ItemsControl to display the symbols:

<ItemsControl ItemsSource="{Binding Symbols}" ... />

Of course, you need proper data templates, item templates and item panels defined in your ItemsControl.

The ObservableCollection implements INotifyCollectionChanged which ensures that the ItemsControl is automatically updated.