An Early Look at Silverlight Model-View-ViewModel Toolkit 1 25

Introduction

This post is just an early look of upcoming Silverlight Model-View-ViewModel Toolkit. I know that this is very early state but I’m writing about this here because I would like to get the feedbacks from the community so that I can prioritize the plans based on what the community want. If you are a fan of WPF MVVM Toolkit then you will probably like it.

Silverlight MVVM Toolkit

Download : SilverlightModelViewApplication.zip (15 KB)

Features

The toolkit includes:

  • A Visual Studio 2008 Project Template
  • Silverlight Command Implementation
  • ViewModelBase that implements INotifyPropertyChanged interface

What is Silverlight MVVM Toolkit?

Silverlight MVVM Toolkit is a Visual Studio project template that has some useful pre-written implementations for Silverlight Command and INotifyPropertyChanged interface. The main intention of creating this toolkit is to help developers to develop the MVVM pattern-based Silverlight application quickly.

I’ve been using this template since a few weeks ago and I found it quite useful because whenever I need to create some samples for my blog or the POC projects for my Office, I always need to create a ViewModal class that implements INotifyPropertyChanged interface and need to add the Prism V2 assembly as a reference in my sample for using DelegateCommand. When I look at WPF MVVM toolkit, I really like it because it saves a lot of my times for copying and pasting the old code from my old sample to new sample. After using WPF MVVM toolkit, I was thinking why not create a project template for Silverlight as well. and now, I did it.

The project template is already attached in this post so you can download and test it in your machine. The msi file for that template is not ready yet but I will show you very simple steps (just two steps only) to make it visible in Project Template Dialog of Visual Studio 2008.

How to install Silverlight Model-View-ViewModel Toolkit

Please download the zip file (Don’t extract it) and close all Visual Studio 2008 instances before following the steps below ~

Step #1: Copy and paste SilverlightModelViewApplication.zip under this path below

%ProgramFiles%\Microsoft Visual Studio 9.0\
Common7\IDE\ProjectTemplates\CSharp\Silverlight\1033

    VS Project Template

Step #2. Open Visual Studio 2008 Command Prompt and type “deven /setup”

commandline

Yes. That’s all for installing new project template for Visual Studio.

Once you have finished registering new project template, you open the Visual Studio 2008 and check “New Project” dialog.  Then, you will get new project template “Silverlight Model View Application” under Silverlight project type as shown in picture below.

Silverlight MVVM Template in VS

Choose that template to create a Silverlight MVVM appliction. Note that linking with ASP.NET project, enabling the RIA service and generating unit-test project are not availble in this template but I will add all of this later.

The structure of Silverlight MVVM project is as below.

Silverlight MVVM Folder Structure

Commends

Let’s talk about classes under Commands.  The Command implementation that I’m using in this toolkit is from CompositeWPF version 2. I know that I can probably roll my own implementation but I’ve been using Prism for long time and DelegateCommand is working perfectly fine so I dont think that I need to waste my time to do the duplicated things. Please feel free to let me know if you found something that is not supported by DelegateCommand.

Here is the examples for using DelegateCommand.

XAML


xmlns:cmd="clr-namespace:SilverlightModelViewApplication4.Commands"

Here is how you can use Command Binding and CommandParameter in Silverlight.  ( The earlier implementation of Prism v2 is cmd.Command.Click but Prism team re-named this to Click.Command at drop 9.  You can read this post if you like to know why they did the changes)


<Button
cmd:Click.Command="{Binding SearchCommand}"
cmd:Click.CommandParameter="This is a CommandParameter"
/>

</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 2503px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;"><Button</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 2503px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">cmd:Click.Command="{Binding SearchCommand}"</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 2503px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">cmd:Click.CommandParameter="This is a CommandParameter"</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 2503px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">/></div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 2503px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">

C#


public DelegateCommand<string> SearchCommand { get; set; }

//Construtor
public MainPageViewModel()
{

SearchCommand = new DelegateCommand<string>((arg) =>
{
MessageBox.Show(arg);
});

}

INotifyPropertyChanged implementation

Some of you might know that I wrote about how to implement INotifyPropertyChanged interface with Expression Tree so you don’t need to use any magic string in property setter.  If you haven’t read it yet, please go and read this post to get some idea. I implemented the same implementation in ViewModelBase class of this toolkit so you can probably use this feature as below in ViewModel class.


//Example: How to use RaisePropertyChanged without having any magic string.

