5 Minute Overview of MVVM in Silverlight | John Papa

John Papa

Evangelist on the loose

5 Minute Overview of MVVM in Silverlight

...

Model-View-ViewModel (better known by its super hero alias of MVVM ) is a great pattern to use with Silverlight and WPF. Here is my 5 minute perspective on MVVM (yep, it took me 5 minutes to spit this out too, so please be kind on any typos :-) )

One of the things that can be frustrating with any pattern is the immediate assumption that many articles have that everyone knows what MVVM means. This post is intended to be a short, quick, and hopefully easy explanation of MVVM. Another interesting aspect of MVVM is that you can find many ways of actually using MVVM. I will point out some of the differing opinions as I move along. Not all of them, but a few just to give you an idea of what you might see out there. This post assumes the technology is Silverlight or WPF.

This explanation is intended to give an overview on the roles of View, Model and ViewModel. The graphic at the bottom shows the basic association between the MVVM triad. There are different ways to handle some aspects of MVVM. But the element between them all is the singular purpose behind the View, the Model, and the ViewModel.

In a future post I will explain in more detail how I implement MVVM, why I chose the way I do it, and some of the pros and cons.

Why?

1 reason MVVM works really well with XAML based applications is because of the powerful XAML binding features. This allows the View (the presentation of to the user) to be separated from the data and the logic. The View can be designed in Expression Blend while the ViewModel can be developed in Visual Studio .NET. It allows for the presentation to be separated very easily. This is just 1 reason, albeit a powerful one.

View

A View is a class that represents the user interface that the user will see. In Silverlight this is the MainPage.xaml or Page.xaml class, for example. The View contains the visual controls that will be shown to the user and can also contain animations, navigation aspects, themes, and other interactive features for the purpose of the visual presentation. In Silverlight and WPF the View also contains binding extensions that identify the data points that will be presented to the user (embedded in XAML). The bindings point to the names of the data point properties, but do not have awareness of where those properties are nor where they come from. The bindings are activated when the View’s DataContext is set to a class that contains the source for the bindings.

Differing Opinions:

Some people create a View and assign it a source for its data right in the View. This can be done by creating a resource in the XAML that points to a ViewModel. I prefer to associate my View and ViewModel separate from each other so they are not coupled. however it is very common to see the ViewModel created inside the View as a resource. Either way is good. Creating it inside the View is easier and can allow for more fun when using Blend. Associating the ViewModel and the View through another class is looser and can allow for more DI and testability. Again, both are good and prominent in the wild.

 

Model

A class that represents data points describing a specific entity.  For example, a Customer class with properties such as CompanyName and CustomerId. The Model can contains child Model’s too, like any object graph. So a Customer Model can contain a property named Orders which is a set of Order Models. The Model’s purpose is to represent the data points and it has no knowledge of where it will be presented to a user nor how it will be presented. It’s single responsibility is to represent the data points.

Differring opinions:

Some people create the Model and give it awareness of where it comes from. I do not take this approach as I like to keep the Model ignorant of this and loosely coupled from where it comes form. However to offer up one different way to handle this it could help to discuss this at a high level. Some make the Model also have awareness of how to load and save itself (persistence awareness). For example, this could mean it knows how to call a web service to do this. Again, I do not do this. Rather I prefer to make that saving and loading of a Model happen in another class which has the single responsibility of handling these aspects.

ViewModel

The ViewModel is the glue between the View and the outside world. The ViewModel is what the View is bound to. The View’s DataContext is set to an instance of a ViewModel class. This is where all of the bindings declared in the View’s XAML The ViewModel contains the Model, so it has all of the data points needed in many cases right there. The ViewModel also can declare public properties for Commands (ways to invoke actions from the View to the ViewModel) and other properties that can be bound to the View.

Differing Opinions:

In my architecture, my ViewModel classes make calls to another class that handles filling the Model(s) contained within the ViewModel. Some other ways of doing this are to simply have the ViewModel go get the data himself. Again, I lean towards keeping my classes focused on a single responsibility so my examples generally do not do that. Instead, I have a class that is in charge of hitting a web service to go and get my data and fill my Model for my ViewModel.

 

