I have decided to try implement same pattern in Silverlight .After reading and researching about MVVM pattern and his implementation in Silverlight I have found that most used method for implementing something close to MVVM in Silverlight is done by using SLEextension libraries.

When we talk about MVVM pattern and his implementation we must mention concept of attached behaviors and what is main purpose of MVVM pattern.

The Attached Behavior pattern encapsulates “behavior” (usually user interactivity) into a class outside the visual heirarchy and allows it to be applied to a visual element by setting an attached property and hooking various events on the visual element.(definition by John Gossman)

Main concept of MVVM pattern is to shrink or completly remove logic from the presentation.More about these patterns you can read from links below.

There are many ways to implement attached behavior in Silverlight.You can use SilverlightFX libraries from Nikhil Kothari or something else but most easiest way to do this is to use SLEextensions library.

I will show you now how to implement this on small exemple project.I have created form with button, textbox and datagrid control.Main purspose of this form is when you enter searh text and press search button grid is populated with filtered data.

First we need to add reference to SLExtensions.dll.After that we need to create static class Commands where we need to put all our methods.We now create our method GetData.Whery important thing is to create static void Initialize to ensure later that static fields are initialized.

This class looks like this :

publicstaticclassCommands

{

staticCommands()

{

GetData = newCommand(“GetData”);

}

publicstaticCommandGetData

{

get;

privateset;

}

///<summary>

/// Ensure static fields are initialized

///</summary>

publicstaticvoidInitialize()

{

}

}

After that we need to create base class for all ViewModels.It looks like this :

publicabstractclassViewModel : INotifyPropertyChanged

{

publiceventPropertyChangedEventHandlerPropertyChanged;

protectedvirtualvoidOnPropertyChanged(stringpropertyName)

{

if (PropertyChanged != null)

PropertyChanged(this, newPropertyChangedEventArgs(propertyName));

}

}

and PersonViewModel class that has some important things.

In constructor PersonViewModel class we set what method will be responsible when GetData method executes.In setter or public property List we must set OnPropertyChanged method to occcur.

After that only two things more we must do.First we need to ensure that before proccesing xaml file static commands are created,and we need to on button click event pass PersonViewModel to Datacontext element to populate dataGrid control.

publicPage()

{

// Ensure static commands are created before xaml is processed

Commands.Initialize();

InitializeComponent();

}

privatevoidbtnOK_Click(objectsender, RoutedEventArgse)

{

DataContext = newPersonViewModel(txtSearch.Text);

}

I hope this will be good starting point for you to try to implement this pattern in your own projects. I think that reasons for implementing this pattern are obvious (testibility, separation from presentation layer…) but debbuging is very big problem for everybody try to use this pattern in real Silverlight application.

Glad you liked my article I was also playing recently with Silverlight and MVVM, but approached this problem slightly different.

One important thing missing from Silverlight is Commanding support, so that was the first thing to implement. I used Commands class from Composite Application Guidance for WPF and Silverlight: http://www.codeplex.com/CompositeWPF. This class defines Command and CommandParameter attached properties for ButtonBase similar to WPF ones. The same class is used in SLExtensions.

Instead of having static class holding all commands like you have, my commands are in their respective ViewModels. So, if I have CustomersPage with Add and Update buttons, I’ll have AddCommand and UpdateCommand in CustomersViewModel, defined as public non-static properties and initialized in CustomersViewModel’s constructor.

View (CustomerPage) binds to that commands like this: <Button Content="Add" Infrastructure:Commands.Command="{Binding AddCommand}" />. Code behind is absolutely empty, except in case of main page where it sets the page DataContext in constructor.

http://blog.developers.ba/ Radenko Zec

Great Miroslav.Thanks for sharing.

Pratik Mehta

Hi Miroslav Popovic,

I referred Commands class from Composite Application Guidance for WPF and Silverlight, but i dont get idea how to use it, can you please suggest.

Thanks

http://codemind.blogspot.com/ Miroslav Popovic

Hi Pratik,

This is how I used it in one of my projects…

Commands class was defined in Abacus.Invoicer.Infrastructure namespace (your namespace may differ).
You first need to define XML namespace in your Page.xaml like this:
<Page xmlns:Infrastructure="clr-namespace:Abacus.Invoicer.Infrastructure" …

Then you can define commands in Page.xaml like this:
<Button
Infrastructure:Commands.Command="{Binding InvoicesCommand}"
Content="Invoices"
/>

Since I was using MVVM pattern for that project, InvoicesCommand was defined in PageViewModel class.

Hope this helps.

Pratik Mehta

Hi Miroslav Popovic,

Thanks for the reply, and sorry for late repling, i used commands in my viewmodel classes and it worked fine first time but when i use that page second time it gives me error that the command is already exists.. do you have any idea about that?