Click here to Skip to main content
15,917,862 members
Articles / MVVM

MVVMLight Hello World in 10 Minutes

Rate me:
Please Sign up or sign in to vote.
4.86/5 (27 votes)
30 Jan 2012CPOL 103.2K   28   6
This article shows a trivial "Hello World" MVVM WPF application using the MVVM Light library.

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):

XML
<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:

C#
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:

XML
<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:

XML
<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.

This article was originally posted at http://www.lapthorn.net/archives/579

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
United Kingdom United Kingdom
Jack of all trades.

Comments and Discussions

 
GeneralDoesn't seem to respect the MVVM pattern Pin
Member 1374122328-Mar-18 4:32
Member 1374122328-Mar-18 4:32 
SuggestionYou have missing images in your article Pin
spwan5id9-Oct-13 10:06
spwan5id9-Oct-13 10:06 
GeneralRe: You have missing images in your article Pin
Barry Lapthorn13-Nov-13 2:58
protectorBarry Lapthorn13-Nov-13 2:58 
QuestionToo simple Pin
leiyang-ge8-May-13 22:57
leiyang-ge8-May-13 22:57 
GeneralMy vote of 4 Pin
Member 87854573-Apr-12 22:51
Member 87854573-Apr-12 22:51 
Good simple example
GeneralMy vote of 3 Pin
giumi7-Mar-12 20:13
giumi7-Mar-12 20:13 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.