MVVM light toolkit (Silverlight edition) posted

by Laurent Bugnion via Silverlight on 6/16/2009 10:17:42 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.

For more details about the MVVM light toolkit, check this initial blog post.

Also, a web page will be extended over the next few days, and everything will be announced in this blog, so stay tuned.

Manual Installation

To install the toolkit manually, please follow the steps.

For Windows Presentation Foundation

Check this post.

For Silverlight

1. Download the GalaSoft.MvvmLight DLL and copy it in a folder of your choice (for example c:\data\mvvm\silverlight).
   Note that this is NOT the same as the WPF version. Do not mix the two up. Event though the code is almost identical, this assembly is compiled against Silverlight, not Windows Presentation Foundation.
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, into the Silverlight 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\Silverlight\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, into the Silverlight 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\Silverlight\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”.
   Note: These are the same snippets as for WPF. You might have installed them already.
   - Creating a new property raising the PropertyChanged event.
   - Creating a new ViewModel into the ViewModelLocator class.
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.

Getting started in Silverlight

The procedure in Silverlight is extremely similar to the one in WPF. The goal is to have a process which is as similar as possible, as well as the source code.

Creating a new MVVM application

• In Visual Studio 2008, select the menu File, New, Project. Under the Silverlight/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.

• Because of a bug in Silverlight Project Templates, some additional manual steps are needed:
  • Right click on the Silverlight project in the Solution explorer and select Properties

• In the project properties, set the Startup Object to the correct choice.

• Set the Xap file name to [YourProjectName].xap

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

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 Silverlight/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 Silverlight version of the application, a new View is a new UserControl. If you need a more finely granulated user interface, you can link the ViewModel to other UI elements. This scenario is not supported by the toolkit, however, and requires some manual work.

Note also that the toolkit does not support navigation out of the box. This is because there are many ways to do navigation in Silverlight. The project can easily be modified to integrate your preferate way to do navigation.

To add a new UserControl-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 Silverlight/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.