Common Picture of the MVVM Triad

image

 

I hope this helps!

tags: Silverlight
  • Anonymous

    Good wording. A simple but complete example (all the pieces working together, but minimal content) will be helpful.

  • http://www.riaservicesblog.net/Blog/post/Interlude-2-Diagram-of-MVVM-and-RIA-Services.aspx Anonymous

    Interlude 2 – Diagram of MVVM and RIA Services

  • http://vbandi.dotneteers.net Anonymous

    Great job – short and to the point. I especially love the Differring opinios sections. :)

  • Anonymous

    good job!

  • http://jamolina.com Anonymous

    Great post, although a short example would be awesome! Cheers

  • Anonymous

    Really good explanation. I just want to mention that this pattern isn’t specific to WPF and often goes by the name Presentation Model in the wider software engineering world.

  • http://blog.cwa.me.uk/2009/09/09/the-morning-brew-429/ Anonymous

    Pingback from Reflective Perspective – Chris Alcock » The Morning Brew #429

  • http://adamkinney.com Anonymous

    Nice! Now turn that into a 3 minute video and we’re all set.

  • http://johnpapa.net JohnPapa

    Adam … great idea. I’ll work on that.

  • http://dotnetshoutout.com/5-Minute-Overview-of-MVVM-in-Silverlight-John-Papa Anonymous

    Thank you for submitting this cool story – Trackback from DotNetShoutout

  • http://inquisitorjax.blogspot.com Anonymous

    You say that "the ViewModel contains the model" – does that mean that there is a wrapper property on the VM for every property on the Model that you want bound on the UI?

  • http://weblogs.asp.net/sanjeevagarwal/archive/2009/09/10/daily-tech-links-for-net-and-related-technologies-september-9-12-2009.aspx Anonymous

    HTML clipboard Daily tech links for .net and related technologies – September 9-12, 2009 Web Development

  • Anonymous

    But if you change ViewModel to Controller…isn’t this MVC?

  • Anonymous

    It’s not quite the same as MVC because in MVC the View communicates directly to the Model sometimes. In this the View simply databinds to the ViewModel and the ViewModel can then communicate with the model. I think it’s actually closer to MVP than it is to MVC.

  • Anonymous

    Haven’t seen any clean MVVM + PRISM examples yet. ANy good sources that you can share?

  • http://www.bigfoottech.com Anonymous

    Great introduction to MVVM. Thanks for taking the time to share your insights. I like the differing opinions section very much, it explains your choices.

  • http://vincenthomedev.wordpress.com/2009/10/06/mvc-mvp-mvvm-design-patterns/ Anonymous

    Pingback from MVC, MVP, MVVM Design Patterns « vincenthome’s Tech Clips

  • Anonymous

    Gr8 introduction to M V V M. Thanks a lot.

  • http://www.google.com Umesh Kumar

    Very Good Description. Can u post a simple code which uses MVVM concept.

  • http://peplamb.com PepLamb

    Thanks for the awesome post, I have some concerns specially since as the project grows bigger and bigger the responsibility of the ViewModel grows with it being the center of the View and the Model. Good things though especially VM is loosely coupled with the View also MVVM being the best pattern so far to take advantage of data binding there have been some articles that I came across that say MVVM lacks in satisfying some Software Engineering Principles like SoC ( Separation of Concern ) i also heard some talk about MVVMC (C being the controller) Are there any on going improvements or new New Patterns emerging parallel with MVVM?
    Thanks!

  • http://peplamb.com PepLamb

    I have been looking at MVVM for over an year now and i learned something new here where the model is not exposed to the outside world but ViewModel being the glue between View and the Model also takes care of fetching data via webservices etc. The way i did before and still do is ViewModel basically has only properties and the View subscribes / databinds to the properties and the ViewModel gets its data from the Model and the Model fetches data via webservises etc.
    Awesome post thanks for sharing :)

  • Chetan

    Good explanation but need a example to understand it quickly…so try to add a simple example with this article

  • john
  • Gopalaraju

    Nice! article vary usefull.

  • Karthi

    A good explanation on the MVVM pattern. Thanks.

%d bloggers like this: