Click here to Skip to main content
15,860,972 members
Articles / Desktop Programming / WPF

WPF: MVVM (Model View View-Model) Simplified

Rate me:
Please Sign up or sign in to vote.
4.69/5 (87 votes)
20 May 2009CPOL4 min read 436.5K   13.6K   186   65
Provides a clear and simple sample that clearly illustrates MVVM and its usage

Introduction

A few months ago, I took the leap from WinForms programming to WPF and quite naturally, I took to it like a duck to water. Well, to be honest I had been developing Silverlight applications since its inception and being that Silverlight is a subset of WPF, it required a low learning curve to catch on. However, the concept of Commanding was a bit different in WPF and I soon began to see how much more powerful Commanding in WPF was compared to Silverlight.

One of the areas in which Commanding is exemplary is in the way in which it complements MVVM. But what is MVVM, and why is it useful? This is the toughest concept (in my opinion) to grasp when it comes to WPF (and Silverlight) programming. Why you ask? Because it is simple and as developers we often like code or concepts that warp our minds, so when we figure it out we can brag to our peers how it only took 2 hours to understand and implement the next BIG thing (no I am not projecting). On a side note, I have found that everyone who blogs about MVVM complicates it by adding too much code which just throws you for a loop. Simplicity is the key to all things complicated. So let’s delve into a little theory and we will finish up with some short-to-the-point code.

Purpose

The purpose of this post is to:

  1. Give a simple and clear definition of Model View View-Model
  2. Provide a clear and simple sample that clearly illustrates MVVM usage

MVVM?

clip_image001.gif

Figure 1.

Just in case you cannot read the text in the image here it is below:

  1. The View holds a reference to the ViewModel. The View basically displays stuff by Binding to entities in the View Model.
  2. The ViewModel exposes Commands, Notifiable Properties, and Observable Collections to the View. The View Binds to these ViewModel entities/members
  3. The Model is your data and/or application objects that move data while applying Application Logic. If you have a Business Layer, then you might not need this.

Above is a simple figure that tells you exactly what MVVM is. In my own words, the ViewModel is the most significant in the entire pattern as it is the glue that sits between the View and the Model and binds both of them together. Now let’s explore some code.

Code

The application you are about to see is very intricate in design and implementation and as such must not be criticized by anyone. Here is an overview of what the application does. It takes your first name, last name and age and displays it to you in a message box. Below is the really complicated class diagram.

ClassDiagram1.png

Figure 2.

Let’s take a look at the PersonModel class which is the only Model in the application:

C#
namespace OliverCode.MVVM.Model 
{ 
    internal class PersonModel : System.ComponentModel.INotifyPropertyChanged 
    { 
        private string firstName; 
        public string FirstName 
        { 
            get { return firstName; } 
            set 
            { 
                firstName = value; 
                OnPropertyChanged("FirstName"); 
            } 
        } 
        private string lastName; 
        public string LastName 
        { 
            get { return lastName; } 
            set 
            { 
                lastName = value; 
                OnPropertyChanged("LastName"); 
            } 
        } 
        private int age; 
        public int Age 
        { 
            get { return age; } 
            set 
            { 
                age = value; 
                OnPropertyChanged("Age"); 
            } 
        } 
#region INotifyPropertyChanged Members 
        public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged; 
        private void OnPropertyChanged(string propertyName) 
        { 
            if (PropertyChanged != null) 
                PropertyChanged(this,
                    new System.ComponentModel.PropertyChangedEventArgs(propertyName)); 
        } 
#endregion 
    } 
}

Person class implements the INotifyPropertyChanged interface which enables a WPF element to be immediately notified if any of the properties changed on a Person object.

Moving on… Let’s look at the View which is cleverly named, PersonView (quite creative if I might add).

XML
<UserControl x:Class="OliverCode.MVVM.View.PersonView" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
Height="Auto" Width="Auto" 
xmlns:local="clr-namespace:OliverCode.MVVM.ViewModel"> 
<StackPanel Orientation="Vertical" Margin="4"> 
<!--Here is where the view gets a reference to the ViewModel Declaratively--> 
<StackPanel.DataContext> 
<local:PersonViewModel /> 
</StackPanel.DataContext> 
<StackPanel Orientation="Vertical" DataContext="{Binding Path=Person, Mode=TwoWay}"
    Margin="4"> 
