MVVMLight Hello World in 10 Minutes.

A Technical Blog article. View original blog here.[^]

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

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!");
    }
}

Compile the code, and we get:

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>