Click here to Skip to main content
Click here to Skip to main content

Tagged as

Go to top

MVVMLight Hello World in 10 Minutes.

, 30 Jan 2012
Rate this:
Please Sign up or sign in to vote.
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):

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

License

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

Share

About the Author

Barry Lapthorn

United Kingdom United Kingdom
Jack of all trades.

Comments and Discussions

 
SuggestionYou have missing images in your article PinmemberMember 35214479-Oct-13 10:06 
GeneralRe: You have missing images in your article PinprotectorBarry Lapthorn13-Nov-13 2:58 
QuestionToo simple Pinmemberleiyang-ge8-May-13 22:57 
GeneralMy vote of 4 PinmemberMember 87854573-Apr-12 22:51 
GeneralMy vote of 3 Pinmembergiumi7-Mar-12 20:13 

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

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

| Advertise | Privacy | Mobile
Web04 | 2.8.140921.1 | Last Updated 30 Jan 2012
Article Copyright 2012 by Barry Lapthorn
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid