Vincent Sibal's Blog : MVVM

WPF Model-View-ViewModel (MVVM) Toolkit 0.1

vinsibal — Sat, 02 May 2009 17:59:00 GMT

The WPF team has just released an MVVM Toolkit which contains an overview and walkthrough of the MVVM pattern, a full Messenger sample app using MVVM, as well as a Visual Studio template for MVVM. The template creates a WPF application with folders for Views, ViewModels, Models, and Commands. What I really like about it is the DelegateCommand class which is similar to RelayCommand. One addition to this version of the Command implementation is the ability to manually control when OnCanExecuteChanged is called or let the CommandManager control it. The common scenario will be the latter, but allowing the option for the former will allow greater control over application performance due to the many calls to OnCanExecuteChanged. In the future, the plan is to get this as well as other MVVM concepts into the WPF framework. You can learn more about it here and download it here. Check it out and we would love to hear your feedback.

Launching a custom Dialog to edit items in a DataGrid (with MVVM)

vinsibal — Fri, 10 Apr 2009 16:53:00 GMT

Launching a custom dialog for editing on the DataGrid is another somewhat common request that I see from the discussion list. I thought I would provide a sample but at the same time implement it with the MVVM pattern. The requirement that I will use on the sample is that the editing mechanism can only come from the editing dialog that I provide.

I decided that the way to launch the custom dialog will be through double-clicking on the row. To get that behavior, I will use the attached behavior pattern on DataGridRow. The behavior is defined like so:

public class DataGridRowBehavior

{

public static DependencyProperty OnDoubleClickProperty = DependencyProperty.RegisterAttached(

"OnDoubleClick",

typeof(ICommand),

typeof(DataGridRowBehavior),

new UIPropertyMetadata(DataGridRowBehavior.OnDoubleClick));

public static void SetOnDoubleClick(DependencyObject target, ICommand value)

{

target.SetValue(DataGridRowBehavior.OnDoubleClickProperty, value);

}

private static void OnDoubleClick(DependencyObject target, DependencyPropertyChangedEventArgs e)

{

var element = target as DataGridRow;

if ((e.NewValue != null) && (e.OldValue == null))

{

element.PreviewMouseDoubleClick += OnPreviewMouseDoubleClick;

}

else if ((e.NewValue == null) && (e.OldValue != null))

{

element.PreviewMouseDoubleClick -= OnPreviewMouseDoubleClick;

}

private static void OnPreviewMouseDoubleClick(object sender, MouseButtonEventArgs e)

{

UIElement element = (UIElement)sender;

ICommand command = (ICommand)element.GetValue(DataGridRowBehavior.OnDoubleClickProperty);

command.Execute(e);

}

The behavior is then used on the DataGridRow like this:

<Setter Property="local:DataGridRowBehavior.OnDoubleClick"

Value="{Binding ShowEditItemDialogCommand}" />

</Style>

What’s happening is the OnDoubleClick attached property listens for a property change on itself. I define an ICommand, ShowEditItemDialogCommand, on OnDoubleClick which then hooks up the actual event handler, PreviewMouseDoubleClick, on the target element. In that event handler, OnPreviewMouseDoubleClick, I retrieve the value of OnDoubleClick which is my ICommand and execute it. So now we have the behavior to launch a dialog through a double-click action. The next thing is to define the ICommand ShowEditItemDialogCommand.

I have defined a DataGridRow ViewModel which hosts the actual item data as well as any properties that will drive the view (the DataGridRow). It also will host any commands on a DataGridRow which for our purposes will be the ShowEditItemDialogCommand. My commands are also implemented using the RelayCommand mechanism that is discussed on this MSDN article. So here is the basic implementation:

public class ItemViewModel : ViewModelBase

{

private ICommand _editItemCommand;

public ICommand ShowEditItemDialogCommand

{

get

{

if (_editItemCommand == null)

{

_editItemCommand = new RelayCommand(

() =>

{

// pass the item to the dialog

var dlg = new EditItemDialog(Item);

if (dlg.ShowDialog() == true)

{

// retrieve the updated item from the dialog

Item = dlg.Result.Item;

}

});

}

return _editItemCommand;
}

}

So when DataGridRowBehavior.OnPreviewMouseDoubleClick executes the command, my ShowEditItemDialogCommand will initiate the launch of the new dialog. The dialog that is being launched is basically a new Window which is considered a View. From a MVVM purist perspective this does not belong in a ViewModel. To handle this you can use the mediator design pattern to host the communication between the ViewModel and the View. There are a couple ways to implement this pattern which include implementing it as an observer pattern or using a specialized communication mechanism through interfaces and references. I’ve chosen the latter and in the sample code you can see I’ve named it EditDialogDirector to be clear on its behavior. I won’t show all the details here.

Now, I said earlier that I set a requirement that editing can only come from the dialog that I provide. While there are a lot of ways to customize the editing behavior, I decided to keep it really simple and set DataGrid.IsReadOnly to true. It does mean that I will lose the default editing capabilities that DataGrid provides, but I won’t have to keep state on DataGrid begin and commit edits. There are some other details that I’m leaving out but the full sample code below will give you a good idea of how everything is pieced together. Also, there is a lot of great reference material and samples on MVVM to further enhance your knowledge on the subject.

http://blogs.msdn.com/johngossman/archive/2005/10/08/478683.aspx

http://karlshifflett.wordpress.com/mvvm/

http://www.codeproject.com/KB/WPF/InternationalizedWizard.aspx

Download the full sample here.

Exploring MVVM: Grouping with the DataGrid

vinsibal — Wed, 21 Jan 2009 16:46:00 GMT

Model-View-ViewModel (MVVM) is one of those really interesting design patterns that are used in WPF. It provides a separation between the UI and business logic and uses data binding techniques to connect them together. Karl Shifflett has some great material on MVVM that you can read about here.

Anyway, I thought I’d dig into some of the details starting with grouping items in a DataGrid. I was originally building a test app for modeling animations of DependencyProperties and ended up using a DataGrid to show the DPs, their current values, and animation properties. I found that I really needed all the sorting, grouping, and filtering capabilities to analyze test values so I wanted to update the DataGrid and use the MVVM pattern (as much as possible).

Grouping by column

To group by column I decided to use a context menu on the column header. In the context menu, the MenuItems are hooked up to commands on my ViewModel like so:

<MenuItem Name="mi_group"

Header="Group by this column"

Command="{Binding RelativeSource={RelativeSource FindAncestor,

AncestorType={x:Type local:Window1}},

Path=DataContext.GroupColumn}"

CommandParameter="{Binding RelativeSource={RelativeSource Self},

Path=DataContext}"/>

