OpenLightGroup Blog

rss

Blogs from OpenLightGroup.net


Silverlight View Model Style: An (Overly) Simplified Explanation

Why Use View Model Style?

The biggest benefit is that it allows a developer to create an application with no User Interface (UI). A Designer is then able to create the entire UI using Microsoft Expression Blend 4+, without writing a single line of code.

The benefits of this include:

  • The UI is easier to create when you can do it visually, in a tool, without having to write code
  • You may have a better UI when it is designed and implemented by people who may not be programmers
  • The UI can be created first, or at the same time, as the rest of the code, if needed
  • The UI can be completely changed without the need to change any code

To achieve this, all you need to do is create a UI (a View) that has no code behind, and communicates with the application using bindings and commands that are contained in a View Model.

 

The Model

image

The Model is where the data for the application goes, The Model can contain:

  • Web Services – A Silverlight application typically needs to communicate with the web server to get the data, you can put your web service methods here.
  • Rest Services – The same as web services.
  • Generic Collections – Basically any data.

 

The View Model

image

The View Model consists of:

  • Properties – One of something. This could be a String or an Object. Implements INotifyPropertyChanged, so that any element bound to it, is automatically notified whenever it changes.
  • Collections – A collection of something. This is of type ObservableCollection, so that any element bound to it, is automatically notified whenever it changes.
  • Commands – An event that can be raised. Also, one parameter of type Object can be passed. This implements ICommand.

 

The View

image

This is the part that you can make with no code using Expression Blend.

An Outline

  • Model
    • Get your data any way you can. Usually calls to web services.
  • View Model
    • Consists of:
      • Properties – One of something. This could be a String or an Object. Implements INotifyPropertyChanged, so that any element bound to it, is automatically notified whenever it changes.
      • Collections – A collection of something. This is of type ObservableCollection, so that any element bound to it, is automatically notified whenever it changes.
      • Commands – An event that can be raised. Also, one parameter of type Object can be passed. This implements ICommand. 
        • Implemented using Behaviors. Mostly the InvokeCommandAction Behavior  
  • View
    • Properties
      • Bind to a text box, radio button, toggle button, MediaElement, trigger an animation or ViewState change
    • Collections
      • Bind to List box, TreeMenu
    • Commands
      • Implemented using InvokeCommandAction behavior
        • Bind to a ICommand in the ViewModel
        • Indicate the ICommand that you want to raise
        • Pass a parameter

To Learn View Model, Start Here: [RIATasks: A Simple Silverlight CRUD Example]





Comments are closed.
Showing 24 Comments
Avatar  admin account 6 years ago

@Rustam - Sorry I don't.

Avatar  Rustam 6 years ago

Hi Michael,<br /><br />I followed your tutorial (RIATasks: A Simple Silverlight CRUD Example (using View Model)) and I found it very (VERY) useful. Thank you. Is there a tutorial for membership/roles when using Silverlight. Scott Mitchell wrote a great series (14 part) on membership/roles with asp.net. Is there a equivalent.<br /><br />Regards<br />Rustam (UK, Bournemouth)

Avatar  Michael Washington 6 years ago

@Jonah Kunz - All of this is just an opinion :) In my opinion, for Silverlight, the Model IS the Webservice (or Rest Service). In WPF it would be different. With WPF you most likely would not have web services so your Model would be a set of classes.<br />Some still make a set of classes to use as the Model for Silverlight and the web services just fill the Model. However, that is a lot of extra code for the same result, so I eliminate that and consider the Web services the Model.

Avatar  Jonah Kunz 6 years ago

I also just wanted to make sure I have this pattern down correct. In my Silverlight project I just call the Models from a web service right? So Models and methods are in the web service project?<br /><br />Thanks

Avatar  sandeep sharma 6 years ago

HI,i have some confusion on this artical,that is the model part of MVVM pattern does not mean we put here all service calling concept indeed it is server side WEB-SERVICE That contains DATA.plz tell me is it right?

Avatar  Scott Marlowe 7 years ago

Just wanted to add my "nice post" comment to the list. Thanks!

Avatar  marcelo 7 years ago

I am doing a report for hiring a mentor, this article was very useful. I would thoroughly asber which negative and positive points between MVVM vs MVC?<br>thanks<br>Marcelo Sampaio (Brazil)

Avatar  marcelo 7 years ago

I would thoroughly asber which negative and positive points between MVVM vs MVC?<br>thanks<br>Marcelo Sampaio (Brazil)

Avatar  Michael Washington 7 years ago

@Vikas Rao - This article shows that dynamic controls work fine with MVVVM:<br><a href="http://www.codeproject.com/KB/silverlight/SuperTabs.aspx" rel="nofollow">www.codeproject.com/KB/silverlight/SuperTabs.aspx</a>

Avatar  Vikas Rao 7 years ago

Nice article. Few thoughts/questions<br><br>What happens when the controls need to be dynamically created and updated. I don't think it can be achieved just using Blend without any code behind.

Avatar  Shekhar 7 years ago

@Shekhar - The MVVM pattern will work fine with 200 screens.

Avatar  Shekhar 7 years ago

Hi Michael,<br><br>This is really good article... Thanks a lot<br><br>I'm developing LARGE application (200+ screens) in SL4, I have checked many details on the web and found that to follow the MVVM pattern. Will that be correct decision ?

Avatar  Shekhar 7 years ago

Kiran - <br><br>refer following link<br><a href="http://www.kunal-chowdhury.com/2010/11/using-eventtrigger-in-xaml-for-mvvm-no.html" rel="nofollow">www.kunal-chowdhury.com/2010/11/using-eventtrigger-in-xaml-for-mvvm-no.html</a>

Avatar  Michael Washington 7 years ago

@Kiran - Sorry due to my schedule I am unable to take requests

Avatar  Kiran 7 years ago

Wow...Really great... Thankyou so much .Can you please provide simple code for that : i mean small project .<br><br>when user clicks button UI will will display helloworld

Avatar  Aravind 7 years ago

Great!! really superb explanation.. Thanks a lot!!

Avatar  Rajesh 7 years ago

Nice article, it solved my confusion on this pattern..thanks

Avatar  nijil 7 years ago

nice one thanks...

Avatar  Bala 7 years ago

A nice explanation. Thanks :)

Avatar  Ben 7 years ago

@Dave Bartlett ... Although a great bonus of MVVM is the ability to hand the UI design to a "designer", in my experience the biggest case for MVVM is that it lends itself very well to testing!

Avatar  Guru 7 years ago

great post...as the title says the explanation is really simplified

Avatar  Michael Washington 7 years ago

@Dave Bartlett - "View Model Style" is basically MVVM in regards to the separation of the View and the "View Model". The only reason for a different term is to avoid the arguments that arise when you use MVVM, but do not adhere to all of it's "generally understood" "rules". <br><br>"View Model Style" has no rules :)

Avatar  Dave Bartlett 7 years ago

Great post Michael. One thing that is unclear to me is that if the only goal of MVVM is to allow the UI to be developed independently of the rest of the application, why does the pattern describe a "View Model" approach when that would not impact the separation of the UI?

Avatar  Mike 7 years ago

Very nicely explained. Concise and clear, thanks.