Adding MVVM Light with NuGet

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.

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.
  • Right click on the References folder and select “Manage Nuget Packages...” from the context menu.
20140227001

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 "Manage Nuget Packages" dialog, select "Online" on the right.
  • In the search field, enter “mvvmlight”.
  • Select the MVVM Light package and press the Install button (top choice; the other choices are explained further below).
Screenshot (146)

Screenshot (147)

 

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.
  • 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 Blend with the following steps.

  • Open your project in Blend.
  • Build the application.
  • Open MainPage/MainWindow.
  • In the Objects and Timeline panel, select the top element (Windows, Page, etc).
  • 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.

Advanced options peg

Data binding menu item

  • 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.
Selecting the Locator field

 

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

 

Installing without the ViewModel folder (libraries only)

If you add MVVM Light to an existing application, you might already have a ViewModelLocator and/or existing viewmodels. In that case, you should probably install the "libraries only" Nuget package. To install this “barebone” version, follow the steps above, but select "MVVM Light libraries only" instead of MVVM Light.

Installing portable class libraries

If you need to install the portable class libraries (PCL) version of MVVM Light, please follow the steps above and select "MVVM Light libraries only (PCL)"

Installing from the command line

There is also a way to use NuGet without Visual Studio, from the command line. A good description is available on this blog.

Happy coding!

Laurent