<StackPanel Orientation="Horizontal"> 
<Label Content="First Name:" Margin="0,0,4,0"/> 
<TextBox Width="250" Text="{Binding Path=FirstName}"/> 
</StackPanel> 
<StackPanel Orientation="Horizontal" Margin="0,5,0,0"> 
<Label Content="Last Name:" Margin="0,0,4,0"/> 
<TextBox Width="250" Text="{Binding Path=LastName}"/> 
</StackPanel> 
<StackPanel Orientation="Horizontal" Margin="0,5,0,0"> 
<Label Content="Age:" Margin="35,0,4,0"/> 
<TextBox Width="50" MaxLength="3" Text="{Binding Path=Age}"/> 
</StackPanel> 
</StackPanel> 
<StackPanel> 
<!—The Command is bound to the Property in the PersonViewModel call SavePersonCommand--> 
<Button Content="Save" HorizontalAlignment="Right" Width="80"
   Command="{Binding Path=SavePersonCommand}"/> 
</StackPanel> 
</StackPanel> 
</UserControl>

The key take away from the XAML above is the way the PersonViewModel is attached to the PersonView’s DataContext. (This is the typical means by which the View gets a reference to the ViewModel.) Also pay attention to the Button element whose Command is using the Binding class to attach the SavepersonCommand, which is a property on the ViewModel. Typically, binding to a command is more complicated than this, but because of the WPF MVVM Toolkit 1.0 (which is located here) from the Microsoft Team, developers can now easily Bind to commands. I have included the DelegateCommand class in the project so you don't need to download it directly. There is also a CommandReference class whose purpose is to resolve limitations in WPF when binding data from XAML. (This is not used in the program.)

WPF MVVM Toolkit 1.0 Tidbits

There are several classes in the toolkit but the one you should pay attention to is the DelegateCommand. This class makes it easy to write a function to handle a gesture or command. Gestures can be thought of as any interaction that can initiate a command. I use the DelegateCommand directly in my PersonViewModel like so:

C#
private DelegateCommand savePersonCommand; 
public ICommand SavePersonCommand 
{ 
    get 
    { 
        if(savePersonCommand == null) 
            savePersonCommand = new DelegateCommand(new Action(SaveExecuted), 
                new Func<bool>(SaveCanExecute)); 
        return savePersonCommand; 
    } 
} 
public bool SaveCanExecute() 
{ 
    return Person.Age > 0 && !string.IsNullOrEmpty(Person.FirstName) && 
        !string.IsNullOrEmpty(Person.LastName); 
} 
public void SaveExecuted() 
{ 
    System.Windows.MessageBox.Show(string.Format("Saved: {0} {1} - ({2})",
        Person.FirstName, Person.LastName, Person.Age)); 
}

Here is the entire personViewModel class:

C#
namespace OliverCode.MVVM.ViewModel 
{ 
    internal class PersonViewModel 
    { 
        public PersonModel Person { get; set; } 
        private DelegateCommand savePersonCommand; 
        public ICommand SavePersonCommand 
        { 
            get 
            { 
                if(savePersonCommand == null) 
                    savePersonCommand = new DelegateCommand(new Action(SaveExecuted),
                        new Func<bool>(SaveCanExecute)); 
                return savePersonCommand; 
            } 
        } 
        public PersonViewModel() 
        { 
            //This data will load as the default person from the model attached to
            //the view 
            Person = new PersonModel 
			{ FirstName = "John", LastName = "Doe", Age = 999 }; 
        } 
        public bool SaveCanExecute() 
        { 
            return Person.Age > 0 && !string.IsNullOrEmpty(Person.FirstName) && 
                !string.IsNullOrEmpty(Person.LastName); 
        } 
        public void SaveExecuted() 
        { 
            System.Windows.MessageBox.Show(string.Format("Saved: {0} {1} - ({2})", 
                Person.FirstName, Person.LastName, Person.Age)); 
        } 
    } 
}

Simple, isn't it? I hope I have helped someone by saving them hours trying to find a simple demonstration of MVVM in WPF. Don't forget to check out http://olivercode.wordpress.com/.

Thank you and happy coding.

History

  • 20th May, 2009: Initial post

License

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


