Hands-On Model-View-ViewModel (MVVM) for Silverlight and WPF

Over the years I have spent a fair amount of time thinking about design patterns surrounding the presentation layer. Just as your values as a grown-up are often determined by experiences you have as a child – I think my interest in these patterns stem from frustrations I had as a newbie developer.

When I first started, I made my way onto a team developing software for a financial company. The obvious pre-requisites emerged: quality and accuracy were paramount to the success of the project, and the features and scope of the project were always expanding. The problem was soon I realized that the way this application was built would compromise our ability to deliver to the necessary standards.

The problems included:

  • Web pages with over 2,000 lines of code in Page_Load event method
  • A complete disregard for any attempt to automate testing
  • Un-extensible architecture

... and host of other issues pushed me to learn how to avoid these problems in the future.

A drive to push as much code of the the user interface layer seem to be a step in the right direction. While by no means a silver bullet, breaking apart the application would help bring some order to the chaos and provide a foundation for automated testing and application extensibility. The usual suspects for this kind of separation are Model-View-Controller (MVC) and it’s derivative patterns.

Presentation Models for XAML Applications

With the emergence of WPF, the change in architecture brought about a need to shift the approach of separation of concerns in the presentation layer. The approach of Model-View-Controller and it’s offspring were an obvious choice, but the existing models were required no small amount of shoe-horning to make a comfortable match for XAML applications.

Looking to apply a pattern with a more natural fit John Gossman helped popularize Model-View-ViewModel (MVVM) for use in WPF. (He and his team even went as far as to use the pattern while developing Expression Blend1.) As WPF matured and Silverlight began to emerge, this time MVVM seemed like the go-to pattern, but resources with concrete instruction are few and far between.

Looking for Guidance

As with all the Model View * patterns, there usually follows a learning curve to anyone new to the approach. Therefore I set out to find a way to provide an "apples to apples" comparison of how to implement MVVM in both Silverlight and WPF. 

Comparing apples to apples: Implementing Model-View-ViewModel in Silverlight and WPF

I decided to create some long-form screencasts that will help teach the concepts of MVVM. I contacted Microsoft Program Manager Tim Heuer to tackle the Silverlight project and WPF Super Ninja Josh Smith to lead the way for a WPF implementation.

The charge was simple: create a quiz application that harnesses the power of MVVM. The result is the following two screencasts (each an hour in length) that dive into the details of using MVVM.

Implementing Model-View-ViewModel in Silverlight   Implementing Model-View-ViewModel in Silverlight

If you are new to Silverlight, WPF and MVVM, I suggest you begin by watching the Silverlight video first. Tim does a great job of explaining the pattern from the ground up and showing how all the dots are connected. Once you are a little more comfortable with the basics, Josh’s video attempts to take a more real-world looking domain model and prepare it for his WPF application with a clean ViewModel interface. Both are worth the time as each presenter did an excellent job of demonstrating their approach.

I hope you find them useful!

Resources

For further reading on Model-View-ViewModel:

 

Foot Notes

  1. John describes this experience using MVVM while developing Expression Blend during a Pixel8 interview: John Gossman Architects WPF
Published Thursday, February 26, 2009 6:36 AM by craigshoemaker

Comments

# re: Hands-On Model-View-ViewModel (MVVM) for Silverlight and WPF

Thursday, February 26, 2009 11:16 AM by Josh Smith

Thanks a lot for taking the time to produce these videos, Craig.  I'm honored to be a part of this project! :)

# re: Hands-On Model-View-ViewModel (MVVM) for Silverlight and WPF

Thursday, February 26, 2009 12:14 PM by craigshoemaker

Say nothing of it, Josh... glad to have you aboard!

For those interested Josh and I are already discussing a follow up. No promises on when it will be available, but we are tossing some ideas around.

# re: Hands-On Model-View-ViewModel (MVVM) for Silverlight and WPF

Friday, February 27, 2009 5:09 PM by craigshoemaker

I've avoided putting videos in the feed since they are so large... but I suppose I should add them. thanks, Greg!

# re: Hands-On Model-View-ViewModel (MVVM) for Silverlight and WPF

Wednesday, May 20, 2009 2:44 PM by Ben Hayat

Hi Craig;

Great questions by you and great answers by Tim. I love these types of screen casts when one person is asking questions and the other responds. Lots more to learn from.

Tim is great. I always enjoy his way of coming across.

Thanks guys!

..Ben

# re: Hands-On Model-View-ViewModel (MVVM) for Silverlight and WPF

Saturday, November 7, 2009 7:49 PM by rybolt

anyone know the correct wpf video link ?

# re: Hands-On Model-View-ViewModel (MVVM) for Silverlight and WPF

Monday, November 9, 2009 12:38 PM by craigshoemaker

The new WPF link is:

community.infragistics.com/.../91950.aspx

...but I have updated the post with all the new links.

Best,

Craig

# re: Hands-On Model-View-ViewModel (MVVM) for Silverlight and WPF

Friday, November 13, 2009 5:54 PM by Ryan Brown

Awesome presentations! Do you know of any books out there that cover MVVM using either Silverlight or WPF? I would really like to get a deep dive into this pattern.

# re: Hands-On Model-View-ViewModel (MVVM) for Silverlight and WPF

Sunday, November 15, 2009 10:02 AM by craigshoemaker

I don't know of any books, but this think might provide some deep-dive material for you:

A quick tour of existing MVVM frameworks:

www.japf.fr/.../a-quick-tour-of-existing-mvvm-frameworks

# re: Hands-On Model-View-ViewModel (MVVM) for Silverlight and WPF

Thursday, November 19, 2009 9:36 PM by Ryan

Great article Craig! I will be checking out Hasan's presentation next.

A book on XAML-based apps (WPF/Silverlight) using MVVM would be a great read! ;) I am very enthused by what I see and read of this pattern.

# re: Hands-On Model-View-ViewModel (MVVM) for Silverlight and WPF

Thursday, April 29, 2010 2:47 AM by Pradeep

Hi, Can we use one view in a module in all other modules?

When I did, the last initialized module is showing the changes needed in the UI.Is there a work around for this?

# re: Hands-On Model-View-ViewModel (MVVM) for Silverlight and WPF

Sunday, March 27, 2011 1:07 PM by weblogs.asp.net

Hands on model view viewmodel mvvm for silverlight and wpf.. Peachy :)