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:

Give a simple and clear definition of Model View View-Model

Provide a clear and simple sample that clearly illustrates MVVM usage

MVVM?

Figure 1.

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

The View holds a reference to the ViewModel. The View basically displays stuff by Binding to entities in the View Model.

The ViewModel exposes Commands, Notifiable Properties, and Observable Collections to the View. The View Binds to these ViewModel entities/members

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.

Figure 2.

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

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

<UserControlx: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"><StackPanelOrientation="Vertical"Margin="4"><!--Here is where the view gets a reference to the ViewModel Declaratively--><StackPanel.DataContext><local:PersonViewModel/></StackPanel.DataContext><StackPanelOrientation="Vertical"DataContext="{Binding Path=Person, Mode=TwoWay}"Margin="4"><StackPanelOrientation="Horizontal"><LabelContent="First Name:"Margin="0,0,4,0"/><TextBoxWidth="250"Text="{Binding Path=FirstName}"/></StackPanel><StackPanelOrientation="Horizontal"Margin="0,5,0,0"><LabelContent="Last Name:"Margin="0,0,4,0"/><TextBoxWidth="250"Text="{Binding Path=LastName}"/></StackPanel><StackPanelOrientation="Horizontal"Margin="0,5,0,0"><LabelContent="Age:"Margin="35,0,4,0"/><TextBoxWidth="50"MaxLength="3"Text="{Binding Path=Age}"/></StackPanel></StackPanel><StackPanel><!—TheCommandisboundtothePropertyinthePersonViewModelcallSavePersonCommand--><ButtonContent="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:

the article is excellent and the code superb
I only have one question
when i change the content of the textboxes the binded properties fire the "set" declaration
of the property and thus firing the INotify methods.
but the Person Property doesnt implement this behaviour
how do I notify the Person property when i change one of its child properties?

Hey,
Nice Article But not Exactly MVVM
If you would have moved the implementation of System.ComponentModel.INotifyPropertyChanged
To PersonViewModel than the MVVM pattern would be complete
The person model shouldn't know anything about the view.

I see this everywhere. It's MVVM. Depending on your architecture you can decide where to put System.ComponentModel.INotifyPropertyChanged. What if one of your thread change something in your model ? You need System.ComponentModel.INotifyPropertyChanged in your model to be able to notify the modification on your view.

You are absolutely right this is MVVM but for me its still incomplete.
It depends on how you look at the Person model :a domain model which represents the real state content (an object-oriented approach), or the data access layer that represents that content.
In case of PersonModel being domain model, the example should have demonstrated data access layer,and in case of PersonModel being the data access point the INotifyPropertyChanged shouldn't be in it.

Really great article for beginner but i have confusion regarding display multiple records of same PersonView. for example right now it is display only one records inside stack panel but i would like to display set of Persons record in same look and feel in Listbox but i could able.