MVVM light toolkit for WPF and Silverlight

by Laurent Bugnion via Silverlight on 6/14/2009 10:17:28 PM

To make development of WPF and Silverlight applications according to the Model-View-ViewModel pattern easier, I have put together a small toolkit which should speed up the creation of such applications by automating certain tasks.

The toolkit must be installed manually for now. My next task is to prepare an installer, which should allow installing everything automatically, and also checking for upgrades, upgrading automatically and uninstalling the toolkit. For now however, a little manual work must be done.

In the next few days…

This article refers to the WPF version of the MVVM light toolkit. In the next few days I will post the Silverlight version.

Update: The Silverlight version has been published.

My next priority is to create an installer which will automate the installation process.

I also want to create and write about a few sample applications related to the toolkit. There is a lot to be said and demoed about MVVM in general, and this toolkit in particular. I am impatient and curious to see what direction future development will take. I have a few ideas I would like to add to the toolkit, more about that later.

Feedback

I am as always very interested in feedback, so do not hesitate to post a comment here, or contact me to start a discussion.

To be completely honest, I do not intend to add a lot of features to the toolkit. First, I am intrigued by new developments in Expression Blend 3 that I will keep under scrutiny, to see how they influence (or make obsolete) some of the features of this toolkit. Also, WPF 4 and Silverlight 3 will change the game of MVVM by (hopefully) integrating some of the concepts into the framework and making it an even more natural fit.

HOWEVER let’s keep the discussion rolling, so you know what to do if you like, dislike or want to change something in the toolkit ;)

Features

The community and Microsoft already have a few MVVM initiatives running. However, I didn’t find any completely satisfying for my particular set of requirements. Most importantly, I work as an integrator in WPF and Silverlight projects, and I use Expression Blend a lot. My toolkit is finely tuned to make working in Expression Blend much easier, for designers and developers. For instance, it allows creating design time data very easily, in order to facilitate design work. To be honest, I have been using some of the classes and concepts gathered here for quite some time already, but this is the first time that I have a clean, complete kit of features related to MVVM.

I spent a lot of time making the syntax and the features in the toolkit as compatible as possible between WPF and Silverlight. Most of the code can be shared between WPF and Silverlight. Minor changes are needed in XAML, but the ViewModels are compatible (as long as you don’t use WPF-only or Silverlight-only features of course).

Also included in the toolkit, you will find a Messenger making it super easy to enable communication between classes. Using the Messenger class and the classes in the GalaSoft.MvvmLight.Messaging namespace, you can broadcast messages to instances who registered for a particular type of message without worrying about dependencies or memory leaks.

Since it is a “light” toolkit, it should be quite easy for you to modify it to suit your own needs. Do not hesitate to inspire yourself from this code, or to modify it at will.

Manual Installation

To install the toolkit manually, please follow the steps.

For Windows Presentation Foundation

1. Download the GalaSoft.MvvmLight DLL and copy it in a folder of your choice (for example c:\data\mvvm\wpf).
   Note that this is NOT the same as the Silverlight version. Do not mix the two up. Event though the code is almost identical, this assembly is compiled against WPF, not Silverlight.
2. Download the project template. To make it available in Visual Studio, locate your project templates folder. By default it is located into your “My Documents” folder, into a folder named “Visual Studio 2008/Templates”. Into the ProjectTemplates folder, create a new folder named Mvvm and copy the project template into this new folder. Do not unzip the file, simply copy the zip file as is.
   In Windows 7, the full path would be “C:\Users\[user_name]\Documents\Visual Studio 2008\Templates\ProjectTemplates\Mvvm”
3. Download each item template (listed below). To make them available in Visual Studio, locate your item templates folder. By default it is located into your “My Documents” folder, into a folder named “Visual Studio 2008/Templates”. Into the ItemTemplates folder, create a new folder named Mvvm and copy all the item templates into this new folder. Do not unzip the files, simply copy the zip files as is.
   In Windows 7, the full path would be “C:\Users\[user_name]\Documents\Visual Studio 2008\Templates\ItemTemplates\Mvvm”.
   - MVVM View Template
   - MVVM ViewModel Template
   - MVVM ViewModel Locator Template
