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.
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.