<MenuItem Name="mi_clearGroups"

Header="Clear grouping"

Command="{Binding RelativeSource={RelativeSource FindAncestor,

AncestorType={x:Type local:Window1}},

Path=DataContext.UngroupColumns}" />

</ContextMenu>

My ViewModel is the DataContext for the main window and implements these commands with a MVVM commanding style introduced by Josh Smith called RelayCommand. You can find it in his Crack.NET solution as well as other MVVM samples here and here. Here is the code for grouping:

public ICommand GroupColumn

{

get

{

if (_groupColumn == null)

{

_groupColumn = new RelayCommand<object>(

(param) =>

{

string header = param as string;

DPCollection.GroupDescriptions.Add(new PropertyGroupDescription("TargetProperty." + header));

DPCollection.SortDescriptions.Add(new SortDescription("TargetProperty.Name", ListSortDirection.Ascending));

});

}

return _groupColumn;
}

}

DPCollection is the CollectionView that I set on the DataGrid.ItemsSource. So triggering this command will set a group on a particular property and sort by its name. The important part is really how the command is being implemented in the ViewModel and through a delegate style of commanding such as RelayCommand.

Expanding and Collapsing Groups

I really wanted to follow a pattern similar to Josh’s and Bea’s TreeView examples but unfortunately the grouping implementation is not so extensible. When you setup GroupDescriptions, the ItemContainerGenerator of the ItemsControl will create these GroupItem visuals and will set the DataContext of each GroupItem to a CollectionViewGroupInternal object. This CollectionViewGroupInternal object holds information about the items in the group, its name, count, etc. The xaml for my GroupStyle without custom expanding or collapsing looks like this:

<GroupStyle.HeaderTemplate>

</StackPanel>

</DataTemplate>

</GroupStyle.HeaderTemplate>

<GroupStyle.ContainerStyle>

<Setter.Value>

<Expander.Header>

</DockPanel>

</Expander.Header>

</Expander>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</GroupStyle.ContainerStyle>

</GroupStyle>

Notice the properties “Name” and “ItemCount” which are properties on the CollectionViewGroup which is a base class of CollectionViewGroupInternal. Also notice the Expander.IsExpanded property. I needed some way to bind some kind of ViewModel property to Expander.IsExpanded.

The problem is that CollectionViewGroupInternal is Internal as you might have suspected and I was unsuccessful in applying a class adaptor to the base class object without affecting the grouping functionality. So I decided to put an IsExpanded property directly on each of the items instead. While this is more of a hack as IsExpanded means nothing to the item by itself, it is relatively cheaper and really may be a more realistic solution than re-implementing grouping on a custom CollectionView. Here is the updated xaml:

<GroupStyle.HeaderTemplate>

</StackPanel>

</DataTemplate>

</GroupStyle.HeaderTemplate>

<GroupStyle.ContainerStyle>

<Setter.Value>

<Expander.Header>

</DockPanel>

</Expander.Header>

</Expander>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</GroupStyle.ContainerStyle>

</GroupStyle>

I have made the assumption that it will check the first item in the group but that is ok as I only care able expanding or collapsing all groups. When I clear grouping or group a different column, all IsExpanded properties are reset so there are no side effects on the next group.

Finally, the command for expanding looks like this:

public ICommand ExpandAllGroups

{

get

{

if (_expandAllGroups == null)

_expandAllGroups = new RelayCommand(

() =>

{

if (DPCollection.Groups != null)

{

foreach (object groupItem in DPCollection.Groups)

{

var group = groupItem as CollectionViewGroup;

group.Items[0] as ElementViewModel).IsExpanded = true;

}
}

});

return _expandAllGroups;

}

I have attached a full sample here, which is a stripped down version of the test app I was building.