MVVMLight Hello World in 10 Minutes

This article shows a trivial ‘Hello World’ MVVM WPF application using the MVVM Light library.

The code is on github (linked at the bottom of the article). 

Getting Started

• Firstly, start VS2010, and create a new WPF project.
• Ensure that you have Nuget installed.
• Manage Nuget Package References and add ‘MVVM Light’

MVVM Light has now added a ViewModel folder containing the MainViewModel and the ViewModelLocator.

Edit the Main Window

Simply add a button, and defer the DataContext binding to the ViewModelLocator (elided):

<Window x:Class="MvvmLightTest.MainWindow"
        DataContext="{Binding Main, Source={StaticResource Locator}}">
    <Grid>
        <Button Command="{Binding ShowPopUp}" Content="Show Pop Up" />
    </Grid>
</Window>

Then, in the MainViewModel, we define the ShowPopUp command:

public class MainViewModel : ViewModelBase
{
    public MainViewModel()
    {
        ShowPopUp = new RelayCommand(() => ShowPopUpExecute(), () => true);
    }

    public ICommand ShowPopUp { get; private set; }

    private void ShowPopUpExecute()
    {
        MessageBox.Show("Hello!");
    }
}

The MainViewModel inherits from the ViewModelBase class which also gives us the RaisePropertyChanged method, which we would call if we change the value of a property that we bind to (see this CodeProject article for more information). An example of property data-binding is also included in the example code.

How Does All This Work?

Firstly, our App.xaml contains an application wide instance of the ViewModelLocator:

<Application x:Class="MvvmLightTest.App"
             xmlns:vm="clr-namespace:MvvmLightTest.ViewModel"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <vm:ViewModelLocator x:Key="Locator" d:IsDataSource="True" />
    </Application.Resources>
</Application>

We then defer the DataContext binding to the ViewModelLocator (elided) in the MainWindow:

<Window x:Class="MvvmLightTest.MainWindow"
        DataContext="{Binding Main, Source={StaticResource Locator}}">
    <Grid>
        <Button Command="{Binding ShowPopUp}" Content="Show Pop Up" />
    </Grid>
</Window>

This simply returns the static instance of the MainViewModel held in the ViewModelLocator instance.

The example code is on github.