MVVM Using WPF - Part 1

Pattern Introduction & Basic Application

The MVVM (Model View View-Model) architectural pattern is available for many modern UI development platforms (E.g. XAML and HTML – HTML however requires data binding libraries E.g. AngularJS or KnockoutJS while XAML supports this natively).  This tutorial will focus on XAML as the view markup language in the MVVM pattern without any framework or external libraries.

XAML provides built in separation of page logic and UI markup with the use of the code behind file but this is still tightly coupled together. Using a View-Model you are able to abstract the business logic but still do it with view friendly objects. The key here is the bindings and commands as they are the glue between your view markup and the view-model.

Not only is this approach complimentary to SoC principle and Object-oriented design but another benefit is that unit test (Discussed in Part 2) done on the View-Model includes the presentation tier without being affected by the view markup itself. This layer also provides decent opportunities for integration and acceptance test automation.

At the center of this pattern lies the View-Model layer. This layer exposes the business logic in a view/page specific context. This layer consists mainly out of two types of objects:

1. Model Objects, these can be reused between multiple View-Models that represent entities or groupings in your application. Typically these will be your Object Oriented Objects that supports view bindings.    
2. View-Model, this is wrapper class that facilitates interaction with the Model and View by exposing the model business logic in a view abstracted layer using the command pattern and the Model Objects. Typically each class will represent a specific page or component in the view.

WPF MVVM - Basic Application

This tutorial will show you how to create a basic MVVM WPF student info application. The final artifacts required by this solution will look as follows:

• Start by creating you view markup without defining the bindings yet. See the bullet-point for markup examples with bindings.

• Create a new Class Library for your View-Model layer (MVVMExample.ViewModels):

•  Creating a new View-Model object class (Student.cs)

 

As these objects need to be bound to the view it is important use the correct implementation of the INotifyPropertyChanged so that changes are effectively updated to all affected view bindings.

Create a few basic properties and actions for the student model object. You will see that the DelegateCommand cannot be resolved, we will add that next.

 

• We are going to use the command pattern to trigger actions. This will be done using a new ICommand instance. For that we are going to create a custom DelegateCommand class. 

• Creating your View-Model 
  

This wrapper class needs to expose the View-Model objects and command implementations to interact with them. This will become the data context of the view page it is designed for. There are a couple of MVVM frameworks that can facilitate MVVM tasks (E.g. Prsim, MVVM Light Toolkit), MVVM Foundation, Core MVVM). You can see a comparison here).

Next we need to define the command/s we will be using from the view. In this case we want to be able save the student data. We will use the DelegateCommand we created earlier with override functions. You can see they were passed in the previous snippet as closures (They execute in the parent object even though they are declared as part of the child).

• Now to visit your original view markup and add the bindings and Data Context of the view to the newly created View-Model.

In MVVM Using WPF – Part 2 we will add some Unit Tests using NUnit.

Code for this post is available from GitHub.

I found the following examples very useful during the creation of this blog post, thanks guys.

• MVVM (Model View View-Model) Simplified
• MVVM Pattern Made Simple
• A Ruby on Rails MVVM Windows Store Application example by Frank