Use the Model-View-ViewModel (MVVM) pattern
[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]
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.
In contrast, an app with a more conventional structure uses data binding just for list and text controls, and responds to user input by handling events exposed by controls. The event handlers are tightly coupled to the controls, and typically contain code that manipulates the UI directly. This makes it difficult or impossible to replace a control without having to update the event handling code.
App layers
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.
The benefits of layers
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 unit testing of non-UI code much easier than it is without the separation. Microsoft Visual Studio supports unit test projects, which you can use to verify your code design during development, and to help identify and diagnose bugs. For more info, see Understand 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.
Basic and advanced MVVM
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 Learn how the Reversi sample uses Windows Store app features: Data binding and Understand the 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 core 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 Model-View-ViewModel (MVVM) pattern in a Windows Store business app using C#, XAML, and Prism
- Using the Model-View-ViewModel (MVVM) pattern in Hilo (Windows Store apps using C++ and XAML)
- Using Portable Class Library with Model-View-View Model
- Separate UI and app logic using the Model-View-ViewModel pattern (sharing code between Windows Phone and Windows Store apps)
- Developing a Windows Phone Application using the MVVM Pattern
- Building Testable Windows Phone Applications