Developing a Windows Phone Application using the MVVM Pattern

On this page:	Download:
Audience | PetrolTracker Sample Application | The PetrolTracker Solution | Prism

This documentation and accompanying sample application will get you started building easily testable applications that target Windows® Phone OS 7.1. You will learn the basics of the Model View View-Model (MVVM) pattern and dependency injection through a sample application that enables you to track the petrol consumption of three vehicles. The sample application is authored two different ways so that you can see the progression from a code-behind implementation to a view model implementation whose dependencies are injected.

Some of the topics that you will learn about include the following:

• Application launching and closing events
• Saving and restoring page state
• The motivation for MVVM
• The MVVM pattern
• The benefits of MVVM
• Connecting view models to views
• Dependency injection
• Invoking commands from a view
• Invoking navigation from a view
• Displaying user interface notifications
• Abstracting the Windows Phone 7.1 SDK
• Unit testing MVVM applications

Audience

This documentation and accompanying sample application are best suited for developers with the following experience levels.

Some experience with:

• Microsoft® Visual C#® development tool
• Microsoft Silverlight® browser plug-in
• Windows Phone 7.0 or 7.1 SDK

Little or no experience with:

• The Model-View-ViewModel (MVVM) pattern
• Dependency injection

PetrolTracker Sample Application

This documentation includes a companion sample application named PetrolTracker. PetrolTracker is an application written in Silverlight for Windows Phone OS 7.1. You can download the code for PetrolTracker at the following link:

The PetrolTracker solution contains two implementations of the same application, along with supporting libraries. By creating and providing the same application authored two different ways, you can see the progression from a code-behind implementation, to a view model implementation whose dependencies are injected.

PetrolTracker enables you to track the petrol consumption of three sample vehicles. You can select one of three vehicles, add petrol fill-up data for the vehicle, and view the fill-up data in a list. The other option to view fill-up data is in charts that can be filtered by miles per gallon (MPG) and cost. However, the PetrolTracker application does not implement this feature, and instead uses hard-coded chart images. The following illustration shows the PetrolTracker application.

To run PetrolTracker you need to set the desired implementation, PetrolTracker.CodeBehind or PetrolTracker.MVVM, as the startup project in Solution Explorer in Microsoft Visual Studio® development system. No matter which version of the application you choose to run, the UI looks and operates exactly the same way.

On application startup, a splash screen is displayed while sample data is created and stored in isolated storage, if it does not already exist. Data changes are stored in isolated storage and thus persist between runs of the application. In addition, there is only limited data validation.

The sample data consists of three vehicles, each with an image, and four months of fill-up data. The latest fill-up record will be randomly dated at least a week prior to the current date, so that when you add fill-up data it will appear as normal usage.

The PetrolTracker Solution

The PetrolTracker solution organizes the source code and other resources into projects. The following table outlines the projects that make up the PetrolTracker solution.

Project	Description
PetrolTracker.CodeBehind	This project contains the code-behind implementation of the PetrolTracker application, and consists of views with supporting classes and resources.
PetrolTracker.Common	This project contains constants and the PageStateHelper class, which is used to retrieve and cast objects that are saved in page state. Both items are used by the code-behind and the MVVM implementations of the PetrolTracker application.
PetrolTracker.Model	This project contains the model classes used by both the code-behind and MVVM implementations of the PetrolTracker application.
PetrolTracker.SampleData	This project contains the DataGenerator class that is used to seed isolated storage with sample car fill-up data.
PetrolTracker.MVVM	This project contains the MVVM implementation of the PetrolTracker application, and consists of view models and views, along with supporting classes and resources.
PetrolTracker.MVVM.Adapters	This project contains facades for Windows Phone 7.1 SDK API functionality.
PetrolTracker.MVVM.Tests	This project contains mock service implementations and unit tests used for testing view model and model classes.

The Lib project folder contains compiled assemblies that the applications use.

Prism

Prism is a free library from the Microsoft patterns & practices group. The components in the library can help developers build applications for Windows Presentation Foundation (WPF), Microsoft Silverlight, and the Windows Phone platform that are easier to maintain and update as requirements change.

Prism was originally built to support composite application scenarios, where you might typically have a shell application and modules that contribute pieces to the overall application. Although Prism supports this application style, many of the components within Prism are useful when building Silverlight applications for Windows Phone. For example, you can use the DelegateCommand provided by Prism to avoid the requirement to create your own implementation of the ICommand interface.

The Prism Library for Windows Phone contains a subset of the main Prism Library features specifically aimed at helping developers to implement solutions to common issues found in developing applications for Windows Phone. The library includes classes to help developers implement commands, navigation, observable object notifications, data template selection, interaction with notifications, interaction with the application bar, and more.

The Prism Library for Windows Phone is provided as an assembly in the PetrolTracker MVVM application.

Next Topic | Home

Last built: February 10, 2012