Home > 4.0 framework, Entity framework, ORM, RIA, Silverlight > Silverlight 4 example with MVVM

Silverlight 4 example with MVVM

Hello guys,

Its Monday and now back to work, thought to post an article on what i have grasped so far,

Let me post an example which illustrates the basic of MVVM, i will show the steps how can we bind grid with data from Viewmodel insted of doing that from code behind.

Basic of MVVM: MVVM is a Microsoft’s pattern and practice to apart the logic from view, so it can be vision like a loosely coupled architecture. All the things will work with Binding in designing.

Who can follow MVVM: Frankly speak, Architectures have their pros and cons, If the team wants to work considering future of application in terms of ease of understanding and for integration & testing friendly, strictly follow MVVM. if project is running in short of time and if team don’t have learning curve then it would be better to avoid.

Tools and Technology used:

I am using VS 2010 as development IDE With ReSharper for Code refactoring , WCF RIA service,  Galasoft MVVM light toolkit as MVVM framework.

Galasoft toolkit has many features which will ease your MVVM development, it has APIs for Commanding and Messaging.

You  can also find different MVVM frameworks and compare them to use in your developement here

So lets jump to MVVM:

Firstly i am going to narrate the basic view model integration with XAML view, also commanding which will handle inside the view model,

So, First open VS and create new silverlight business application(check the RIA link is enabled on Silverlight -> Properties)

Now add one folder inside Silverlight project named “Viewmodel”, inside it add one  class name it “EmployeeViewModel”. Implement INotifyPropertyChanged interface and implement the method & event of INotifyPropertyChanged interface.

below should be your code look like,

<br />
private IQueryable employeProp;</p>
<p>public IQueryanle EmployeeProp</p>
<p>get { return  employeProp;}</p>
<p> if(employeProp != value)</p>
<p>employeProp = value;</p>
<p>return;<br />
<p>}<br />

Now we need to get data in this collection, lets add a method in default constructor which will loads data from employee table.
Once it is done move to XAML and add datacontext & bind grid to collection of employee (below are the steps).
There are multiple ways to give Viewmodel context to view. lets go first with XAML designing,

1] Add namespace for view model class xmlns:vm=”clr-namespace:Basic_MVVM_App.ViewModel”
2] Use one of two of below code,

<br />
&lt;UserControl.Resources&gt;<br />
MainViewModel x:Key=&quot;MainViewModel&quot;&gt;<br />
&lt;/UserControl.Resources&gt;<br />

if above one is used then we have to assign datacontext on some control, in my code i have assigned it on Parent Grid

<br />
StaticResource MainViewModel }}&gt;<br />

//MainViewModel is the key name which

is created in Resources. Here Big thing to take care is StaticResource property. if you forget to add you it means binding isn’t established between view and Viewmodel.

b. Use below line in your designing,

<br />
&lt;UserControl.DataContext&gt;<br />
&lt;Binding Source=&quot;{StaticResource MainViewModel}&quot; /&gt;<br />
&lt;/UserControl.DataContext&gt;<br />

if above one is used then there is no need to assign data context on any control.

Another way assigning data context is on code behind like, In Loaded event of your code behind, add below code
Datacontext = new EmployeeViewModel(); // name of your view model

Now add data grid control and on Itemsource property add

ItemsSource=&quot;{Binding Path=PagedView, Mode=TwoWay}&quot;.<br />

Thats it!! you are done with basic example of MVVM.

What is next?

I will post my next article on Commanding to handle event in Viewmodel


  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: