Introduction

The purpose of this article is to provide a clear and practical understanding of the MVVM pattern in a concise manner.  This will be accomplished by walking through a simple WPF MVVM application in two parts.  Part one will focus on MVVM basics.  Part two will add Commanding to the application.

 

Intended Audience

• Developers getting started with the MVVM pattern
• MVVM veterans looking to introduce the pattern to their team

What is MVVM ?

• An architectural separation pattern
• A variant of the Model-View-Controller that leverages Data Binding

Parts of the MVVM Pattern

View

• User Interface

View Model

• Presentation Logic
• State

Model

• Data
• Business Logic

 

Summary of Interaction

Simply put, the View is your application’s user interface.  It is the portion of the application that is your users will use to interact with application data.  The Model is your data layer.  It is comprised of the data model, business objects, business logic, and the data access mechanisms.  This brings us to the View Model which resides between the View and the Model.  The View Model’s main purpose is to expose data from the Model to the view.  Additionally, it holds application state. 

 

Sample MVVM Application

Now that you have a good grasp of the three parts to an MVVM application, let’s take a look at a simple application that puts this pattern into practice.  We’ll walk through a WPF application that will be used to view and modify customer information.  The following is a description of the application parts from bottom (Data) to top (UI).

Model

This consists of a Customer class business object and a data service class which exposes methods to read and write the customer data from the data store. 

 

 

View Model

The View Model is a simple class that gets the Customer data from the CustomerDataService and exposes it to the View via a “Customers” property.  The View “attaches” itself to these properties via Data Binding.

It implements the INotifyPropertyChanged interface which is used to let the View know that a change has been to one of it’s properties.

As mentioned earlier, the View Model also holds state.  In this application, we are interested in knowing which customer is currently being edited by the user.  This state will be captured in the View Model property “CurrentCustomer.”

 

View

The Customers View has the following controls:

Data Grid

An editable control that displays customer data.  It is bound to the “Customers” property of the View Model.  Each row represents one Customer.

Image Control

Displays the picture of the Customer that is currently being edited.  This control is bound to the “CurrentCustomer” property of the View Model.

Customer Count Label

Bound to the “CustomerCount” property of the View Model.

Load Customers Button

Invokes the GetCustomers method of the View Model. 

Save Button

Invokes the SaveCustomers method of the View Model.

 

Data Binding Implementation

As mentioned previously, the View “attaches” itself to the View Model’s properties via Data Binding.  In order to make this happen, the View Model is set to the View’s DataContext.  DataContext is a member of FrameworkElement as sets the context of data binding. 

 

Once the DataContext has been set, the View’s control’s can bind to the View Model’s properties by name:

 

Summary

We’ve covered the three parts of the MVVM pattern at a high level.  The sample application demonstrates how the Model, View and View Model work together.  In my opinion, one the best ways to learn a pattern is to step through a working app.  Please download the source code and do just that.

In Part 2, we will add Commanding to this application.