private string name = string.Empty;

public string Name
{
get { return name; }
set {
name = value;
this.RaisePropertyChanged(p => p.Name);
}
}

Upcoming Features ~

  • A Project Template Waziard for linking with ASP.NET, enabling RIA Services and generating a Text project that has the references o Silverlight Unit Test Framework and Silverlight Moq
  • A C# and VB.NET project template that supports all editions (inlcuding express edition) of Visual Studio 2008
  • Creating a msi installer by using Windows Installer XML (WiX) toolset

Questions?

I have a few questions for you guys.

  1. What kind of functionalities do you guys like to see in this toolkit? For example: Extensions/Attached properties, Utilities and etc
  2. Do you think that I should create an installer (msi) for that? OR is it okay to have zip file and register it by youself with two simple steps? I’m asking you this because in order to create a msi, I will probably need to spend some times for learning Windows Installer XML (WiX) toolset. So, if you guys are okay with two simple steps, I can work on other things first.

Feel free to drop a comment if you have any comment or suggestion for this toolkit. If you already have similar things in your mind, please let me know. We can work together to contribute our community. You can also reach me with this email mchlsync AT gmail DOT com.

I will be hosting this project in codeplex.com once it’s ready.

25 thoughts on “An Early Look at Silverlight Model-View-ViewModel Toolkit 1

  1. Reply Mark Jun 14,2009 7:48 am

    Great!! Mike

    I was looking for this since long time back.. thanks a lot for your effort!!

    For your questions,

    1. I would say that it’s better if you can create those extensions and etc as a Item template

    2. Yes. you should create msi

    thanks again.

  2. Reply Ray Houston Jun 14,2009 9:52 am

    Hi Michael – cool stuff. On the INPC, we use DyanmicProxy to do all the auto wiring. If you’re interested, check out http://www.lostechies.com/blogs/rhouston/archive/2009/06/02/fluent-silverlight-auto-wiring-inotifypropertychanged.aspx

  3. Reply Michael Sync Jun 14,2009 11:59 pm

    Hey Ray,

    I did profiling for that.

    Here is the result. But if your object has less than 50 properties then expression tree work just fine.

    1000 properties with magic string = 8757 ms
    1000 properties with expression tree = 10,591 ms

    I heard that some peoples are using either Interception or AOP for INPC.

    I have two problems in using Interception for INPC

    1. I don’t want to make my property “virtual”
    2. I don’t want to register my UI Model or Entity with interceptor.

    AOP approach is good except it take a bit longer compile-time.

  4. Reply Zou Jun 15,2009 12:59 am

    Hey Mike,

    Great!

    some suggestions!!

    1. Add IMessageBox in Base – for testability
    2. Add ILogger that use log4net or Clog or both
    3. Add Event Aggregator or Meditor as a option or ItemTemplate

  5. Reply Kelps Jun 15,2009 5:18 am

    Very nice. I’ll take it for a spin right now.

  6. Reply Ray Houston Jun 15,2009 5:24 am

    Hey Michael – that’s good to know about the expression trees. 9 ms versus 11 ms per property doesn’t sound bad at all. It’s obviously is slower, but since it’s within double digit ms, it probably won’t make much of a difference for most cases.

    Yeah it’s a pain to have to make the properties virtual. I guess it’s a trade off. As far as registering the model with an interceptor, we have our IoC container do that for us. It also autoscans the assembly on startup so we don’t have to do anything special. To get the object we just do container.Get()

  7. Reply Alexey Zakharov Jun 15,2009 10:42 am

    Hi Michael,

    It would be nice to see performance analysis between direct implementation of INotifyPropertyChanged and implementation based on expression trees.

    Also I think you should remove ViewModel base class from your solution, because your expression tree approach can be done with extension methods.

    Thanks,
    Alexey Zakharov

  8. Reply Rolf Jun 15,2009 11:13 am

    Your command implementation seems to be founded on ButtoBase class and supports only click events. A much broader approach shows Chris with his CommandManager (http://chris.59north.com/post/The-CommandManager-again.aspx).

  9. Reply Michael Sync Jun 15,2009 11:15 am

    Here is more results..

    50 properties

    Magic string: 0
    ExpressionTree + Extension Method: 4
    ExpressionTree : 3
    Reflection: 0

    1,000 properties

    Magic string: 1
    ExpressionTree + Extension Method: 16
    ExpressionTree : 12
    Reflection: 2

    10,000 properties

    Magic string: 12
    ExpressionTree + Extension Method: 121
    ExpressionTree: 118
    Reflection: 20

    100,000 properties

    Magic string: 128
    ExpressionTree + Extension Method: 1103
    ExpressionTree: 1067
    Reflection: 204

    I think you should remove ViewModel base class from your solution, because your expression tree approach can be done with extension

    Yes. But Having ViewModelbase provides you to choose two options (with magic string or expression tree).

  10. Reply Michael Sync Jun 15,2009 11:35 am

    Hi Rolf,

    Thanks for the link.

    Your command implementation seems to be founded on ButtoBase class and supports only click events

    What else do we need?

    A much broader approach shows Chris with his CommandManager

    Thanks for the link. I will take a look at this. seems it’s interesting stuff.

  11. Reply Alexey Zakharov Jun 15,2009 7:21 pm

    Thanks for your stats. Can you share source of this test on your blog.

  12. Reply Davide Zordan Jun 16,2009 2:38 am

    Hi Michael, cool stuff :) I really love the idea of a Silverlight toolkit using Prism and Expression trees.

  13. Reply Michael Sync Jun 16,2009 2:41 am

    Hi Alexey,

    Sure. I will upload the test code for you guys.

    Hi David,

    Thanks. :) http://silverlightmvvm.codeplex.com/

  14. Reply Justin Toth Jun 17,2009 3:07 pm

    Hey Michael, thanks for this post. I was looking for a way to do MVVM without having to use all of Nikhil’s controls and this looks to answer that.

    However, everyone commenting here seems to already know the ins and outs of how this MVVM is supposed to work… I’m still new to this sort of thing so was wondering if you could explain how it all ties together… For example, what if you wanted to have a datagrid/dataform on a page that used linq to sql or EF data entities coming from a RIA service, what would the xaml look like and also what would the associated view model class look like?

    Also what is the RaisePropertyChanged for? Won’t linq to sql or EF track the property changes to business objects on its own?

  15. Pingback: An Early Look at Silverlight Model-View-ViewModel Toolkit 1 « vincenthome’s Tech Clips

  16. Pingback: MVVM Toolkit « WPF design and research

  17. Reply maridob Jul 14,2009 7:31 am

    Hi, I thought its pretty sweet that somebody thought of this – but when I installed it and will start using it, I got this message error, The imported project “C:\Program Files\MSBuild\Microsoft\Silverlight\v3.0\Microsft.Silverlight.CSharp.targets” was not found. Do you have idea what went wrong?

  18. Reply Andrew Aug 6,2009 7:59 am

    Thanks for that – I’m having problems installing it. Any ideas what I may be doing wrong?

  19. Reply Veky Oct 5,2009 7:47 am

    Hi, I’m having the same problem than maridob. Any idea??

  20. Reply tom allen Oct 9,2009 4:59 pm

    Hi Michael, thanks for the great tool. I’ve been using it happily for a couple months, but I recently installed .NET RIA Services. Now my SL MVVP TK prjects are all broken. When I try to build I get error
    – “..\SilverlightModelViewApplication.Web\SilverlightModelViewApplication.Web.csproj” was not found.

    I have uninstalled and re-installed SL MVVP TK and .NET RIA services in various orders, and the only way to revive my projects is to leave .NET RIA Services uninstalled. Is there a fix for this? Thanks!

    +tom

    Cupertino, CA

  21. Pingback: Silverlight and ViewModel meet F# | DavideZordan.net

  22. Reply tom allen Oct 16,2009 9:08 am

    The .NET RIA Services incompatibility was researched and a workaround provided on the MS Silverlight forum by MS engineer Brett Samblanet (http://forums.silverlight.net/forums/p/135612/303062.aspx#303062).

    Short-term fix: Turn off the RIA Service link to “SilverlightModelViewApplication.Web.csproj” in the .web project properties.

  23. Reply Steve Oct 17,2009 4:27 am

    So you provide a button click command & that is it ?

    What about a combobox on selected item, etc… there are common senarios.

    Thanks

  24. Reply Michael Sync Oct 17,2009 7:52 am

    You can directly bind with your object to the selected item of combobox.

    We are holding new version for now. We are going to release next one when Silverlight 4 beta release for public.

    we are finding a way to run the test as quick as possible without opening the browser. we will use Moq as a build-in moq lib.

  25. Reply Kiran Desai Dec 1,2011 5:43 am

    Thanks for the template.. :-)

Leave a Reply