This article documents the classes and techniques presented in "MVVMExtraLite", a TechNet Gallery sample that you can download, copy the code and use as your own.

Introduction

This document accompanies the following TechNet Gallery project, which you can download the source code and use however you wish.

http://gallery.technet.microsoft.com/VERY-Easy-MVVM-MVVMExtraLit-54353183

This sample project contains all you need to develop MVVM applications. It presents simple classes for the RelayCommand, Mediator, EventToCommand and also includes an example of an AttachedProperty (CloseWindow from ViewModel).

Make the code your own, copy into your own projects, or make a library project of it, and throw away those 3rd party DLLs!!

 

The project also comes with examples of each of them in action. The rest of this article describes them in more detail.

It is recommended that you download the sample project, run it to see the examples, then read this article along-side the code.

 

This project offers four of the most common solutions to MVVM development issues.

1. Attached Property + ViewModelBase = CloseWindow from ViewModel

One of the first question a developer asks when detaching from the code-behind is "How do I invoke UI methods like Window.Close()". Because the ViewModel has no inherent way of knowing about the View, we need to move UI tasks into code attached to the UI component that is triggered from bindings to the ViewModel.

The answer is Attached Properties (AP). In fact the answer to the majority of MVVM related problems is APs. The reason for this is that they are Dependency Properties, so they have a PropertyChangedCallback delegate, which passes a reference to the actual parent control (DependencyObject) into the AP. With this, you can attach events, cast back to the original class and call any methods it has, like the Close method of a Window.

This project includes an example Attached Property that invokes the Window's Close method, if the property changes. This acts like a trigger to close the window. It is bound to a property in the ViewModelBase, where we also have a method called CloseWindow that we can call from any ViewModel that inherits the ViewModelBase.

2. RelayCommand

The RelayCommand is the simplest way to add commands to your ViewModels. It also has a CommandParameter and CanExecute delegate. This is simply copied from MSDN, but it is an essential class to have, and this toolkit would not be complete without it.

The example shows using it to close the window in the previous example. The CanExecute is controlled by the IsChecked state of a CheckBox.

3. Mediator

This is an essential class, which helps shuttle messages around to any corner of your application.

There are several implementations around, including the Messenger in MVVMLite and the Mediator in Sinch. However, these frameworks include a load of other stuff too, so you or your company may prefer you made your own, as offered to you in this project.

You can read more about the Mediator Pattern below:

 

http://social.technet.microsoft.com/wiki/contents/articles/13213.mediator-design-pattern.aspx

In this example, it sends messages between two ViewModels. When you update either TextBox, it sends a message out of the change. Each ViewModel has listeners for the other ViewModel, and updates with each-other's changing values. In reality this Scenario would normally have both TextBoxes Text bound to a property in the shared parent ViewModel, but this example is about VM-VM communication, which you can't do through bindig over the "visible" (up or across) VisualTree.

4. EventToCommand

Another missing link in MVVM is executing Commands from RoutedEvents.

Some 3rd party DLL options are System.Windows.Interactivity (Expression Blend) or MVVMLite.

If you prefer to keep your application light, here is a simple solution to add your own EventToCommands.

This method simply uses three Attached Properties.

 

<TextBlock Text="Click me, EventToCommand, pass param" FontSize="16" FontWeight="Bold" TextWrapping="Wrap" Width="150"
            HorizontalAlignment="Center" VerticalAlignment="Center" Cursor="Hand" Background="AliceBlue"
        helper:EventToCommand.Event="UIElement.MouseLeftButtonDown"
        helper:EventToCommand.CommandParameter="{Binding Text, ElementName=textboxB}"
        helper:EventToCommand.Command="{Binding EventedCommand1}" />
 

Event is the RoutedEvent to trigger on

Command is the ICommand to execute

CommandParameter is optional - If not included, the EventArgs will be passed.

 

Solution Map

Please help yourself to these essential MVVM tools.

Download: http://gallery.technet.microsoft.com/VERY-Easy-MVVM-MVVMExtraLit-54353183

Please rate (star) the sample, at the top of the download page. Thanks!