Skip to content

Quick introduction to MVVM design pattern for WPF

by Samuel Moura on August 18th, 2010

This is a small introduction to quickly get you started with M-V-VM (Model-View-ViewModel). I basically introduce it in a very straight forward fashion so that you can apply it on your own.

What is M-V-VM?

The Model-View-ViewModel is a pattern presented by John Gossman back in 2005 to solve the problem of decoupling the View from the Model, so that Views can be implemented by designers instead of software developers.

From a TDD standpoint it is also useful to have Views separated from ViewModels, this way we can TDD our ViewModels and leave a thin layer of untested code which represents only the View.

For all this, MVVM makes you think more on what you are developing helping you develop better Software.

As a side note please keep in mind that although specifically targeting WPF applications this pattern can successfully be used with other Frameworks.

The actors in MVVM

Before proceeding lets see what each what each of the MVVM intervenients represent. This is a simple illustration on how they relate to each other:

image

The Model: represents the data and business logic. It should represent your business (domain) and it should not be aware by anyway of your UI.

The View: this is the UI – the bridge between your software and its users. Normally the View is only aware of the ViewModel but there might be cases in which it may make sense to expose the Model directly to it.

The ViewModel: this is the way you connect your model to a specific View. See it has code that massages your Models in a way that the View can consume. The ViewModel should be View agnostic as the Model should.

Using MVVM in WPF

MVVM in WPF relies heavily on WPF’s excellent binding capabilities. Assuming that your Models are in place, in order for you to implement the MVVM pattern your will have to add a ViewModel class to your application as well as a View.

You then have to guarantee that when you use your View, its DataContext is the ViewModel, you can accomplish this in two ways:

  • DataTemplate: in this scenario a DataTemplate is created for the ViewModel that resolves to the View. When an instance of the ViewModel is added to the LogicalTree and it is resolved the DataTemplate will be applied to it.
  • Binding: this is achieved by directly binding the View’s DataContext to an instance of the ViewModel;

For the upcoming examples lets suppose we have the following ViewModel:

public class CustomerDetailViewModel : ViewModelBase
{
public Bitmap Picture { get; set; }
public string Name { get; set; }
public string Address { get; set; }
}

Most of the ViewModel is cut on purpose to keep things simple (remember that properties should issue a PropertyChanged event when changed).

View-ViewModel wiring through DataTemplates

With this method you rely on the DataTemplate mechanism to map a View to whatever ViewModel it finds when WPF is applying templates to your LogicalTree.

You have to create a DataTemplate that visually represents your ViewModel setting its DataType to your ViewModels type:

<DataTemplate DataType="{x:Type local:CustomerDetailViewModel}">
	<StackPanel>
		<Image Source="{Binding Picture}"/>
		<TextBox Text="{Binding Name}"/>
		<TextBox Text="{Binding Address}"/>
	</StackPanel>
</DataTemplate>

This is particularly useful for controls that end up being added to an ItemsControl. It should not be used on a regular basis for every ViewModel.

View-ViewModel wiring through direct Binding

In this scenario you instantiate your Views directly on your WPF Windows / UserControls and bind their DataContext property to an instance of the ViewModel, created on the Windows / UserControl’s ViewModel (UI composition).

You can start by creating a UserControl as your View assuming that the DataContext will be the corresponding ViewModel:

<UserControl x:Class="MvvmIntroduction.CustomerDetailView" (...)>
	<StackPanel>
		<Image Source="{Binding Picture}"/>
		<TextBox Text="{Binding Name}"/>
		<TextBox Text="{Binding Address}"/>
	</StackPanel>
</UserControl>

Then instantiate this View where you require it:

<Window x:Class="MvvmIntroduction.MainWindow" (...)>
	<local:CustomerDetailView DataContext="{Binding CustomerDetailViewModel}"/>
</Window>

In this case the MainWindow ViewModel exposes a property of type CustomerDetailViewModel that is then attached to the CustomerDetailView through its DataContext.

This is probably how you will do most of the wiring. Having an IoC container that instantiates your ViewModels, you then expose these as properties or set them as DataContext’s of you Window / UserControls.

Final thoughts

I have been working with MVVM for the past couple of years in a day-to-day basis and can vigorously state that this is an extraordinary pattern that makes life a lot easier when developing large WPF applications.

Of course that developing larger applications makes you rethink MVVM and find ways that make it easier to work with, I will leave that for future posts though!

Thank you so much for reading. Stay tuned for more on the MVVM pattern!

From → WPF

7 Comments
  1. Chandra permalink

    It’s really a nice article… It would be helpful if you can provide a sample for this….. :)

  2. gouse permalink

    Nice Article .very HelpFull…but need with an example of MVVM with WPF :)

  3. Alice permalink

    It’s very brief and useful, it help me to understand MVVM quickly.

  4. Quite helpful for ppl to whom MVVM is new.

  5. Haytham Ali permalink

    This is a nice article I really understand a lot from it. I did some other article but this one is very cleared a lot of issues for me…
    Thank you so much
    Hay

  6. Nipen permalink

    Its simply awesome…

Trackbacks & Pingbacks

  1. DotNetShoutout

Leave a Reply

Note: XHTML is allowed. Your email address will never be published.

Subscribe to this comment feed via RSS