Written By
Software Developer (Senior) 4CoreDev
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralRe: My vote of 1 Pin
Salam633110-Jan-12 23:13
professionalSalam633110-Jan-12 23:13 
GeneralRe: My vote of 1 Pin
Vivek Krishnamurthy24-Feb-12 20:55
Vivek Krishnamurthy24-Feb-12 20:55 
GeneralMy vote of 5 Pin
JustinYip22-Aug-10 23:35
JustinYip22-Aug-10 23:35 
GeneralMy vote of 1 Pin
Nikolaj Lynge Olsson27-May-10 20:18
Nikolaj Lynge Olsson27-May-10 20:18 
GeneralRe: My vote of 1 Pin
robsammons31-Mar-11 2:56
robsammons31-Mar-11 2:56 
QuestionRevision for Visual Studio 2010 .Net 4.0? Pin
Fresh Mexican Food Fan20-Apr-10 4:56
Fresh Mexican Food Fan20-Apr-10 4:56 
GeneralMy vote of 1 Pin
Member 39667831-Mar-10 12:04
Member 39667831-Mar-10 12:04 
GeneralNever mind... Pin
Les Pinter25-Mar-10 5:52
Les Pinter25-Mar-10 5:52 
Dear Oliver,

Two minutes after sending you my request for a look at my hand-typed version of your project, I found that I had inserted the button linked to the command object one level too deeply inside the StackPanel, causing it to be hidden from the outer StackPanel DataContext.

I was under the misapprehension that because of tunneling and bubbling, WPF would find my command. It won't. Silly me. Which makes my point: The things that can go wrong in WPF are subtle. However, your article had nothing to do with it.

Anyway, thanks again for the excellent article, which has shown me precisely how WPF commands work.

Les
GeneralThis article help me a lot to understand MVVM Pin
Member 436133015-Feb-10 19:19
Member 436133015-Feb-10 19:19 
GeneralVery helpful Pin
Maurizio Reginelli3-Jan-10 9:48
Maurizio Reginelli3-Jan-10 9:48 
GeneralNice starter. Pin
David Catriel1-Dec-09 10:58
David Catriel1-Dec-09 10:58 
GeneralBy jove, I think I've got it! Pin
Kittiewan29-Nov-09 10:38
Kittiewan29-Nov-09 10:38 
GeneralA good intro to MVVM, but a minor nitpick. Pin
Pete O'Hanlon27-Nov-09 1:44
subeditorPete O'Hanlon27-Nov-09 1:44 
GeneralNice! Succinct! Pin
Keith Fletcher18-Oct-09 17:06
Keith Fletcher18-Oct-09 17:06 
GeneralWhen you never heard of MVVM then this article is great. Pin
jbe822422-Aug-09 8:08
jbe822422-Aug-09 8:08 
GeneralVery Good Pin
Member 456543330-Jul-09 8:24
Member 456543330-Jul-09 8:24 
GeneralThank you. Simple and to the Point Pin
emadm1-Jun-09 10:51
emadm1-Jun-09 10:51 
QuestionCan somebody explain? Pin
Yury Goltsman27-May-09 4:42
Yury Goltsman27-May-09 4:42 
AnswerRe: Can somebody explain? Pin
rmgalante24-Oct-09 6:45
rmgalante24-Oct-09 6:45 
GeneralRe: Can somebody explain? Pin
Yury Goltsman24-Oct-09 7:01
Yury Goltsman24-Oct-09 7:01 
QuestionBinding to the DataModel or to the ViewModel ? Pin
vladisld21-May-09 20:42
vladisld21-May-09 20:42 
AnswerRe: Binding to the DataModel or to the ViewModel ? Pin
Alphakoda22-May-09 4:18
Alphakoda22-May-09 4:18 
GeneralRe: Binding to the DataModel or to the ViewModel ? Pin
Jacob Stanley26-May-09 16:49
Jacob Stanley26-May-09 16:49 
GeneralRe: Binding to the DataModel or to the ViewModel ? Pin
Alphakoda26-May-09 18:12
Alphakoda26-May-09 18:12 
GeneralRe: Binding to the DataModel or to the ViewModel ? PinPopular
Jacob Stanley31-May-09 3:17
Jacob Stanley31-May-09 3:17 

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.