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.
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.
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:
- WPF Apps With The Model-View-ViewModel Design Pattern by Josh Smith
- Introduction to Model/View/ViewModel pattern for building WPF apps by John Gossman
Foot Notes
- John describes this experience using MVVM while developing Expression Blend during a Pixel8 interview: John Gossman Architects WPF