MVVM Light V3 on NuGet (now with WP7 support) : Silverlight Feeds

MVVM Light V3 on NuGet (now with WP7 support)

by Laurent Bugnion via Silverlight on 5/7/2011 8:18:31 PM

There was already a version of MVVM Light on Nuget before. However the old version did not support Windows Phone 7. This is now corrected. Also the new version now adds a ViewModelLocator to your project and includes it in App.xaml.

What is NuGet?

NuGet is a mechanism allowing to add packages (assemblies, source code…) to an existing project. All versions of MVVM Light are supported (WPF3.5, WPF4, Silverlight 3, Silverlight 4, Windows Phone 7).

In order to install NuGet and learn more about this cool package manager, go to http://nuget.org

Finding and installing MVVM Light with NuGet

To find MVVM Light in NuGet, follow the steps:

Open your project in Visual Studio 2010.
Right click on the References folder and select “Add Library Package Reference” from the context menu.

Note: Should that menu item be missing, you need to install the NuGet package manager. Go to http://nuget.org and follow the indications.

In the “Search Online” field, enter “mvvmlight” and press Enter.
Select the MVVM Light package and press the Install button.

After these steps, the following changes have been made to your project:

A “packages” folder was added with the following libraries. Note that this folder is added to the root of the project structure and does not appear in the Solution Explorer.
- The MVVM Light DLLs: GalaSoft.MvvmLight and GalaSoft.MvvmLight.Extras.
- The referenced System.Windows.Interactivity.dll, needed by the GalaSoft.MvvmLight.Extras assembly.
A ViewModel folder was added with two additional classes:
- ViewModelLocator.cs
- MainViewModel.cs
The App.xaml file was modified with the addition of the ViewModelLocator as global resource.

Binding the DataContext in XAML

With the new file structure, the ViewModelLocator is exposed in App.xaml (global resources) and can be used as the source of the DataContext bindings.

The MainViewModel that has also been added to the project is exposed in the ViewModelLocator as a property. for more details about this architecture, please refer to Understanding the MVVM pattern and Deep Dive MVVM.

Note: In case you do not need the MainViewModel in your project, feel free to remove this class.

In order to use the MainViewModel as the DataContext of the MainPage or MainWindow, use the following steps:

Open MainPage.xaml or MainWindow.xaml.
Add the following line to the opening tag of the MainPage/MainWindow:

DataContext="{Binding Main, Source={StaticResource Locator}}"

From now on, the DataContext of the MainPage/MainWindow is set to the instance of MainViewModel exposed by the ViewModelLocator. These steps can be repeated at will with different views/viewmodels pairs.

Binding the DataContext in Blend

The DataContext can also be databound visually in Expression Blend with the following steps.

Open your project in Blend.
Build the application.
Open MainPage/MainWindow.
In the Objects and Timeline panel, select the UserControl.
In the Properties panel, select the DataContext property (in the Common Properties section).
Click on the small Advanced options peg right of the property field and select Data Binding from the context menu.

In the Data Binding editor, select the Data Field tab and the Locator data source. Note: If you don’t see the Locator field, you need to build the project.

In the Fields area, expand the ViewModelLocator and select the Main property. Then press OK to close the Data Binding editor.

Installing without the ViewModel folder (libraries only)

Some users prefer to work without a ViewModelLocator, and are only interested in the MVVM Light assemblies. Unfortunately there is not really a way to specify options when using NuGet. So I created a different “barebone” package, named “MvvmLightLibs” which contains only the libraries and nothing else. To install this “barebone” version, follow the steps above, but select “MvvmLightLibs” instead of MvvmLight.