Use the Model-View-ViewModel (MVVM) pattern
Model-View-ViewModel (MVVM) is an app design pattern for decoupling UI and non-UI code. With MVVM, you define your UI declaratively (for example, using XAML) and use data binding markup to link it to other layers containing data and user commands. The data binding infrastructure provides a loose coupling that keeps the UI and the linked data synchronized and routes all user input to the appropriate commands.
The MVVM pattern organizes your code so that you can change individual parts without affecting other parts. This has many benefits, including:
- Enabling an iterative, exploratory coding style.
- Simplifying unit testing.
- Taking better advantage of design tools such as Expression Blend.
- Supporting team collaboration.
When using the MVVM pattern, an app is divided into the following layers:
- The model layer includes all the code that implements the core app logic and defines the types required to model the app domain. This layer is completely independent of the view and view model layers.
- The view layer defines the UI using declarative markup. Data binding markup defines the connection between specific UI components and various view model (and sometimes model) members.
- The view model layer provides data binding targets for the view. In many cases, the view model exposes the model directly, or provides members that wrap specific model members. The view model can also define members for keeping track of data that is relevant to the UI but not to the model, such as the display order of a list of items.
One benefit of this layer separation is that it can make code easier to understand. This is because the code for specific features is often separate from other code, which helps you learn from it and reuse it in other apps. For example, with the Reversi sample app, if you are interested only in UI concepts and have no interest in game AI, you can ignore the model layer. If you want to see how a certain animation works, you can find it in a single XAML file, separate from all C# code.
Another important benefit of UI separation is that it makes automated testing of non-UI code much easier than it is without the separation. Microsoft Visual Studio Express 2012 for Windows 8 supports unit test projects, which you can use to verify your code design during development, and help identify and diagnose bugs. For more info, see the Reversi app structure: unit tests.
In general, a tightly coupled architecture makes changes and error diagnosis more difficult. The key benefit of a decoupled architecture is to isolate the impact of changes, making it much less risky to experiment with new features, make bug fixes, and incorporate contributions from collaborators.
The Reversi sample shows how to create a basic MVVM app structure using standard XAML data binding, and does not require prior knowledge of the pattern. For more info, see Reversi feature scenarios: data binding and Reversi app structure.
There are many advanced MVVM techniques and frameworks that become useful as an app becomes more complex, but the basic approach described in the Reversi topics is useful for learning the pattern. Using simple MVVM techniques can also help keep your code flexible during the early stages of development by avoiding extra infrastructure until your app actually needs it.
For more info on how the pattern is used by related technologies, see:
- Using the MVVM pattern in Hilo (C++ and XAML)
- Using Portable Class Library with Model-View-View Model
- Separate UI and app logic using the Model-View-ViewModel pattern
- Developing a Windows Phone Application using the MVVM Pattern
- Building Testable Windows Phone Applications
- MVVM Quickstart
- Implementing the MVVM Pattern and Advanced MVVM Scenarios in Prism
Build date: 3/22/2013