Saturday, February 04, 2012    

Home

Blog

View Model

The Team

Projects

Articles

Sponsors
Blog  

OpenLight Blog

Silverlight View Model Style: An (Overly) Simplified Explanation

Apr 7

Written by:
4/7/2010 8:07 PM  RssIcon

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]

Trackback Print
Tags:
Categories:
Location: Blogs Parent Separator Michael Washington (ADefWebserver)

24 comment(s) so far...


Gravatar

Re: Silverlight View Model Style: An (Overly) Simplified Explanation

Very nicely explained. Concise and clear, thanks.

By Mike on   8/22/2010 4:11 PM
Gravatar

Re: Silverlight View Model Style: An (Overly) Simplified Explanation

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?

By Dave Bartlett on   8/26/2010 3:06 PM
Gravatar

Re: Silverlight View Model Style: An (Overly) Simplified Explanation

@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".

"View Model Style" has no rules :)

By Michael Washington on   8/26/2010 3:11 PM
Gravatar

Re: Silverlight View Model Style: An (Overly) Simplified Explanation

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

By Guru on   8/27/2010 10:16 AM
Gravatar

Re: Silverlight View Model Style: An (Overly) Simplified Explanation

@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!

By Ben on   8/29/2010 3:52 PM
Gravatar

Re: Silverlight View Model Style: An (Overly) Simplified Explanation

A nice explanation. Thanks :)

By Bala on   11/2/2010 4:04 AM
Gravatar

Re: Silverlight View Model Style: An (Overly) Simplified Explanation

nice one thanks...

By nijil on   12/1/2010 8:53 PM
Gravatar

Re: Silverlight View Model Style: An (Overly) Simplified Explanation

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

By Rajesh on   12/13/2010 8:27 PM
Gravatar

Re: Silverlight View Model Style: An (Overly) Simplified Explanation

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

By Aravind on   12/24/2010 5:20 AM
Gravatar

Re: Silverlight View Model Style: An (Overly) Simplified Explanation

Wow...Really great... Thankyou so much .Can you please provide simple code for that : i mean small project .

when user clicks button UI will will display helloworld

By Kiran on   1/17/2011 5:19 AM
Gravatar

Re: Silverlight View Model Style: An (Overly) Simplified Explanation

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

By Michael Washington on   1/17/2011 5:19 AM
Gravatar

Re: Silverlight View Model Style: An (Overly) Simplified Explanation

Kiran -

refer following link
www.kunal-chowdhury.com/2010/11/using-eventtrigger-in-xaml-for-mvvm-no.html

By Shekhar on   1/18/2011 5:11 AM
Gravatar

Re: Silverlight View Model Style: An (Overly) Simplified Explanation

Hi Michael,

This is really good article... Thanks a lot

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 ?

By Shekhar on   1/18/2011 5:12 AM
Gravatar

Re: Silverlight View Model Style: An (Overly) Simplified Explanation

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

By Shekhar on   1/18/2011 5:13 AM
Gravatar

Re: Silverlight View Model Style: An (Overly) Simplified Explanation

Nice article. Few thoughts/questions

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.

By Vikas Rao on   1/20/2011 5:13 AM
Gravatar

Re: Silverlight View Model Style: An (Overly) Simplified Explanation

@Vikas Rao - This article shows that dynamic controls work fine with MVVVM:
www.codeproject.com/KB/silverlight/SuperTabs.aspx

By Michael Washington on   1/20/2011 5:17 AM
Gravatar

Re: Silverlight View Model Style: An (Overly) Simplified Explanation

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?
thanks
Marcelo Sampaio (Brazil)

By marcelo on   2/22/2011 11:43 AM
Gravatar

Re: Silverlight View Model Style: An (Overly) Simplified Explanation

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

By marcelo on   2/22/2011 11:43 AM
Gravatar

Re: Silverlight View Model Style: An (Overly) Simplified Explanation

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

By Scott Marlowe on   4/13/2011 5:48 AM
Gravatar

Re: Silverlight View Model Style: An (Overly) Simplified Explanation

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?

By sandeep sharma on   4/29/2011 4:47 AM
Gravatar

Re: Silverlight View Model Style: An (Overly) Simplified Explanation

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?

Thanks

By Jonah Kunz on   5/26/2011 2:07 PM
Gravatar

Re: Silverlight View Model Style: An (Overly) Simplified Explanation

@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.
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.

By Michael Washington on   5/26/2011 2:15 PM
Gravatar

Re: Silverlight View Model Style: An (Overly) Simplified Explanation

Hi Michael,

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.

Regards
Rustam (UK, Bournemouth)

By Rustam on   7/4/2011 10:26 PM
Gravatar

Re: Silverlight View Model Style: An (Overly) Simplified Explanation

@Rustam - Sorry I don't.

By admin account on   7/5/2011 4:26 AM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 
  
Copyright 2009 by OpenLightGroup.net   |  Privacy Statement  |  Terms Of Use