The programming with the MVVM pattern often requires a proliferation of types because there are more Views that need a ViewModel than you might think. You can think that you need to associate a ViewModel only to simple blocks of your user interface, but while you are writing code you often understand that there are other cases where a ViewModel is required.
As an example while populating a DataGrid binding simple entities to the grid is not good idea. A single row of a grid not only contains some data to be displayed but often may contain some commands, a link to be clicked, a button to delete an item and so on.
All these are cases where you need a ViewModel to correcty handle the binding and the related commands. So you have to create a new type, add a bunch of properties and some commands and finally populate the grid with instances of the new type. Then you will find someway difficult to route the command from the child ViewModel to the one that has generated it.
Simple is better.
In my recent applications I found a reasonable workaround that correctly handle the situation but avoid a proliferation of classes and as usual in this cases the solution comes from a generic type. The trick comes from the understanding that often in this scenario you have some properties of an entity to be binded and one or two commands to be raised. And in the most cases the command have to be handled by a parent ViewModel. Imagine to have a collection which is shown in a DataGrid and a delete command on each row; To remove the row, the command has to be catched by the ViewModel which is exposing the collection. So I decided to create a simple class named RowViewModel this way:
1: public class RowViewModel<T,K> : ViewModel
2: where T : ViewModel
3: {
4: /// <summary>
5: /// Initializes a new instance of the RowViewModel class.
6: /// </summary>
7: /// <param name="parent">The parent.</param>
8: /// <param name="payload">The payload.</param>
9: public RowViewModel(T parent, K payload)
10: {
11: this.Parent = parent;
12: this.PayLoad = payload;
13: }
14:
15: /// <summary>
16: /// Gets or sets the parent.
17: /// </summary>
18: /// <value>The parent.</value>
19: public T Parent
20: {
21: get { return this.GetValue<T>("Parent"); }
22: set { this.SetValue<T>("Parent", value); }
23: }
24:
25: /// <summary>
26: /// Gets or sets the pay load.
27: /// </summary>
28: /// <value>The pay load.</value>
29: public K PayLoad
30: {
31: get { return this.GetValue<K>("PayLoad"); }
32: set { this.SetValue<K>("PayLoad", value); }
33: }
34: }
To simplify the creation of the collection property I've created a class RowViewModelCollection that inherits from the ObservableCollection. This allow me to declare the observable properties with a less verbose syntax:
1: public class RowViewModelCollection<T, K> : ObservableCollection<RowViewModel<T, K>>
2: where T : ViewModel
3: { }
Now we are ready to publish a DataGrid using this class. The RowViewModel exposes T as the parent ViewModel and K as the payload. This is the entity we want to display in the grid. So we can write a XAML similar to this:
1: <data:DataGrid ItemsSource="{Binding Tasks}">
2: <data:DataGrid.Columns>
3: <data:DataGridTemplateColumn>
4: <data:DataGridTemplateColumn.CellTemplate>
5: <DataTemplate>
6: <HyperlinkButton cmd:Click.Command="{Binding Parent.DeleteTaskCommand}"
7: cmd:Click.CommandParameter="{Binding PayLoad}"
8: HorizontalAlignment="Center" VerticalAlignment="Center" >
9: <Image Height="16" HorizontalAlignment="Center" VerticalAlignment="Center" Width="16" Source="/Elite.TimeTracker.Client;Component/Images/delete.png" Stretch="Fill"/>
10: </HyperlinkButton>
11: </DataTemplate>
12: </data:DataGridTemplateColumn.CellTemplate>
13: </data:DataGridTemplateColumn>
14: <data:DataGridTextColumn Header="Cliente" Binding="{Binding PayLoad.Customer.Description}" />
15: <data:DataGridTextColumn Header="Ora" Binding="{Binding PayLoad.StartTime}" />
16: <data:DataGridTextColumn Header="Descrizione" Binding="{Binding PayLoad.Description, Converter={StaticResource ellipsis}}" />
17: <data:DataGridCheckBoxColumn Header="Chiam." Binding="{Binding PayLoad.IsPhoneCall}" />
18: <data:DataGridCheckBoxColumn Header="Compl." Binding="{Binding PayLoad.IsCompleted}" />
19: </data:DataGrid.Columns>
20: </data:DataGrid>
In a couple of words we have:
ItemsSource="{Binding Tasks}" - This connect the DataGrid to a RowViewModelCollection declared in the parent ViewModel.
Binding="{Binding PayLoad.StartTime}" - This take advantage of the dot syntax of the DataBinding that allow to access complex properties of the binded objects. Remember that PayLoad is the instance of the entity to bind to the DataGrid so PayLoad.StartTime binds the StartTime property to the cell.
cmd:Click.Command="{Binding Parent.DeleteTaskCommand}" - This binds the click event of the HyperlinkButton to a command of the parent ViewModel.
cmd:Click.CommandParameter="{Binding PayLoad}" - This binding let me pass the entire entity the delegate command.
This tecnique simplifies the code required to handle the DataGrid. When a command is raised the parent ViewModel handle it and this reduce the need to use an EventBroker, and it gives a more simple and maintainable code.
Is this good only for DataGrids?
There are a lot of cases where you have to bind a collection to a control, the ItemsControl, the ListBox, and so on. Every time you encounter one of these cases you can obviously apply this tecnique. Of course it is useful only if you need to handle some commands, otherwise you can simply bind the entity directly to the control.
In the code I've attached to a my previous post - the Model-View-ViewModel exercise -you can find a working sample of the workaround.