4. Download the code snippets. To make them available in Visual Studio, locate your code snippets folder. By default it is located into your “My Documents” folder, into a folder named “Visual Studio 2008/Code Snippets/Visual C#/My Code Snippets”. Copy all the snippets into this folder.
   In Windows 7, the full path would be “C:\Users\[user_name]\Documents\Visual Studio 2008\Code Snippets\Visual C#\My Code Snippets”.
   - Creating a new property raising the PropertyChanged event.
   - Creating a new ViewModel into the ViewModelLocator class. Note: These are the same snippets as for Silverlight. You might have installed them already.
   
5. If you are interested, you can also download the source code for the GalaSoft.MvvmLight classes (this is optional).
   Note: The source code includes the WPF and the Silverlight version of the toolkit, all in one assembly, and also unit tests.

For Silverlight

The instructions for Silverlight are posted in another blog post.

Getting started in WPF

Creating a new MVVM application

• In Visual Studio 2008, select the menu File, New, Project. Under the Mvvm section, select the MvvmLight project template.

• Add a reference to the GalaSoft.MvvmLight assembly that you installed before. This manual step is needed for the moment, until an installer is created.

• Press Ctrl-F5 to run the application. This sample application can be modified as needed.

Note: The application is localized in French for demo purposes. This can easily be changed in the code.

Adding a new ViewModel

If you need a new ViewModel in the MVVM application, follow the steps:

• In Visual Studio, in the Solution explorer, right click on the ViewModel folder and select Add, New Item from the context menu.
• Under Mvvm, select the MvvmViewModel template.
• Enter a name for the new ViewModel and press OK.

• Open the ViewModelLocator class (in the ViewModel folder).
• At the end of the class, type mvvmlocatorproperty to select the corresponding code snippet.

• Press the Tab key to expand the snippet.
• The first replacement in the snippet is the type of the ViewModel you just created.
• Use tab to select the second replacement.
• The second replacement in the snippet is the name of the attribute that will hold the value of the ViewModel. You can choose any identifier suitable for an attribute (field).
• Use tab to select the third replacement.
• The third replacement is the name of the property that you will bind your View’s data context to. Here too you can choose any identifier suitable for a property.

Of course you also need to initialize your ViewModel by entering code in the constructor.

Adding a new View

Of course a ViewModel is tightly associated to a View. After adding a ViewModel, you probably want to add a new View too. In the WPF version of the application, a new View is a new Window. If you need a more finely granulated user interface, you can link the ViewModel to a UserControl instead, or even to other UI elements. This scenario is not supported by the toolkit, however, and requires some manual work.

To add a new Window-based view in the application, follow the steps:

• In Visual Studio, in the Solution explorer, right click on the project and select Add, New Item from the context menu.
• Under Mvvm, select the MvvmView template.
• Enter a name and then press OK.

• Open the newly created XAML file.
• Modify the DataContext property to link to the ViewModel property that you added above.

Adding a new bindable property into a ViewModel

Finally, you probably want to add bindable properties in your ViewModel. Follow the steps:

• Open the ViewModel you added before.
• Type mvvminpc to select the corresponding code snippet (“inpc” stands for INotifyPropertyChanged ;))

• Press the tab key to expand the snippet.
• The first replacement is the name of the property that you will bind to.
• Press the tab key to select the second replacement.
• The second replacement is the type of the new property.
• Press the tab key to select the third replacement.
• The third replacement is the name of the attribute that will hold the value of the property. You can choose any identifier suitable for an attribute (field).
• Press the tab key to select the fourth replacement.
• The fourth replacement is the initial value for the property (if any). You can also delete the default value altogether.