MVVM Pattern in WPF

The Background on Model-View-ViewModel

Many developers like to keep their XAML projects cleanly structured using a pattern called MVVM (model view view model). MVVM prescribes separating the nonvisual classes that encapsulate interaction logic, business logic and data from the visual classes that actually render things to the screen. This separation makes the code easier to maintain: first, it prevents the UI from becoming a monolithic class with display controls, interaction logic and business logic all stuffed in side by side; and second, it enables you to automate the testing of interaction logic and user interface mappings instead of relying on expensive, unreliable manual testing. It also helps to facilitate a 'lookless' view, where the visual design can be changed without changing the code – at least so long as the data and operations remain the same.

Example diagram of MVVM design pattern.

In MVVM, instead of writing C# or Visual Basic code to directly set and get properties of controls in the view, you create a view model which represents the information being presented in the view, and use data binding to keep the view and the view model in sync. For example, a login view model might have Username and Password properties, which the view would bind to text boxes.

We might also have an interaction rule that the 'enter your credentials' prompt should be visible only if the Username or Password box is empty.’ Then the view model would have an IsAwaitingCredentials property, which it would update as the Username and Password changed. This encapsulates the interaction rule in a way that doesn't depend on a view being present, making it easy to unit test. The view then binds TextBlock.Visibility to the IsAwaitingCredentials property.

Similarly, XAML can represent initiating actions either by commands or by events. In the MVVM world, commands work much like properties – a view model can contain commands to which control properties can bind. Events traditionally require code in the view to wire them up, but frameworks such as Caliburn Micro can automatically map events in the view to methods in the view model, eliminating the need to manually hook up event handlers. Either of these approaches allows us to encapsulate and test the possible user actions independently of the presence of an actual view.

What about other patterns?

While it's also possible for XAML applications to use other UI separation patterns such as MVC (model view controller) or MVP (model view presenter), XAML's support for data binding and commands make MVVM a particularly good fit for the various XAML platforms.

Using WPF Elements with MVVM

Mindscape's WPF, Silverlight and Windows Phone controls have been designed to fit easily with the MVVM architecture so that you can enjoy fast, functional, beautiful controls without compromising your clean design. WPF Elements ships with a dashboard sample that demonstrates using Mindscape WPF controls in an MVVM architecture. You can open the sample in Visual Studio 2010 using a shortcut in the start menu.

MVVM Frameworks

If you're working on an application using the MVVM design pattern, we highly recommend using an MVVM framework to make your life easier. There are several frameworks to choose from including Caliburn Micro, Prisim and MVVM Light. These frameworks minimise the work you need to do and make your code clean and simple to maintain. The framework we like to use is Caliburn Micro. We used this to help build the WPF dashboard sample and have also written a beginners tutorial series which you can view here:
Part 1: Getting Started
Part 2: Data Binding and Events
Part 3: More About Events and Parameters
Part 4: The Event Agregator
Part 5: The Window Manager
Part 6: Introduction to Screens and Conductors