mvvmlight Wiki & Documentation Rss Feed

New Comment on "Documentation"

Zenon66 — Sat, 29 Dec 2012 19:03:58 GMT

Honestly I don't understand why this page have some outdated links to blog and one page tutorial when should have its own documentation.

New Comment on "Documentation"

Familyghost — Wed, 28 Nov 2012 19:39:52 GMT

The code on Liberty's page is way out of date from what is in your code here. Can't follow his instruction. Consider writing a formal instruction and putting it here, along with several dozen example projects that use it from Hello World, to something complex.

Updated Wiki: Documentation

lbugnion — Thu, 01 Mar 2012 17:49:38 GMT

WHAT ABOUT WINDOWS 8

The version currently in Codeplex does not compile or run in Windows 8 Consumer Preview. A new release is in the works and will be published soon to support Windows 8 Consumer preview. Thanks for your patience.

Building the code

In order to get the latest source code from the Source Code section, build it, unit test it, and get the latest DLLs installed, check this article:
http://www.galasoft.ch/mvvm/building/

Installing the binaries with NuGet

You can add MVVM Light to an existing Windows Presentation Foundation (3.5 or 4), Silverlight (3 or 4) or to a Windows Phone (7 or 7.1 beta) project with the help of the NuGet package manager. For more information, visit http://blog.galasoft.ch/archive/2011/05/07/mvvm-light-v3-on-nuget-now-with-wp7-support.aspx

Installing the full toolkit (binaries, templates, snippets)

Right now the installation process is still manual as described at http://www.galasoft.ch/mvvm/installing/manually/. This will change soon with an automated installer.

Creating your first application

To create an application in Visual Studio: http://www.galasoft.ch/mvvm/creating/.
To create an application in Blend: http://www.galasoft.ch/mvvm/creatingblend/

Understanding MVVM

To start with MVVM and understand the basics, see my MIX10 session, available in video at http://live.visitmix.com/Archive#VideoList (scroll down to EX14). A slightly longer version (including a Windows Phone 7 demo) is available at http://channel9.msdn.com/posts/kreekman/TechDays-2010-Understanding-the-Model-View-ViewModel-pattern/

A Deep Dive session is going to take place at MIX11 (April 2011), stay tuned for more information.

Getting started with MVVM Light Toolkit

A good "primer" series by Jesse Liberty: http://jesseliberty.com/2011/01/04/wpfs-mvvm-light-toolkit-soup-to-nuts-part-i/
Another nice series by Chris Koenig, using MVVM Light: http://chriskoenig.net/category/development/mvvm/

More articles

There are a lot of articles written about the MVVM Light Toolkit: Info about new versions, documentation about specific components of MVVM Light, etc.
For more information, please check http://www.galasoft.ch/mvvm/#tutorials

Updated Wiki: Home

lbugnion — Sun, 23 Oct 2011 14:53:27 GMT

Project Description

The MVVM Light Toolkit is a set of components helping people to get started in the Model - View - ViewModel pattern in Silverlight and WPF. It is a light and pragmatic framework that contains only the essential components needed.

Get started

More information about the MVVM Light Toolkit can be found on http://www.galasoft.ch/mvvm.

Get more info about MVVM

Understanding the MVVM Pattern (MIX10 session)

http://www.galasoft.ch/mvvmvideo1

Deep Dive MVVM (MIX11 session)

http://www.galasoft.ch/mvvmvideo2

Donate

If you are so enclined, you can donate to MVVM Light Toolkit.
Or, if you prefer, you can pay me a beer next time we're in the same vicinity. Really, it is OK too :)

Latest news:

The latest news about MVVM Light are available from the MVVM feed on my blog at http://blog.galasoft.ch/category/10201.aspx.
(RSS feed).

MVVM News Feed

MVVM Light Toolkit for Windows 8 (preview) #mvvmlight #win8

Monday, October 03, 2011 | From MVVM

I was very optimistic when I first saw Metro style apps coded in C# on Windows 8, because for the most part they are not much different than the well known XAML/C# pair on Silverlight or WPF. This led me to brag a bit about probably having a port of MVVM Light ready “in a few days”. Of course I didn’t take in account that I would have a great time the week after //build in Seattle, with fantastic weather and tons of friends to have dinner and conversations with. Needless to say, the few days turned out, in fact, to be a couple of weeks.

Nonetheless, I am proud and happy to announce the availability of MVVM Light Toolkit for Windows 8. Let’s be clear, this is a preview version. All the unit tests are green for the selected components (there are a couple of components not ported yet, see the section below titled “Missing components”). However, a green unit test does not quite mean that the tested component is completely safe to use, so please be careful with that material and send me your feedback if you find issues.

Installation

MVVM Light for Windows 8 is a side-by-side install with the standard MVVM Light V3 or V4 beta. Simply download and run the MSI from Codeplex. As usual, the last step of the installation performs a “/setup” of Visual Studio to actualize the project template cache, and unfortunately this last step can last very long. Please be patient and don’t cancel before the end! The installation process is very similar to that described on the MVVM Light installation page (except that there is no NuGet installer for VS11 yet).

Note however that if you uninstall MVVM Light V3/V4b, but still want to keep MVVM Light for Win8, you may have to repair MVVM Light for Win8. Simply run the installer again and select “Repair”.

Ported components

Almost all MVVM Light components are also available in the Windows 8 version. The ported components are:

ObservableObject including all ways to raise PropertyChanged.
ViewModelBase including all ways to raise PropertyChanged.
Messenger including all message types except DialogMessage (see below).
RelayCommand with and without parameter.
SimpleIoc which might well be the very first IOC container working on Windows 8.

File, New Project

I also created a Metro style version of the MVVM Light project template. To create a new MVVM Light-powered Metro Style application, follow the steps:

Select the menu File, New, Project.
In the New Project dialog, select the category Visual C# / Wndows Metro style and double click the MvvmLight (Win8) template.

The created application is a very simple MVVM application, very similar to the ones that get created in Silverlight, WPF or Windows Phone 7: it contains a model with IDataService, a dummy runtime implementation and a design time implementation. The ViewModelLocator is available and “wired” (using the SimpleIoc container) as well as a MainViewModel that is set as DataContext on the MainPage.

Missing components

Skins: There is a small change in the way that resource dictionaries are handled in Windows 8. I need to sort things out, so right now there is no “MainSkin.xaml” in the project template.
DialogMessage: This type is bugging me in V3/V4b because it is bringing the MessageBoxResult type into the ViewModel. I am looking at ways to make it better by converting the MessageBoxResult into a vanilla Boolean. In Windows 8, MessageBoxResult does not exist anymore (there is no MessageBox or popups of any kinds in Metro style apps). Consequently, the DialogMessage does not build, and I decided to just remove it for now. I will add it again when I refactor to the “vanilla” version.
EventToCommand: There are no Blend behaviors in Windows 8 yet (important word: yet). I am looking at ways to have behaviors on Windows 8 before Blend 5 for XAML gets released. Stay tuned.
DispatcherHelper: The Dispatcher object has changed quite a lot in Windows 8, and I am looking at ways to keep the DispatcherHelper compatible with previous versions of MVVM Light by wrapping these differences. It shouldn’t be a big deal, but I want to give myself a little time to get it right (hopefully).

Next steps

I intend to build a small sample application (very similar to the one I built for my MIX11 talk) to try the various components in real life conditions. This will of course be the topic of an upcoming blog post.

I encourage everyone to try these components in Windows 8 preview, and please don’t be shy with your feedback!

Cheers,
Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Breaking change: Raising PropertyChanged with string.Empty in WinRT / Windows 8

Sunday, September 25, 2011 | From MVVM

In the developer preview of Windows 8, I just noticed a breaking change in the way that data bindings react to the PropertyChanged event.

First a bit of background: Often, objects that are databound to the UI are simple data objects (also called ViewModels) that implement the INotifyPropertyChanged interface. This interface is very simple and defines just one event, the PropertyChanged event, that needs to be raised by the ViewModel when one of its property changes. It is what makes the ViewModel “observable”. If a property of another object (typically a UI element) is data bound (through a Binding object, often set declaratively in XAML), then the value of the observing property will be synchronized to the value of the observable property.

Raising the PropertyChanged event requires an instance of the PropertyChangedEventArgs class, which takes a string as sole parameter of its constructor. The string to be passed is the name of the observable property.

Raising with string.Empty or null

In WPF and Silverlight, it is possible to raise the PropertyChanged event with an instance of the PropertyChangedEventArgs class constructed with string.Empty (or null) instead of an existing property’s name. When a PropertyChanged event is raised in this manner, the UI will re-query the value of each property of the ViewModel that is data bound to the UI. This is a convenient way to raise but one event and force the UI to update itself in response to cascading changes, for example. As such, this can be a good way to increase the performance of the application.

The breaking change in WinRT

However, while unit testing the version of MVVM Light for WinRT, I found out that raising the PropertyChanged event with an empty string or null does not update the bindings. I quickly coded a repro, and then coded the exact same code in Silverlight, and indeed the two applications do not react the same at all.

Hopefully this is only an oversight and this will be fixed in a future version.

Cheers,
Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Quick tip: Select the correct INotifyPropertyChanged in Windows 8 / WinRT

Sunday, September 25, 2011 | From MVVM

Microsoft loves MVVM and INotifyPropertyChanged so much that they included this very useful interface twice in the new WinRT framework. Unfortunately, only one of these is working correctly (and the other one is likely a bug, remnant from the past )

When implementing INotifyPropertyChanged, make sure that you select the correct one! The one you want to use is into Windows.UI.Xaml.Data. The old one, the one you DON’T WANT is into System.ComponentModel (the same namespace it was in WPF and Silverlight). If you select the wrong one, the Bindings will not be updated and the UI will remain dead as a dead fish.

I mentioned before that Microsoft took the “once in a lifetime” opportunity (well, 5-10 years is a lifetime in the world of computers) to clean up and rearrange classes within the framework. This is one of the signs right here. As for the System.ComponentModel.INotifyPropertyChanged, I guess it will be removed in a later release of the WinRT framework.

Cheers,

Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Detecting design mode in Windows 8/WinRT

Sunday, September 25, 2011 | From MVVM

One of the very useful features of the MVVM Light toolkit is to help with the creation of design time data, in order to give something to see on the design surface (Expression Blend, Visual Studio designer). This is especially useful when designing list controls such as ListBox, ComboBox, etc. Without design time data, these controls will remain empty, and the designer will not see what he is working on. This can cost a lot of time and cause frustration.

Detecting design mode was always incompatible in WPF and in Silverlight.

In WPF, we use a rather complicated snippet:

var prop = DesignerProperties.IsInDesignModeProperty;
_isInDesignMode
    = (bool)DependencyPropertyDescriptor
                 .FromProperty(prop, typeof(FrameworkElement))
                 .Metadata.DefaultValue;

In Silverlight, there is a convenient property:

_isInDesignMode = DesignerProperties.IsInDesignTool;

In WinRT, we have to use yet another property:

_isInDesignMode 
    = Windows.ApplicationModel.DesignMode.DesignModeEnabled;

Abstracting the differences

These differences can make it difficult to share code between these environments. This is why the MVVM Light toolkit abstracts these and provides a convenient property on the ViewModelBase class:

(within a ViewModel deriving from ViewModelBase):

if (IsInDesignMode)
{
    // Create design time data
}
else
{
    // Create run time data
}

(within any class not deriving from ViewModelBase):

if (ViewModelBase.IsInDesignModeStatic)
{
    // Create design time data
}
else
{
    // Create run time data
}

Happy coding!

Laurent

Laurent Bugnion (GalaSoft)

Subscribe | Twitter | Facebook | Flickr | LinkedIn

Quick tip: Adding objects in resources.

Tuesday, September 20, 2011 | From MVVM

If you are using MVVM-Light style ViewModel creation (often referred to as “view-first”), you might have noticed that you cannot build if you have an object in the view’s resources. It means that the code below does not compile.

<UserControl.Resources>
    <vm:MyViewModel x:Key="MyViewModel"
                    xmlns:vm="using:Application1.ViewModel" />
</UserControl.Resources>

<UserControl.DataContext>
    <Binding Source="{StaticResource MyViewModel}" />
</UserControl.DataContext>

I was told it is a bug that is being fixed, so no worries, the view-first way will still work! As a workaround, you can create the ViewModel in code behind and then save it into the resources, or simply assign it to the DataContext.

partial class MainPage
{
    public MainPage()
    {
        InitializeComponent();
        DataContext = new MyViewModel();
    }
}

Of course this way is less blendable (meaning that Expression Blend will not be able to create the ViewModel and to show design time data if available. However, since we don’t have Expression Blend for XAML yet, it’s not that big a deal. Let’s hope that these small issues will be resolved soon.

Laurent Bugnion (GalaSoft)

Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM Light V4 beta1

Monday, September 12, 2011 | From MVVM

This morning, I published MVVM Light V4 beta1 in the form of an MSI. The installation instructions are detailed on the MVVM Light installation page. Please make sure to uninstall previous versions before you install V4 beta1.

There are quite a few changes in this version, and I plan to blog about various features in the coming days. As usual, stay tuned!

Change log

General changes

Added XmlnsDefinitionAttribute for GalaSoft.MvvmLight.Command in Extras assembly.

Setup

Created an installer.

Messenger

Fixed Issue #7521: race condition in Messenger.Default.
Fixed Issue #7539: Messenger support for uncast objects.

ViewModelBase

Added support for RaisePropertyChanged(null) and RaisePropertyChanged(string.empty). A blog post about this will follow.
Fixed Issue #7520: RaisePropertyChanged() fails in ReleaseBuild. This overload was removed because of the many issues, and replaced by the Set methods.
Added Set(...) methods. A blog post about this will follow.

RelayCommand

Fixed Issue #7522: used deprecated Predicate instead of Func.
Fixed Issue #7534: RelayCommand has security issue.

SimpleIoc

Implemented method IsRegistered<T>(). A blog post about this will follow.
Fixed issue "Contains<T>() is returning true even if no instance was already instantiated". Contains<T>() only returns true if an instance is already created. IsRegistered<T>() returns true if the class has been registered with the IOC container.
Fixed issue "Instances get created at registration already when registered with a key and a factory". Registering the instance does not execute the factory method yet. The method is only executed when the method GetInstance is called the first time.
Fixed issue "Use the correct DLLs for CommonServiceLocator". The original DLLs from http://commonservicelocator.codeplex.com are now used everywhere.

DispatcherHelper

The class was moved from GalaSoft.MvvmLight.Extras.dll into GalaSoft.MvvmLight.dll.

Project Templates

A couple of internal changes to the template's structure.
Using the new slightly modified MVVM Light logo.

ViewModelLocator Template

Modified template to use SimpleIoc.
A couple of internal changes to the template's structure.
Using the new slightly modified MVVM Light logo.

ViewModel Template

A couple of internal changes to the template's structure.
Using the new slightly modified MVVM Light logo.

View Template

Fixed issue in XAML for WP7 and WP7.1 templates.
A couple of internal changes to the template's structure.
Using the new slightly modified MVVM Light logo.

INPC snippet

Setter in property is now public.
Added $end$ marker.
Added new snippets with various ways to call RaisePropertyChanged.
Added a snippet using the new ViewModelBase.Set() method.
A blog post will follow about all this.

ViewModelLocator property snippet

Added $end$ marker.
Modified to use SimpleIoc.

Relay Command snippets

Added code snippets for RelayCommands. A blog post about this will follow.

Details

XmlnsDefinitionAttribute for GalaSoft.MvvmLight.Command in Extras assembly

Thanks to the addition of XmlnsDefinitionAttribute, you can simplify the inclusion of the MVVM Light EventToCommand action in XAML. See the before and after below:

Before:

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
             
             xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.SL4"
             
             xmlns:cmd="http://www.galasoft.ch/mvvmlight" 
             x:Class="MvvmLight4.MainPage">

After:

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
             xmlns:cmd="http://www.galasoft.ch/mvvmlight" 
             x:Class="MvvmLight4.MainPage">

Laurent Bugnion (GalaSoft)

Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM light V3 installer for non-English systems

Thursday, September 01, 2011 | From MVVM

After I released the MVVM Light installer, I got a note saying that parts of the installation failed on non-English systems (in that case a German installation of Expression Blend and Visual Studio). Specifically, what failed was the code snippets on Visual Studio, and the project and item templates in Expression Blend.

After investigating, it is correct that these two particular features of MVVM Light were installed to language-coded folders. Correcting the issue for Expression Blend was easy enough (Blend can also find project and item templates in the My Documents folder, under Expression\Blend 4\ItemTemplates and Expression\Blend 4\ProjectTemplates, which are language independent).

Unfortunately it was not that easy for code snippets, so eventually I had to resort to a few custom actions in the installer. How annoying that we cannot install code snippets to a language-neutral folder!!

Anyway, after a lot of efforts and even more testing, I published a new version which corrects the previous issues. So now I can happily resume my efforts on V4 beta 1 which is nearing completion, and which will also come with a neat installer

Happy coding,

Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Automated installer for MVVM Light V3!

Saturday, August 06, 2011 | From MVVM

For a very (too) long time, the installation procedure for MVVM Light sucked. It involved downloading and unzipping files in various locations. Unfortunately, creating an automated installer is not completely trivial because of the variety of files that are getting installed: Binaries, Code Snippets, Project and Item Templates, all require different locations, and all that for VS2008, VS2010, Blend 4 and Silverlight 3, Silverlight 4, WPF3.5 SP1, WPF4, WP7.0 and now WP7.1 “Mango”.

Thankfully, MVVM Light is taking advantage of a great community. First, Leon Zandman initiated the project of an MSI for MVVM Light. Unfortunately, Leon was not able to complete this initiative, but the very helpful and capable Morten Nielsen created the installer in Wix. This gave me the occasion to learn Wix (I had only created setups with the Visual Studio setup project so far), and to tweak the installer. I am really grateful to Morten for his time!

Yesterday, I published the automated installer for MVVM Light V3. This installer contains binaries, project and item template as well as code snippets for Silverlight 3, Silverlight 4, WPF3.5SP1, WPF4, Windows Phone 7.0 and Windows Phone 7.5 “Mango”. It allows you to develop in Visual Studio 2008, Visual Studio 2010, Expression Blend 4 and/or Visual Studio Express for Windows Phone.

Update: There is a small issue with the installer for non-English installations (only!!) of Visual Studio and Expression Blend. While most features install correctly, the code snippets in VS and the templates in Blend are not installed. We are working on a fix.

And then?

A lot of people asked me when MVVM Light V4 will be published. As I mentioned above, I will release a beta 1 very soon. Beta 1 means that the API should be reasonably stable. I do however have more things I want to fix, so I am also planning a beta 2 before I hit RTM. The goal with beta 2 is to let people test my fixes, just to make sure that I didn’t break anything (yes I do run quite a few unit tests in all available frameworks, but… errare humanum est!).

It is really hard for me to give a precise timeline for those releases, because of work, a new house that we are moving to in August, my wonderful family who also requires some of my time here and there and my greedy Kindle 3 (just finished A Dance with Dragons, that one was pretty amazing). However roughly put, it looks like this:

MVVM Light V4 beta 1 before end of August.
MVVM Light V4 beta 2 not too long after that.
MVVM Light V4 RTM not too long after that

More than ever, I am amazed and delighted at the great feedback I receive from the MVVM Light community. This is not a perfect product, but your continuous constructive feedback keeps me motivated to continue developing and making this toolkit better. Thanks for your fantastic support!

Happy coding!

Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM News Feed

Updated Wiki: Home

lbugnion — Sun, 23 Oct 2011 14:53:04 GMT

Project Description

Get started

More information about the MVVM Light Toolkit can be found on http://www.galasoft.ch/mvvm.

Get more info about MVVM

Understanding the MVVM Pattern (MIX10 session)

http://www.galasoft.ch/mvvmvideo1

Deep Dive MVVM (MIX11 session)

http://www.galasoft.ch/mvvmvideo1

Donate

If you are so enclined, you can donate to MVVM Light Toolkit.
Or, if you prefer, you can pay me a beer next time we're in the same vicinity. Really, it is OK too :)

Latest news:

The latest news about MVVM Light are available from the MVVM feed on my blog at http://blog.galasoft.ch/category/10201.aspx.
(RSS feed).

MVVM News Feed

MVVM Light Toolkit for Windows 8 (preview) #mvvmlight #win8

Monday, October 03, 2011 | From MVVM

Installation

Note however that if you uninstall MVVM Light V3/V4b, but still want to keep MVVM Light for Win8, you may have to repair MVVM Light for Win8. Simply run the installer again and select “Repair”.

Ported components

Almost all MVVM Light components are also available in the Windows 8 version. The ported components are:

ObservableObject including all ways to raise PropertyChanged.
ViewModelBase including all ways to raise PropertyChanged.
Messenger including all message types except DialogMessage (see below).
RelayCommand with and without parameter.
SimpleIoc which might well be the very first IOC container working on Windows 8.

File, New Project

I also created a Metro style version of the MVVM Light project template. To create a new MVVM Light-powered Metro Style application, follow the steps:

Select the menu File, New, Project.
In the New Project dialog, select the category Visual C# / Wndows Metro style and double click the MvvmLight (Win8) template.

Missing components

Skins: There is a small change in the way that resource dictionaries are handled in Windows 8. I need to sort things out, so right now there is no “MainSkin.xaml” in the project template.
DialogMessage: This type is bugging me in V3/V4b because it is bringing the MessageBoxResult type into the ViewModel. I am looking at ways to make it better by converting the MessageBoxResult into a vanilla Boolean. In Windows 8, MessageBoxResult does not exist anymore (there is no MessageBox or popups of any kinds in Metro style apps). Consequently, the DialogMessage does not build, and I decided to just remove it for now. I will add it again when I refactor to the “vanilla” version.
EventToCommand: There are no Blend behaviors in Windows 8 yet (important word: yet). I am looking at ways to have behaviors on Windows 8 before Blend 5 for XAML gets released. Stay tuned.
DispatcherHelper: The Dispatcher object has changed quite a lot in Windows 8, and I am looking at ways to keep the DispatcherHelper compatible with previous versions of MVVM Light by wrapping these differences. It shouldn’t be a big deal, but I want to give myself a little time to get it right (hopefully).

Next steps

I encourage everyone to try these components in Windows 8 preview, and please don’t be shy with your feedback!

Cheers,
Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Breaking change: Raising PropertyChanged with string.Empty in WinRT / Windows 8

Sunday, September 25, 2011 | From MVVM

In the developer preview of Windows 8, I just noticed a breaking change in the way that data bindings react to the PropertyChanged event.

Raising with string.Empty or null

The breaking change in WinRT

Hopefully this is only an oversight and this will be fixed in a future version.

Cheers,
Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Quick tip: Select the correct INotifyPropertyChanged in Windows 8 / WinRT

Sunday, September 25, 2011 | From MVVM

Cheers,

Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Detecting design mode in Windows 8/WinRT

Sunday, September 25, 2011 | From MVVM

Detecting design mode was always incompatible in WPF and in Silverlight.

In WPF, we use a rather complicated snippet:

var prop = DesignerProperties.IsInDesignModeProperty;
_isInDesignMode
    = (bool)DependencyPropertyDescriptor
                 .FromProperty(prop, typeof(FrameworkElement))
                 .Metadata.DefaultValue;

In Silverlight, there is a convenient property:

_isInDesignMode = DesignerProperties.IsInDesignTool;

In WinRT, we have to use yet another property:

_isInDesignMode 
    = Windows.ApplicationModel.DesignMode.DesignModeEnabled;

Abstracting the differences

These differences can make it difficult to share code between these environments. This is why the MVVM Light toolkit abstracts these and provides a convenient property on the ViewModelBase class:

(within a ViewModel deriving from ViewModelBase):

if (IsInDesignMode)
{
    // Create design time data
}
else
{
    // Create run time data
}

(within any class not deriving from ViewModelBase):

if (ViewModelBase.IsInDesignModeStatic)
{
    // Create design time data
}
else
{
    // Create run time data
}

Happy coding!

Laurent

Laurent Bugnion (GalaSoft)

Subscribe | Twitter | Facebook | Flickr | LinkedIn

Quick tip: Adding objects in resources.

Tuesday, September 20, 2011 | From MVVM

<UserControl.Resources>
    <vm:MyViewModel x:Key="MyViewModel"
                    xmlns:vm="using:Application1.ViewModel" />
</UserControl.Resources>

<UserControl.DataContext>
    <Binding Source="{StaticResource MyViewModel}" />
</UserControl.DataContext>

partial class MainPage
{
    public MainPage()
    {
        InitializeComponent();
        DataContext = new MyViewModel();
    }
}

Laurent Bugnion (GalaSoft)

Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM Light V4 beta1

Monday, September 12, 2011 | From MVVM

There are quite a few changes in this version, and I plan to blog about various features in the coming days. As usual, stay tuned!

Change log

General changes

Added XmlnsDefinitionAttribute for GalaSoft.MvvmLight.Command in Extras assembly.

Setup

Created an installer.

Messenger

Fixed Issue #7521: race condition in Messenger.Default.
Fixed Issue #7539: Messenger support for uncast objects.

ViewModelBase

Added support for RaisePropertyChanged(null) and RaisePropertyChanged(string.empty). A blog post about this will follow.
Fixed Issue #7520: RaisePropertyChanged() fails in ReleaseBuild. This overload was removed because of the many issues, and replaced by the Set methods.
Added Set(...) methods. A blog post about this will follow.

RelayCommand

Fixed Issue #7522: used deprecated Predicate instead of Func.
Fixed Issue #7534: RelayCommand has security issue.

SimpleIoc

Implemented method IsRegistered<T>(). A blog post about this will follow.
Fixed issue "Contains<T>() is returning true even if no instance was already instantiated". Contains<T>() only returns true if an instance is already created. IsRegistered<T>() returns true if the class has been registered with the IOC container.
Fixed issue "Instances get created at registration already when registered with a key and a factory". Registering the instance does not execute the factory method yet. The method is only executed when the method GetInstance is called the first time.
Fixed issue "Use the correct DLLs for CommonServiceLocator". The original DLLs from http://commonservicelocator.codeplex.com are now used everywhere.

DispatcherHelper

The class was moved from GalaSoft.MvvmLight.Extras.dll into GalaSoft.MvvmLight.dll.

Project Templates

A couple of internal changes to the template's structure.
Using the new slightly modified MVVM Light logo.

ViewModelLocator Template

Modified template to use SimpleIoc.
A couple of internal changes to the template's structure.
Using the new slightly modified MVVM Light logo.

ViewModel Template

A couple of internal changes to the template's structure.
Using the new slightly modified MVVM Light logo.

View Template

Fixed issue in XAML for WP7 and WP7.1 templates.
A couple of internal changes to the template's structure.
Using the new slightly modified MVVM Light logo.

INPC snippet

Setter in property is now public.
Added $end$ marker.
Added new snippets with various ways to call RaisePropertyChanged.
Added a snippet using the new ViewModelBase.Set() method.
A blog post will follow about all this.

ViewModelLocator property snippet

Added $end$ marker.
Modified to use SimpleIoc.

Relay Command snippets

Added code snippets for RelayCommands. A blog post about this will follow.

Details

XmlnsDefinitionAttribute for GalaSoft.MvvmLight.Command in Extras assembly

Thanks to the addition of XmlnsDefinitionAttribute, you can simplify the inclusion of the MVVM Light EventToCommand action in XAML. See the before and after below:

Before:

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
             
             xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.SL4"
             
             xmlns:cmd="http://www.galasoft.ch/mvvmlight" 
             x:Class="MvvmLight4.MainPage">

After:

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
             xmlns:cmd="http://www.galasoft.ch/mvvmlight" 
             x:Class="MvvmLight4.MainPage">

Laurent Bugnion (GalaSoft)

Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM light V3 installer for non-English systems

Thursday, September 01, 2011 | From MVVM

Happy coding,

Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Automated installer for MVVM Light V3!

Saturday, August 06, 2011 | From MVVM

And then?

MVVM Light V4 beta 1 before end of August.
MVVM Light V4 beta 2 not too long after that.
MVVM Light V4 RTM not too long after that

Happy coding!

Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM News Feed

Updated Wiki: Home

lbugnion — Sun, 23 Oct 2011 14:52:31 GMT

Project Description

Get started

More information about the MVVM Light Toolkit can be found on http://www.galasoft.ch/mvvm/getstarted.

Get more info about MVVM

Understanding the MVVM Pattern (MIX10 session)

http://www.galasoft.ch/mvvmvideo1

Deep Dive MVVM (MIX11 session)

http://www.galasoft.ch/mvvmvideo1

Donate

If you are so enclined, you can donate to MVVM Light Toolkit.
Or, if you prefer, you can pay me a beer next time we're in the same vicinity. Really, it is OK too :)

Latest news:

The latest news about MVVM Light are available from the MVVM feed on my blog at http://blog.galasoft.ch/category/10201.aspx.
(RSS feed).

MVVM News Feed

MVVM Light Toolkit for Windows 8 (preview) #mvvmlight #win8

Monday, October 03, 2011 | From MVVM

Installation

Note however that if you uninstall MVVM Light V3/V4b, but still want to keep MVVM Light for Win8, you may have to repair MVVM Light for Win8. Simply run the installer again and select “Repair”.

Ported components

Almost all MVVM Light components are also available in the Windows 8 version. The ported components are:

ObservableObject including all ways to raise PropertyChanged.
ViewModelBase including all ways to raise PropertyChanged.
Messenger including all message types except DialogMessage (see below).
RelayCommand with and without parameter.
SimpleIoc which might well be the very first IOC container working on Windows 8.

File, New Project

I also created a Metro style version of the MVVM Light project template. To create a new MVVM Light-powered Metro Style application, follow the steps:

Select the menu File, New, Project.
In the New Project dialog, select the category Visual C# / Wndows Metro style and double click the MvvmLight (Win8) template.

Missing components

Skins: There is a small change in the way that resource dictionaries are handled in Windows 8. I need to sort things out, so right now there is no “MainSkin.xaml” in the project template.
DialogMessage: This type is bugging me in V3/V4b because it is bringing the MessageBoxResult type into the ViewModel. I am looking at ways to make it better by converting the MessageBoxResult into a vanilla Boolean. In Windows 8, MessageBoxResult does not exist anymore (there is no MessageBox or popups of any kinds in Metro style apps). Consequently, the DialogMessage does not build, and I decided to just remove it for now. I will add it again when I refactor to the “vanilla” version.
EventToCommand: There are no Blend behaviors in Windows 8 yet (important word: yet). I am looking at ways to have behaviors on Windows 8 before Blend 5 for XAML gets released. Stay tuned.
DispatcherHelper: The Dispatcher object has changed quite a lot in Windows 8, and I am looking at ways to keep the DispatcherHelper compatible with previous versions of MVVM Light by wrapping these differences. It shouldn’t be a big deal, but I want to give myself a little time to get it right (hopefully).

Next steps

I encourage everyone to try these components in Windows 8 preview, and please don’t be shy with your feedback!

Cheers,
Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Breaking change: Raising PropertyChanged with string.Empty in WinRT / Windows 8

Sunday, September 25, 2011 | From MVVM

In the developer preview of Windows 8, I just noticed a breaking change in the way that data bindings react to the PropertyChanged event.

Raising with string.Empty or null

The breaking change in WinRT

Hopefully this is only an oversight and this will be fixed in a future version.

Cheers,
Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Quick tip: Select the correct INotifyPropertyChanged in Windows 8 / WinRT

Sunday, September 25, 2011 | From MVVM

Cheers,

Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Detecting design mode in Windows 8/WinRT

Sunday, September 25, 2011 | From MVVM

Detecting design mode was always incompatible in WPF and in Silverlight.

In WPF, we use a rather complicated snippet:

var prop = DesignerProperties.IsInDesignModeProperty;
_isInDesignMode
    = (bool)DependencyPropertyDescriptor
                 .FromProperty(prop, typeof(FrameworkElement))
                 .Metadata.DefaultValue;

In Silverlight, there is a convenient property:

_isInDesignMode = DesignerProperties.IsInDesignTool;

In WinRT, we have to use yet another property:

_isInDesignMode 
    = Windows.ApplicationModel.DesignMode.DesignModeEnabled;

Abstracting the differences

These differences can make it difficult to share code between these environments. This is why the MVVM Light toolkit abstracts these and provides a convenient property on the ViewModelBase class:

(within a ViewModel deriving from ViewModelBase):

if (IsInDesignMode)
{
    // Create design time data
}
else
{
    // Create run time data
}

(within any class not deriving from ViewModelBase):

if (ViewModelBase.IsInDesignModeStatic)
{
    // Create design time data
}
else
{
    // Create run time data
}

Happy coding!

Laurent

Laurent Bugnion (GalaSoft)

Subscribe | Twitter | Facebook | Flickr | LinkedIn

Quick tip: Adding objects in resources.

Tuesday, September 20, 2011 | From MVVM

<UserControl.Resources>
    <vm:MyViewModel x:Key="MyViewModel"
                    xmlns:vm="using:Application1.ViewModel" />
</UserControl.Resources>

<UserControl.DataContext>
    <Binding Source="{StaticResource MyViewModel}" />
</UserControl.DataContext>

partial class MainPage
{
    public MainPage()
    {
        InitializeComponent();
        DataContext = new MyViewModel();
    }
}

Laurent Bugnion (GalaSoft)

Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM Light V4 beta1

Monday, September 12, 2011 | From MVVM

There are quite a few changes in this version, and I plan to blog about various features in the coming days. As usual, stay tuned!

Change log

General changes

Added XmlnsDefinitionAttribute for GalaSoft.MvvmLight.Command in Extras assembly.

Setup

Created an installer.

Messenger

Fixed Issue #7521: race condition in Messenger.Default.
Fixed Issue #7539: Messenger support for uncast objects.

ViewModelBase

Added support for RaisePropertyChanged(null) and RaisePropertyChanged(string.empty). A blog post about this will follow.
Fixed Issue #7520: RaisePropertyChanged() fails in ReleaseBuild. This overload was removed because of the many issues, and replaced by the Set methods.
Added Set(...) methods. A blog post about this will follow.

RelayCommand

Fixed Issue #7522: used deprecated Predicate instead of Func.
Fixed Issue #7534: RelayCommand has security issue.

SimpleIoc

Implemented method IsRegistered<T>(). A blog post about this will follow.
Fixed issue "Contains<T>() is returning true even if no instance was already instantiated". Contains<T>() only returns true if an instance is already created. IsRegistered<T>() returns true if the class has been registered with the IOC container.
Fixed issue "Instances get created at registration already when registered with a key and a factory". Registering the instance does not execute the factory method yet. The method is only executed when the method GetInstance is called the first time.
Fixed issue "Use the correct DLLs for CommonServiceLocator". The original DLLs from http://commonservicelocator.codeplex.com are now used everywhere.

DispatcherHelper

The class was moved from GalaSoft.MvvmLight.Extras.dll into GalaSoft.MvvmLight.dll.

Project Templates

A couple of internal changes to the template's structure.
Using the new slightly modified MVVM Light logo.

ViewModelLocator Template

Modified template to use SimpleIoc.
A couple of internal changes to the template's structure.
Using the new slightly modified MVVM Light logo.

ViewModel Template

A couple of internal changes to the template's structure.
Using the new slightly modified MVVM Light logo.

View Template

Fixed issue in XAML for WP7 and WP7.1 templates.
A couple of internal changes to the template's structure.
Using the new slightly modified MVVM Light logo.

INPC snippet

Setter in property is now public.
Added $end$ marker.
Added new snippets with various ways to call RaisePropertyChanged.
Added a snippet using the new ViewModelBase.Set() method.
A blog post will follow about all this.

ViewModelLocator property snippet

Added $end$ marker.
Modified to use SimpleIoc.

Relay Command snippets

Added code snippets for RelayCommands. A blog post about this will follow.

Details

XmlnsDefinitionAttribute for GalaSoft.MvvmLight.Command in Extras assembly

Thanks to the addition of XmlnsDefinitionAttribute, you can simplify the inclusion of the MVVM Light EventToCommand action in XAML. See the before and after below:

Before:

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
             
             xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.SL4"
             
             xmlns:cmd="http://www.galasoft.ch/mvvmlight" 
             x:Class="MvvmLight4.MainPage">

After:

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
             xmlns:cmd="http://www.galasoft.ch/mvvmlight" 
             x:Class="MvvmLight4.MainPage">

Laurent Bugnion (GalaSoft)

Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM light V3 installer for non-English systems

Thursday, September 01, 2011 | From MVVM

Happy coding,

Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Automated installer for MVVM Light V3!

Saturday, August 06, 2011 | From MVVM

And then?

MVVM Light V4 beta 1 before end of August.
MVVM Light V4 beta 2 not too long after that.
MVVM Light V4 RTM not too long after that

Happy coding!

Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM News Feed

Updated Wiki: Home

lbugnion — Mon, 08 Aug 2011 08:31:11 GMT

Project Description

Get started

More information about the MVVM Light Toolkit can be found on http://www.galasoft.ch/mvvm/getstarted.

Get more info about MVVM

Understanding the MVVM Pattern (MIX10 session)

http://live.visitmix.com/MIX10/Sessions/EX14

Deep Dive MVVM (MIX11 session, please vote for it!)

http://live.visitmix.com/OpenCall/Vote/Session/21

Donate

If you are so enclined, you can donate to MVVM Light Toolkit.
Or, if you prefer, you can pay me a beer next time we're in the same vicinity. Really, it is OK too :)

Latest news:

The latest news about MVVM Light are available from the MVVM feed on my blog at http://blog.galasoft.ch/category/10201.aspx.
(RSS feed: http://blog.galasoft.ch/lbugnion/category/10201.aspx/rss).

MVVM News Feed

Proposing a new RelayCommand snippet for MVVM Light V4

Wednesday, June 15, 2011 | From MVVM

In MVVM Light V4, I am proposing a new RelayCommand snippet, making it easier to declare and initialize a RelayCommand. I came up with a syntax that allows having the RelayCommand and its initialization in one convenient location.

I am looking for feedback, so leave your comments below!!

RelayCommand

This is the code created by the code snippet after expansion, for a simple RelayCommand.

private RelayCommand _testCommand;

/// <summary>
/// Gets the TestCommand.
/// </summary>
public RelayCommand TestCommand
{
    get
    {
        return _testCommand ?? (_testCommand = new RelayCommand(
            () =>
            {
                // Execute delegate
                throw new NotImplementedException();
            },
            () =>
            {
                // CanExecute delegate
                throw new NotImplementedException();
            }));
    }
}

RelayCommand<T>

This is the code created by the code snippet after expansion, for a generic RelayCommand (with parameter).

private RelayCommand<string> _testAgainCommand;

/// <summary>
/// Gets the TestAgainCommand.
/// </summary>
public RelayCommand<string> TestAgainCommand
{
    get
    {
        return _testAgainCommand ?? (_testAgainCommand = new RelayCommand<string>(
            p =>
            {
                // Execute delegate
                throw new NotImplementedException();
            },
            p =>
            {
                // CanExecute delegate
                throw new NotImplementedException();
            }));
    }
}

Conclusion

Do you find this way of creating the RelayCommands convenient? This limits the number of key press to a minimum (the only parameters to enter are the attribute name, the command’s name and (in the case of the generic RelayCommand) the type of the parameter. Looking for feedback before I consolidate this for V4!

Happy coding!

Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM Light Toolkit patch for WP7 Mango Beta

Tuesday, May 24, 2011 | From MVVM

On Tuesday the 24th of May 2011, the new version of the Windows Phone 7 SDK codenamed “Mango” was released to the public in beta. This is a huge iteration with an extremely large number of new APIs. Most exciting, the version of the Silverlight framework now used in Windows Phone 7 is Silverlight 4. Thanks to this, I was able to recompile the MVVM Light Toolkit for Windows Phone 7 based on the Silverlight 4 version. This is interesting because the Silverlight 3 version had a few hacks I had to build in to work around some limitations of the framework. Now in Silverlight 4, the code is leaner and cleaner.

More details about the download and installation of the "Mango beta" path for MVVM Light can be found here.

Happy Mango coding!!

Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Is your application powered by #mvvmlight?

Friday, May 20, 2011 | From MVVM

A couple of days ago I had the wonderful surprise to find a mention (and a link!) to MVVM Light on USAToday.com. The article talks about the new USA Today app available for Windows Phone 7. MVVM Light is mentioned as well as JSON.NET just after the high quality of the development tools is mentioned:

“That same high bar for tools extends into the community as well. MVVM Light and JSON.Net were extremely useful moving past mundane tasks and instead getting to the business of building our app.” – Tim Carlson, USA TODAY

This is of course fantastic, but it made me realize that I did not, until now, keep track of what applications (in Windows Phone 7 but also Silverlight and WPF) use MVVM Light to facilitate the development.

An appeal to MVVM Light users

In order to correct this, I would love to hear from you. Do you use MVVM Light? Did you publish an application (WP7, Silverlight, WPF) using the bits? If yes, do you mind answering the following optional questions:

What is the name and homepage of your project?
What framework is it? (WP7, Silverlight, WPF?)
Do you allow me to use this info for promotion (on the MVVM Light Toolkit’s page, or in conferences)? (if you prefer me to keep this info confidential, you have my assurance that I will happily comply).

Feel free to answer in the comments below, or per email to laurent@galasoft.ch. This is, in advance, very much appreciated!

Happy coding,
Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM Light V3 on NuGet (now with WP7 support)

Saturday, May 07, 2011 | From MVVM

There was already a version of MVVM Light on Nuget before. However the old version did not support Windows Phone 7. This is now corrected. Also the new version now adds a ViewModelLocator to your project and includes it in App.xaml.

What is NuGet?

NuGet is a mechanism allowing to add packages (assemblies, source code…) to an existing project. All versions of MVVM Light are supported (WPF3.5, WPF4, Silverlight 3, Silverlight 4, Windows Phone 7).

In order to install NuGet and learn more about this cool package manager, go to http://nuget.org

Finding and installing MVVM Light with NuGet

To find MVVM Light in NuGet, follow the steps:

Open your project in Visual Studio 2010.
Right click on the References folder and select “Add Library Package Reference” from the context menu.

Note: Should that menu item be missing, you need to install the NuGet package manager. Go to http://nuget.org and follow the indications.

In the “Search Online” field, enter “mvvmlight” and press Enter.
Select the MVVM Light package and press the Install button.

After these steps, the following changes have been made to your project:

A “packages” folder was added with the following libraries. Note that this folder is added to the root of the project structure and does not appear in the Solution Explorer.
- The MVVM Light DLLs: GalaSoft.MvvmLight and GalaSoft.MvvmLight.Extras.
- The referenced System.Windows.Interactivity.dll, needed by the GalaSoft.MvvmLight.Extras assembly.
A ViewModel folder was added with two additional classes:
- ViewModelLocator.cs
- MainViewModel.cs
The App.xaml file was modified with the addition of the ViewModelLocator as global resource.

Binding the DataContext in XAML

With the new file structure, the ViewModelLocator is exposed in App.xaml (global resources) and can be used as the source of the DataContext bindings.

The MainViewModel that has also been added to the project is exposed in the ViewModelLocator as a property. for more details about this architecture, please refer to Understanding the MVVM pattern and Deep Dive MVVM.

Note: In case you do not need the MainViewModel in your project, feel free to remove this class.

In order to use the MainViewModel as the DataContext of the MainPage or MainWindow, use the following steps:

Open MainPage.xaml or MainWindow.xaml.
Add the following line to the opening tag of the MainPage/MainWindow:

DataContext="{Binding Main, Source={StaticResource Locator}}"

From now on, the DataContext of the MainPage/MainWindow is set to the instance of MainViewModel exposed by the ViewModelLocator. These steps can be repeated at will with different views/viewmodels pairs.

Binding the DataContext in Blend

The DataContext can also be databound visually in Expression Blend with the following steps.

Open your project in Blend.

Build the application.

Open MainPage/MainWindow.

In the Objects and Timeline panel, select the UserControl.

In the Properties panel, select the DataContext property (in the Common Properties section).

Click on the small Advanced options peg right of the property field and select Data Binding from the context menu.

In the Data Binding editor, select the Data Field tab and the Locator data source. Note: If you don’t see the Locator field, you need to build the project.

In the Fields area, expand the ViewModelLocator and select the Main property. Then press OK to close the Data Binding editor.

Installing without the ViewModel folder (libraries only)

Some users prefer to work without a ViewModelLocator, and are only interested in the MVVM Light assemblies. Unfortunately there is not really a way to specify options when using NuGet. So I created a different “barebone” package, named “MvvmLightLibs” which contains only the libraries and nothing else. To install this “barebone” version, follow the steps above, but select “MvvmLightLibs” instead of MvvmLight.

Installing from the command line

There is also a way to use NuGet without Visual Studio, from the command line. A good description is available on this blog.

Tell me what you think!

I am very interested to know what you guys think of the experience with NuGet. Please let me know if you like it!

Laurent Bugnion (GalaSoft)

Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM Light V4 preview 3 (BL16, MIX11 edition!!) #mvvmlight

Thursday, April 14, 2011 | From MVVM

At MIX11, I am releasing a new preview of MVVM Light version 4. This new preview contains one small change and one large change.

ObservableObject replaces NotifyPropertyChanged

In the previous preview, I introduced a new class named NotifyPropertyChanged. However, I got a few suggestions to rename this class to ObservableObject, which is indeed a better name. In BL16, NotifyPropertyChanged was deleted and replaced by ObservableObject. Nothing else changes, just the name.

ObservableObject is a very simple implementation of INotifyPropertyChanged suitable for data objects (in the Model, typically) that need to raise the PropertyChanged event, but that are not quite ViewModels. In my MIX11 session, I demo a usage of ObservableObject to build an application using JSON. In WCF, we don’t really need ObservableObject, since all the generated proxies will automatically implement INotifyPropertyChanged.

We have:

Introducing SimpleIoc, a simple IOC container

Last year at MIX10, I did a demo using the Unity IOC container. This helper simplifies the creation and the resolution of services and of the ViewModels, and allows for a cleaner syntax in the ViewModelLocator. Since then, I have tried a multitude of variants for the ViewModelLocator class, and I still came back, over and over again, to the same idea: using an IOC container to do the bulk of the work.

However, I did not want to settle on a given IOC container. There are so many of them, each with specific features, and each with an army of followers so instead… I created my own. Well, to be honest I inspired myself strongly from an existing simple IOC implementation, and I extended it with features that are super useful when working with ViewModels. Also a source of inspiration, the SimpleServiceLocator available on Codeplex.

A more complete article dedicated to the SimpleIoc class in MVVM Light V4 will follow. Also, my MIX11 session “Deep Dive MVVM” features the SimpleIoc in the samples. The session’s recording is available at http://channel9.msdn.com/Events/MIX/MIX11/OPN03.

Cheers,

Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Deep Dive MVVM samples #mix11 #deepdivemvvm

Wednesday, April 13, 2011 | From MVVM

Here is the sample code I demoed in my MIX11 session “Deep Dive MVVM”. Please download the Zip file, and then unblock it in Windows Explorer by right-clicking it, and then selecting Properties. If you see an “Unblock” button, please click it. You can then extract the content of the Zip file on your hard drive.

The slides are also available for download.

Last year’s session

To fully understand this session, an understanding of what MVVM is should be available. I recommend the following links:

“Understanding the MVVM pattern” is the session I presented at MIX10.
Sample code for “Understanding the MVVM pattern”.
MVVM Light Toolkit “Get Started” page.
MVVM Light Toolkit on Codeplex.

This year’s session

The video of Deep Dive MVVM is already available for download (awesome job, MIX team). Go to the MIX website to download it in various formats, or stream it.

Prerequisites

To execute the samples, you should have Visual Studio 2010 as well as the Windows Phone 7 tools installed.

Snippets

For your convenience, I added the snippets of code that I was dragging/dropping from the Toolbox during the session. The file “snippets.txt” is included inside the ZIP file.

00 JsonDemo – Start

This is the start state, which will compile and run fine, but without the added functionality we built in during the session.

01 JsonDemo - After wiring up

This is the state of the application after the first demo, where all the objects are wired up and connected, and the message is sent from the MasterViewModel to the DetailsViewModel. We also added the IsOlderThanMeIndicatorVisibility property and connected it to the corresponding Rectangle in the DataTemplate (in the MasterView).

02 JsonDemo – Behaviors

This is the state after adding the “please wait” animation, the states and connecting the MasterViewModel’s IsBusy property to the GoToStateAction and ControlStoryboardAction instances through the DataTrigger. In Windows Phone 7, we added some code behind to replicate the functionality.

03 JsonDemo - WP7 DialogService

In this section we added a view service, the IDialogService, to the WP7 application and implemented it to display a custom message box. In SL4, the functionality is also available although no custom message box was made, so the fallback MessageBox is used instead.

04 NavigationDemo

This section introduces another view service, the INavigationService with one implementation in Silverlight 4 and one for Windows Phone 7.

05 JsonDemo - Unit test

In this last section, we add unit tests (with mock, well precisely with stubs!) to the Silverlight 4 and to the Windows Phone 7 applications. This is the final state of the demo.

I hope that this session was helpful, and that it will help you build awesome MVVM applications!

Happy coding,

Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

My MVVM talk’s material is online (#uktechdays)

Thursday, March 24, 2011 | From MVVM

Quick announcement: I just had the extreme pleasure to talk at the UK TechDays online conference (organized over LiveMeeting) and had about 100 persons in the session, thanks to all for allowing me to talk to you about MVVM!

I just pushed the whole sample code as well as the slides to a SkyDrive folder, so feel free to download and experiment.

And don’t forget:

A recording of session with similar material but with 30 minutes more time for additional samples is online for your viewing pleasure.
Deep Dive MVVM at MIX11 will go much deeper and show advanced samples around MVVM, view services, unit testing a VM, and more.

The session was recorded, and I will announce in this space when it is online for your (re-)viewing pleasure.

Cheers,

Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Building MVVM Light from Codeplex

Sunday, March 20, 2011 | From MVVM

I just published an article describing how to get the source code from Codeplex, build it, unit test it, get all the DLLs and install them to replace a previously installed version. It’s not very complicated, but it is good to have this information in one location.

The article is available at http://www.galasoft.ch/mvvm/building/

Happy coding!

Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM News Feed

Updated Wiki: Home

lbugnion — Mon, 08 Aug 2011 08:29:47 GMT

Project Description

Get started

More information about the MVVM Light Toolkit can be found on http://www.galasoft.ch/mvvm/getstarted.

Get more info about MVVM

Understanding the MVVM Pattern (MIX10 session)

http://live.visitmix.com/MIX10/Sessions/EX14

Deep Dive MVVM (MIX11 session, please vote for it!)

http://live.visitmix.com/OpenCall/Vote/Session/21

Donate

If you are so enclined, you can donate to MVVM Light Toolkit.
Or, if you prefer, you can pay me a beer next time we're in the same vicinity. Really, it is OK too :)

Latest news:

The latest news about MVVM Light are available from the MVVM feed on my blog at http://blog.galasoft.ch/category/10201.aspx.

MVVM News Feed

Proposing a new RelayCommand snippet for MVVM Light V4

Wednesday, June 15, 2011 | From MVVM

I am looking for feedback, so leave your comments below!!

RelayCommand

This is the code created by the code snippet after expansion, for a simple RelayCommand.

private RelayCommand _testCommand;

/// <summary>
/// Gets the TestCommand.
/// </summary>
public RelayCommand TestCommand
{
    get
    {
        return _testCommand ?? (_testCommand = new RelayCommand(
            () =>
            {
                // Execute delegate
                throw new NotImplementedException();
            },
            () =>
            {
                // CanExecute delegate
                throw new NotImplementedException();
            }));
    }
}

RelayCommand<T>

This is the code created by the code snippet after expansion, for a generic RelayCommand (with parameter).

private RelayCommand<string> _testAgainCommand;

/// <summary>
/// Gets the TestAgainCommand.
/// </summary>
public RelayCommand<string> TestAgainCommand
{
    get
    {
        return _testAgainCommand ?? (_testAgainCommand = new RelayCommand<string>(
            p =>
            {
                // Execute delegate
                throw new NotImplementedException();
            },
            p =>
            {
                // CanExecute delegate
                throw new NotImplementedException();
            }));
    }
}

Conclusion

Happy coding!

Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM Light Toolkit patch for WP7 Mango Beta

Tuesday, May 24, 2011 | From MVVM

More details about the download and installation of the "Mango beta" path for MVVM Light can be found here.

Happy Mango coding!!

Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Is your application powered by #mvvmlight?

Friday, May 20, 2011 | From MVVM

An appeal to MVVM Light users

What is the name and homepage of your project?
What framework is it? (WP7, Silverlight, WPF?)
Do you allow me to use this info for promotion (on the MVVM Light Toolkit’s page, or in conferences)? (if you prefer me to keep this info confidential, you have my assurance that I will happily comply).

Feel free to answer in the comments below, or per email to laurent@galasoft.ch. This is, in advance, very much appreciated!

Happy coding,
Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM Light V3 on NuGet (now with WP7 support)

Saturday, May 07, 2011 | From MVVM

What is NuGet?

In order to install NuGet and learn more about this cool package manager, go to http://nuget.org

Finding and installing MVVM Light with NuGet

To find MVVM Light in NuGet, follow the steps:

Open your project in Visual Studio 2010.
Right click on the References folder and select “Add Library Package Reference” from the context menu.

Note: Should that menu item be missing, you need to install the NuGet package manager. Go to http://nuget.org and follow the indications.

In the “Search Online” field, enter “mvvmlight” and press Enter.
Select the MVVM Light package and press the Install button.

After these steps, the following changes have been made to your project:

A “packages” folder was added with the following libraries. Note that this folder is added to the root of the project structure and does not appear in the Solution Explorer.
- The MVVM Light DLLs: GalaSoft.MvvmLight and GalaSoft.MvvmLight.Extras.
- The referenced System.Windows.Interactivity.dll, needed by the GalaSoft.MvvmLight.Extras assembly.
A ViewModel folder was added with two additional classes:
- ViewModelLocator.cs
- MainViewModel.cs
The App.xaml file was modified with the addition of the ViewModelLocator as global resource.

Binding the DataContext in XAML

With the new file structure, the ViewModelLocator is exposed in App.xaml (global resources) and can be used as the source of the DataContext bindings.

Note: In case you do not need the MainViewModel in your project, feel free to remove this class.

In order to use the MainViewModel as the DataContext of the MainPage or MainWindow, use the following steps:

Open MainPage.xaml or MainWindow.xaml.
Add the following line to the opening tag of the MainPage/MainWindow:

DataContext="{Binding Main, Source={StaticResource Locator}}"

Binding the DataContext in Blend

The DataContext can also be databound visually in Expression Blend with the following steps.

Open your project in Blend.

Build the application.

Open MainPage/MainWindow.

In the Objects and Timeline panel, select the UserControl.

In the Properties panel, select the DataContext property (in the Common Properties section).

Click on the small Advanced options peg right of the property field and select Data Binding from the context menu.

In the Data Binding editor, select the Data Field tab and the Locator data source. Note: If you don’t see the Locator field, you need to build the project.

In the Fields area, expand the ViewModelLocator and select the Main property. Then press OK to close the Data Binding editor.

Installing without the ViewModel folder (libraries only)

Installing from the command line

There is also a way to use NuGet without Visual Studio, from the command line. A good description is available on this blog.

Tell me what you think!

I am very interested to know what you guys think of the experience with NuGet. Please let me know if you like it!

Laurent Bugnion (GalaSoft)

Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM Light V4 preview 3 (BL16, MIX11 edition!!) #mvvmlight

Thursday, April 14, 2011 | From MVVM

At MIX11, I am releasing a new preview of MVVM Light version 4. This new preview contains one small change and one large change.

ObservableObject replaces NotifyPropertyChanged

We have:

Introducing SimpleIoc, a simple IOC container

Cheers,

Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Deep Dive MVVM samples #mix11 #deepdivemvvm

Wednesday, April 13, 2011 | From MVVM

The slides are also available for download.

Last year’s session

To fully understand this session, an understanding of what MVVM is should be available. I recommend the following links:

“Understanding the MVVM pattern” is the session I presented at MIX10.
Sample code for “Understanding the MVVM pattern”.
MVVM Light Toolkit “Get Started” page.
MVVM Light Toolkit on Codeplex.

This year’s session

The video of Deep Dive MVVM is already available for download (awesome job, MIX team). Go to the MIX website to download it in various formats, or stream it.

Prerequisites

To execute the samples, you should have Visual Studio 2010 as well as the Windows Phone 7 tools installed.

Snippets

For your convenience, I added the snippets of code that I was dragging/dropping from the Toolbox during the session. The file “snippets.txt” is included inside the ZIP file.

00 JsonDemo – Start

This is the start state, which will compile and run fine, but without the added functionality we built in during the session.

01 JsonDemo - After wiring up

02 JsonDemo – Behaviors

03 JsonDemo - WP7 DialogService

04 NavigationDemo

This section introduces another view service, the INavigationService with one implementation in Silverlight 4 and one for Windows Phone 7.

05 JsonDemo - Unit test

In this last section, we add unit tests (with mock, well precisely with stubs!) to the Silverlight 4 and to the Windows Phone 7 applications. This is the final state of the demo.

I hope that this session was helpful, and that it will help you build awesome MVVM applications!

Happy coding,

Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

My MVVM talk’s material is online (#uktechdays)

Thursday, March 24, 2011 | From MVVM

I just pushed the whole sample code as well as the slides to a SkyDrive folder, so feel free to download and experiment.

And don’t forget:

A recording of session with similar material but with 30 minutes more time for additional samples is online for your viewing pleasure.
Deep Dive MVVM at MIX11 will go much deeper and show advanced samples around MVVM, view services, unit testing a VM, and more.

The session was recorded, and I will announce in this space when it is online for your (re-)viewing pleasure.

Cheers,

Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Building MVVM Light from Codeplex

Sunday, March 20, 2011 | From MVVM

The article is available at http://www.galasoft.ch/mvvm/building/

Happy coding!

Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM News Feed

Updated Wiki: Documentation

lbugnion — Sat, 25 Jun 2011 20:29:05 GMT

Building the code

In order to get the latest source code from the Source Code section, build it, unit test it, and get the latest DLLs installed, check this article:
http://www.galasoft.ch/mvvm/building/

Installing the binaries with NuGet

You can add MVVM Light to an existing Windows Presentation Foundation (3.5 or 4), Silverlight (3 or 4) or to a Windows Phone (7 or 7.1 beta) project with the help of the NuGet package manager. For more information, visit http://blog.galasoft.ch/archive/2011/05/07/mvvm-light-v3-on-nuget-now-with-wp7-support.aspx

Installing the full toolkit (binaries, templates, snippets)

Right now the installation process is still manual as described at http://www.galasoft.ch/mvvm/installing/manually/. This will change soon with an automated installer.

Creating your first application

To create an application in Visual Studio: http://www.galasoft.ch/mvvm/creating/.
To create an application in Blend: http://www.galasoft.ch/mvvm/creatingblend/

Understanding MVVM

To start with MVVM and understand the basics, see my MIX10 session, available in video at http://live.visitmix.com/Archive#VideoList (scroll down to EX14). A slightly longer version (including a Windows Phone 7 demo) is available at http://channel9.msdn.com/posts/kreekman/TechDays-2010-Understanding-the-Model-View-ViewModel-pattern/

A Deep Dive session is going to take place at MIX11 (April 2011), stay tuned for more information.

Getting started with MVVM Light Toolkit

A good "primer" series by Jesse Liberty: http://jesseliberty.com/2011/01/04/wpfs-mvvm-light-toolkit-soup-to-nuts-part-i/
Another nice series by Chris Koenig, using MVVM Light: http://chriskoenig.net/category/development/mvvm/

More articles

There are a lot of articles written about the MVVM Light Toolkit: Info about new versions, documentation about specific components of MVVM Light, etc.
For more information, please check http://www.galasoft.ch/mvvm/#tutorials

Updated Wiki: Documentation

lbugnion — Sun, 20 Mar 2011 16:34:23 GMT

Building the code

In order to get the latest source code from the Source Code section, build it, unit test it, and get the latest DLLs installed, check this article:
http://www.galasoft.ch/mvvm/building/

Installing the toolkit

Right now the installation process is still manual as described at http://www.galasoft.ch/mvvm/installing/manually/. This will change soon with an automated installer.

Creating your first application

To create an application in Visual Studio: http://www.galasoft.ch/mvvm/creating/.
To create an application in Blend: http://www.galasoft.ch/mvvm/creatingblend/

Understanding MVVM

To start with MVVM and understand the basics, see my MIX10 session, available in video at http://live.visitmix.com/Archive#VideoList (scroll down to EX14). A slightly longer version (including a Windows Phone 7 demo) is available at http://channel9.msdn.com/posts/kreekman/TechDays-2010-Understanding-the-Model-View-ViewModel-pattern/

A Deep Dive session is going to take place at MIX11 (April 2011), stay tuned for more information.

Getting started with MVVM Light Toolkit

A good "primer" series by Jesse Liberty: http://jesseliberty.com/2011/01/04/wpfs-mvvm-light-toolkit-soup-to-nuts-part-i/
Another nice series by Chris Koenig, using MVVM Light: http://chriskoenig.net/category/development/mvvm/

More articles

There are a lot of articles written about the MVVM Light Toolkit: Info about new versions, documentation about specific components of MVVM Light, etc.
For more information, please check http://www.galasoft.ch/mvvm/#tutorials

Updated Wiki: Home

lbugnion — Tue, 25 Jan 2011 06:48:46 GMT

Project Description

Get started

More information about the MVVM Light Toolkit can be found on http://www.galasoft.ch/mvvm/getstarted.

Get more info about MVVM

Understanding the MVVM Pattern (MIX10 session)

http://live.visitmix.com/MIX10/Sessions/EX14

Deep Dive MVVM (MIX11 session, please vote for it!)

http://live.visitmix.com/OpenCall/Vote/Session/21

Donate

If you are so enclined, you can donate to MVVM Light Toolkit.
Or, if you prefer, you can pay me a beer next time we're in the same vicinity. Really, it is OK too :)

Latest news:

MVVM News Feed

Back from TechEd Europe 2010 (Berlin) #tee10

Saturday, November 13, 2010 | From MVVM

I spent this week in Berlin in company of about 5000+ other geeks at Microsoft’s TechEd Europe. I had experienced the conference for a very short time last year as I spent just 2 days helping on the Silverlight booth at the Technical Learning Center. This year however I was invited to give two talks and participate in a panel of experts.

Taking Advantage of Microsoft Expression Blend to Build Silverlight 4 Applications:

This session went pretty well even though it was at 6PM on Tuesday. The room was not 100% full but with about 120 people it was very good for that late hour. Of course I wish I could touch *all* developers and encourage them to try Expression Blend, but I guess I need to be patient The talk was to show “where Blend really shines”, i.e. what you can do with Blend that you cannot do with Visual Studio (or much less efficiently). I had samples showing simple things (tweaking/copying gradients for instance) but also more complex ones (animations, visual states, resource management, etc). The feedback has been great, and I hope that everyone learned something.

The slides for this session are here.
The small app built in Blend is here.
The session video can be seen below, and can be downloaded too

Silverlight Experts Roundtable:

This was a fun session. Being there with Pete Brown and Gill Cleeren (and under the moderation of Katrien De Graeve) was really neat. We all found the questions interesting and practice oriented.

I am not 100% sure if the session was recorded or not (I believe it wasn’t). Watch this space and I will post a link if it becomes available.

Your Questions on MVVM (Model-View-ViewModel) Answered:

This was an interactive session, where I was asked to present a short intro to MVVM, and then to turn to the audience for questions. Usually, the European audiences are very shy with questions (not even mentioning that a session at 9AM on the last day of a conference… you know…) but I have to say I was super happy with the way it went. I had 90 people in the room, and the audience was very active! They started asking questions before I was even done with the theory (of course the prospect of getting one copy of Silverlight 4 Unleashed for the first question asked certainly made them very eager ). I was able to show most of the demo code I had prepared, as I had kind of anticipated the questions that would come. I was almost shocked when I checked the clock for the very first time during the session and saw I only had 7 minutes left!!

Side note: One person commented that I sounded a bit like a MVVM evangelist instead of underlining the bad sides of MVVM. Like every pattern, MVVM has pros and cons. I was however guided by the audience in that particular session, and no-one asked about negative aspects. For this particular person, I encourage you to watch my MIX10 session where this question is answered.

The slides for this session are here.
The samples can be downloaded here.
I am not 100% sure if the session was recorded or not (I believe it wasn’t). Watch this space and I will post a link if it becomes available.

Note about the CustomersManager sample

To run this sample, you need to follow the steps:

Open the solution named Customers. This is the WCF service.
In the Solution Explorer, right click the SVC file and select “View in Browser” from the context menu.
Then only you can open and start the CustomersManager solution.

Video: Taking advantage of Blend 4

Laurent Bugnion (GalaSoft)

Subscribe | Twitter | Facebook | Flickr | LinkedIn

Microsoft Shape

Tuesday, October 26, 2010 | From MVVM

Today I have been invited by Microsoft Switzerland to present three of our awesome Windows Phone 7 applications on stage at their yearly Shape conference. It was a great moment, and I felt super proud to show the IMDb app, the Twitter app and the SBB Mobile app. The response was excellent, I didn’t have one single demo effect, was able to stream a movie preview live from the IMDb app, to show most features of the Twitter app, to load a timetable and purchase a ticket from the SBB app, and all this in slightly more than 10 minutes! How cool is that??

The two former apps (IMDb and Twitter) are already available from the marketplace:

The SBB Mobile app is not available yet, but it is in the process of submission and it should be ready very soon for download. All the three apps are free!

WCF RIA Services demo

I also talked about WCF RIA Services, and here are the promised code samples:

The full WCF RIA Services sample, with Customizing columns, Executing CRUD, Displaying messages, Validating, Filtering, Enhancing the UX, Paging, Showing errors, Reconciling data, Printing, Copy/paste, Running out of the browser...
The same sample modified to run out-of-the-browser (OOB).

Once downloaded, right click on the zip file, select Properties, and if you see an Unblock button on the General tab, click it!. Then only extract the content.

The slides are here. The session was recorded and will be posted on Microsoft servers soon (stay tuned for more info!!)

Laurent Bugnion (GalaSoft)

Subscribe | Twitter | Facebook | Flickr | LinkedIn

Adding a ViewModelLocator and Merged Dictionaries to App.xaml

Tuesday, October 26, 2010 | From MVVM

I guess this is one of these places where using Blend is an advantage… since I do these operations mostly with the help of the tool, the XAML is generated and I don’t need to think about it too much.

There is a trick when you add objects (for example Styles or a ViewModelLocator) to App.xaml when it already has merged resource dictionaries. The syntax is a bit convoluted, so here we go:


<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Skins/Brushes.xaml"/>
        </ResourceDictionary.MergedDictionaries>

        <vm:ViewModelLocator x:Key="Locator"
                                d:IsDataSource="True" />
    </ResourceDictionary>
</Application.Resources>

So yeah, the trick is to put the ViewModelLocator (or any other object for that matter) within the ResourceDictionary tag…

HTH,

Laurent

Laurent Bugnion (GalaSoft)

Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM Light Hotfix for Windows Phone 7 developer tools beta

Thursday, July 22, 2010 | From MVVM

This is a hotfix to correct the issues with the MVVM Light templates for Windows Phone 7.

Who is it for?

Use this hotfix if (and only if):

You have MVVM Light Toolkit V3 SP1 installed.
You are using the new developer tools beta for Windows Phone 7.

Why a hotfix?

The hotifx is needed because of changes in the Microsoft Windows Phone 7 assemblies (regrouping of classes in different namespaces and/or different assemblies) as well as some other changes (manifest structure, etc). The MVVM Light assemblies do not need any update however, and continue to work as expected with the new release.

How to install?

The installation process is described at http://www.galasoft.ch/mvvm/installing/hotfix20100719/

Note about Blend:

At the moment, Blend for Windows Phone beta seems unable to load custom template. I have a pending question with Microsoft to try and clear this up. Right now, the workaround is to create the MVVM Light application for Windows Phone 7 in Visual Studio, and then to open it in Blend for Windows Phone beta.

Happy coding!

Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Handling DataGrid.SelectedItems in an MVVM-friendly manner

Wednesday, May 19, 2010 | From MVVM

An interesting question from one of the MVVM Light users today:

Is there an MVVM-friendly way to get a DataGrid’s SelectedItems into the ViewModel?

The issue there is as old as the DataGrid (that’s not very old but still): SelectedItem (singular) is a DependencyProperty and can be databound to a property in the ViewModel. SelectedItems (plural) is not a DependencyProperty.

Thankfully the answer is very simple: Use EventToCommand to call a Command in the ViewModel, and pass the SelectedItems collection as parameter. For example, if the command in the ViewModel is declared as follows:

public RelayCommand<IList> SelectionChangedCommand
{
    get;
    private set;
}

and (in the MainViewModel constructor):

SelectionChangedCommand = new RelayCommand<IList>(
    items =>
    {
        if (items == null)
        {
            NumberOfItemsSelected = 0;
            return;
        }

        NumberOfItemsSelected = items.Count;
    });

Then the XAML markup becomes:

<sdk:DataGrid x:Name="MyDataGrid"
                ItemsSource="{Binding Items}">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="SelectionChanged">
            <cmd:EventToCommand
                Command="{Binding SelectionChangedCommand}"
                CommandParameter="{Binding SelectedItems,
                    ElementName=MyDataGrid}" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
</sdk:DataGrid>

I slapped a quick sample and published it here (VS2010, SL4 but the concept works in SL3 and WPF too).

Cheers!

Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Crowdsourcing MVVM Light Toolkit support

Sunday, April 18, 2010 | From MVVM

Considering the number of emails that are sent to me asking for support for MVVM Light toolkit, I find myself unable to answer all of them in sufficient time to make me feel good.

In consequence, I started to send the following message in response to support queries, either per email or on the MVVM Light Codeplex discussion page.

Hi,

I am doing my best to answer all the questions as fast as possible. I receive a lot of them, however, and cannot reply to everyone fast enough to make me happy.

Due to this, I would like to encourage you to post your question on StackOverflow, and tag it with the tag mvvm-light.

StackOverflow is an awesome site where tons of developers help others with their technical question.

http://stackoverflow.com/questions/tagged/mvvm-light

I will monitor this tag on the StackOverflow website and do my best to answer questions. The advantage of StackOverflow over the Codeplex discussion is the sheer number of qualified developers able to help you with your questions, the visibility of the question itself, and the whole StackOverflow infrastructure (reputation, up- or down-vote, comments, etc)

Thanks!

Laurent

Bug reports

Regarding bug reports, feel free to continue to send them to the Codeplex site (preferred), or to me directly.

I hope that this will help all support queries to be answered faster, and with the great quality for which the StackOverflow users are known!

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Small change in MVVM Light Toolkit templates for Blend 4 RC

Sunday, April 18, 2010 | From MVVM

Ah, the joy of new releases… You will find that the MVVM Light Toolkit works fine with Visual Studio 2010 RTM and Blend 4 RC except for a few adjustments:

Blend templates

The path to the Expression Blend 4 project templates changed. If you start Expression Blend 4 RC now, you will likely not see the MVVM Light templates in the New Project dialog.

New Project dialog with MVVM Light

To restore the templates, follow the steps:

Open Windows Explorer
Navigate to C:\Users\[username]\Documents\Expression (or simply type My Documents in Windows Explorer and then open the Expression folder).
Change the name of the “Blend 4 beta” folder into “Blend 4”.

That’s it, you should now see the templates in the New Project dialog in Blend 4.

Note that since the new name is “Blend 4”, I hope that I won’t need to do the same exercise when Blend 4 RTM is released!

Windows Phone 7 templates

Since the Windows Phone 7 tools are not ready yet for Visual Studio 2010 RTM and Blend 4 RC, the templates in the Silverlight for Windows Phone folders will not work. You will get an error if you try to create a new such project in the newly released environment.

I hesitated to remove these templates from the current packages, but honestly that is a lot of trouble for a very short time before the tools for Windows Phone 7 are released (note: I don’t have any information as to when these tools will be released). In the mean time, just don’t create a WinPhone7 application.

Reminder: If you want to write code for Windows Phone 7, you need to keep the Visual Studio 2010 RC as well as Expression Blend 4 beta.

Updated package

I uploaded an update to the Blend 4 templates. It is available like before on the “Install manually” page and on the Codeplex page.

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Using commands with ApplicationBarMenuItem and ApplicationBarButton in Windows Phone 7

Friday, April 09, 2010 | From MVVM

Unfortunately, in the current version of the Windows Phone 7 Silverlight framework, it is not possible to attach any command on the ApplicationBarMenuItem and ApplicationBarButton controls. These two controls appear in the Application Bar, for example with the following markup:

<phoneNavigation:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar x:Name="MainPageApplicationBar">
        <shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarMenuItem 
                Text="Add City" />
            <shell:ApplicationBarMenuItem 
                Text="Add Country" />
        </shell:ApplicationBar.MenuItems>
        <shell:ApplicationBar.Buttons>
            <shell:ApplicationBarIconButton 
                IconUri="/Resources/appbar.feature.video.rest.png" />
            <shell:ApplicationBarIconButton 
                IconUri="/Resources/appbar.feature.settings.rest.png" />
            <shell:ApplicationBarIconButton 
                IconUri="/Resources/appbar.refresh.rest.png" />
        </shell:ApplicationBar.Buttons>
    </shell:ApplicationBar>
</phoneNavigation:PhoneApplicationPage.ApplicationBar>

This code will create the following UI:

Application bar, collapsed

Application bar, expanded

ApplicationBarItems are not, however, controls. A quick look in MSDN shows the following hierarchy for ApplicationBarMenuItem, for example:

Unfortunately, this prevents all the mechanisms that are normally used to attach a Command (for example a RelayCommand) to a control. For example, the attached behavior present in the class ButtonBaseExtension (from the Silverlight 3 version of the MVVM Light toolkit) can only be attached to a DependencyObject. Similarly, Blend behaviors (such as EventToCommand from the toolkit’s Extras library) needs a FrameworkElement to work.

Using code behind

The alternative is to use code behind. As I said in my MIX10 talk, the MVVM police will not take your family away if you use code behind (this quote was actually suggested to me by Glenn Block); the code behind is there for a reason. In our case, invoking a command in the ViewModel requires the following code:

In MainPage.xaml:

<shell:ApplicationBarMenuItem Text="My Menu 1"
    Click="ApplicationBarMenuItemClick"/>

In MainPage.xaml.cs

private void ApplicationBarMenuItemClick(
    object sender, 
    System.EventArgs e)
{
    var vm = DataContext as MainViewModel;
    if (vm != null)
    {
        vm.MyCommand.Execute(null);
    }
}

Conclusion

Resorting to code behind to bridge the gap between the View and the ViewModel is less elegant than using attached behaviors, either through an attached property or through a Blend behavior. It does, however, work fine. I don’t have any information if future changes in the Windows Phone 7 Application Bar API will make this easier. In the mean time, I would recommend using code behind instead.

Laurent Bugnion (GalaSoft)

Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM News Feed

Updated Wiki: Home

lbugnion — Tue, 08 Jun 2010 10:29:35 GMT

Project Description

Get started

More information about the MVVM Light Toolkit can be found on http://www.galasoft.ch/mvvm/getstarted.

Donate

If you are so enclined, you can donate to MVVM Light Toolkit.
Or, if you prefer, you can pay me a beer next time we're in the same vicinity. Really, it is OK too :)

Latest news:

MVVM News Feed

Handling DataGrid.SelectedItems in an MVVM-friendly manner

Wednesday, May 19, 2010 | From MVVM

An interesting question from one of the MVVM Light users today:

Is there an MVVM-friendly way to get a DataGrid’s SelectedItems into the ViewModel?

public RelayCommand<IList> SelectionChangedCommand
{
    get;
    private set;
}

and (in the MainViewModel constructor):

SelectionChangedCommand = new RelayCommand<IList>(
    items =>
    {
        if (items == null)
        {
            NumberOfItemsSelected = 0;
            return;
        }

        NumberOfItemsSelected = items.Count;
    });

Then the XAML markup becomes:

<sdk:DataGrid x:Name="MyDataGrid"
                ItemsSource="{Binding Items}">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="SelectionChanged">
            <cmd:EventToCommand
                Command="{Binding SelectionChangedCommand}"
                CommandParameter="{Binding SelectedItems,
                    ElementName=MyDataGrid}" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
</sdk:DataGrid>

I slapped a quick sample and published it here (VS2010, SL4 but the concept works in SL3 and WPF too).

Cheers!

Laurent

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Crowdsourcing MVVM Light Toolkit support

Sunday, April 18, 2010 | From MVVM

Considering the number of emails that are sent to me asking for support for MVVM Light toolkit, I find myself unable to answer all of them in sufficient time to make me feel good.

In consequence, I started to send the following message in response to support queries, either per email or on the MVVM Light Codeplex discussion page.

Hi,

I am doing my best to answer all the questions as fast as possible. I receive a lot of them, however, and cannot reply to everyone fast enough to make me happy.

Due to this, I would like to encourage you to post your question on StackOverflow, and tag it with the tag mvvm-light.

StackOverflow is an awesome site where tons of developers help others with their technical question.

http://stackoverflow.com/questions/tagged/mvvm-light

Thanks!

Laurent

Bug reports

Regarding bug reports, feel free to continue to send them to the Codeplex site (preferred), or to me directly.

I hope that this will help all support queries to be answered faster, and with the great quality for which the StackOverflow users are known!

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Small change in MVVM Light Toolkit templates for Blend 4 RC

Sunday, April 18, 2010 | From MVVM

Ah, the joy of new releases… You will find that the MVVM Light Toolkit works fine with Visual Studio 2010 RTM and Blend 4 RC except for a few adjustments:

Blend templates

The path to the Expression Blend 4 project templates changed. If you start Expression Blend 4 RC now, you will likely not see the MVVM Light templates in the New Project dialog.

New Project dialog with MVVM Light

To restore the templates, follow the steps:

Open Windows Explorer
Navigate to C:\Users\[username]\Documents\Expression (or simply type My Documents in Windows Explorer and then open the Expression folder).
Change the name of the “Blend 4 beta” folder into “Blend 4”.

That’s it, you should now see the templates in the New Project dialog in Blend 4.

Note that since the new name is “Blend 4”, I hope that I won’t need to do the same exercise when Blend 4 RTM is released!

Windows Phone 7 templates

Reminder: If you want to write code for Windows Phone 7, you need to keep the Visual Studio 2010 RC as well as Expression Blend 4 beta.

Updated package

I uploaded an update to the Blend 4 templates. It is available like before on the “Install manually” page and on the Codeplex page.

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Using commands with ApplicationBarMenuItem and ApplicationBarButton in Windows Phone 7

Friday, April 09, 2010 | From MVVM

<phoneNavigation:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar x:Name="MainPageApplicationBar">
        <shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarMenuItem 
                Text="Add City" />
            <shell:ApplicationBarMenuItem 
                Text="Add Country" />
        </shell:ApplicationBar.MenuItems>
        <shell:ApplicationBar.Buttons>
            <shell:ApplicationBarIconButton 
                IconUri="/Resources/appbar.feature.video.rest.png" />
            <shell:ApplicationBarIconButton 
                IconUri="/Resources/appbar.feature.settings.rest.png" />
            <shell:ApplicationBarIconButton 
                IconUri="/Resources/appbar.refresh.rest.png" />
        </shell:ApplicationBar.Buttons>
    </shell:ApplicationBar>
</phoneNavigation:PhoneApplicationPage.ApplicationBar>

This code will create the following UI:

Application bar, collapsed

Application bar, expanded

ApplicationBarItems are not, however, controls. A quick look in MSDN shows the following hierarchy for ApplicationBarMenuItem, for example:

Using code behind

In MainPage.xaml:

<shell:ApplicationBarMenuItem Text="My Menu 1"
    Click="ApplicationBarMenuItemClick"/>

In MainPage.xaml.cs

private void ApplicationBarMenuItemClick(
    object sender, 
    System.EventArgs e)
{
    var vm = DataContext as MainViewModel;
    if (vm != null)
    {
        vm.MyCommand.Execute(null);
    }
}

Conclusion

Laurent Bugnion (GalaSoft)

Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM Light Toolkit V3 SP1 for Windows Phone 7

Sunday, April 04, 2010 | From MVVM

He he I start to sound like Microsoft… Anyway… I just released a service pack (SP1) for MVVM Light Toolkit V3.

Why?

Well mostly because I worked a bit more with the Windows Phone 7 tools that were released at MIX0, and I noticed a few things that could be better in the Windows Phone 7 template. Also, I only found out at MIX that you can actually install custom project templates for Visual Studio Express. For some reason I thought it was not possible.

The best way to solve these issues is through a service pack, which consists of a few zip files. Simply follow the instructions on the “Installing Manually” page. You can go ahead and overwrite the files that were installed with V3, all the file structure and names are exactly the same.

What?

So what do you get in this service pack that was not already in V3? (for more info about what’s new in V3, check the What’s New page).

Project and Item templates for Visual Studio 10 Express (phone edition). Unzip these files in your “My Documents” folder, and you can now create a new MVVM Light application in the WinPhone7 version of Visual Studio 2010 Express.
Signed assemblies: All the assemblies are now signed, which is a requirement in certain build configurations.
XML documentation files: Thanks to Matt Casto for pinging me and reminding me that I had forgotten to include them (doh).
New and improved Windows Phone 7 assemblies and templates: This one deserves its own section (see below).

What was wrong with the old Silverlight 3 assemblies in Windows Phone 7 projects?

It was kind of weird. Functionality wise, it was working just right. However, if you noticed, the EventToCommand behavior was not visible in the Assets tab of Expression Blend, under Behaviors, where it should normally have been.

The reason was that even though the Windows Phone 7 is using Silverlight 3, the System.Windows.Interactivity that Blend was expecting is the version that is normally used in Silverlight 4. Yeah, I know, it’s weird.

This led me to create a specific version of these assemblies for the phone. The assemblies are located into C:\Program Files\Laurent Bugnion (GalaSoft)\Mvvm Light Toolkit\Binaries\WP7. There are 3 DLLs:

GalaSoft.MvvmLight.WP7.dll with RelayCommand, Messenger and ViewModelBase
GalaSoft.MvvmLight.Extras.WP7.dll with EventToCommand and DispatcherHelper
System.Windows.Interactivity.dll which is the same DLL installed in the Blend SDK, and which is needed for the EventToCommand behavior to work.

Happy coding!

That’s all! Download and install the service pack according to the instructions on the Installation page, and create your first MVVM Light application for the phone (a blog post will follow later with more details).

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Sample code and slides for my TechDays10 (Belgium) talks

Friday, April 02, 2010 | From MVVM

The source code for my MVVM talk titled “Understanding the MVVM Pattern” given at TechDays 2010 in Antwerpen, Belgium, is available online. It is actually the same code than the MIX10 one, but I added the Windows Phone 7 MVVM Light application (available in the folder titled “Mix10.MvvmDemo2-End”.

Note: before unpacking the zip file, you should right click on it, and select properties / Unblock.

I also published the slides for my two talks:

As far as I know, the videos will be online soon, stay tuned and I will announce when it is the case.

Get Started page for the MVVM Light Toolkit: http://www.galasoft.ch/mvvm/getstarted

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Sample code for my #mix10 talk online

Tuesday, March 16, 2010 | From MVVM

I just saw that the video for my MIX10 session is online already! Impressive work, MIX10 team. I also published the sample code on my web server, so here are the links:

It was a real pleasure and an amazing experience to have this talk and to get all the great feedback! Thanks all for coming, and as usual don’t hesitate to send your feedback!

Laurent

What’s new in MVVM Light V3

Tuesday, March 16, 2010 | From MVVM

V3 of the MVVM Light Toolkit was released during MIX10, after quite a long alpha stage. This post lists the new features in MVVM Light V3.

Compatibility

MVVM Light Toolkit V3 can be installed for the following tools and framework versions:

Visual Studio 2008 SP1, Expression Blend 3
- Windows Presentation Foundation 3.5 SP1
- Silverlight 3
Visual Studio 2010 RC, Expression Blend 4 beta
- Windows Presentation Foundation 3.5 SP1
- Windows Presentation Foundation 4 RC
- Silverlight 3
- Silverlight 4 RC

For more information about installing the MVVM Light Toolkit V3, please visit this page. For cleaning up existing installation, see this page.

New in V3 RTM

The following features have been added after V3 alpha3:

Project template for the Windows Phone 7 series (Silverlight)

This new template allows you to create a new MVVM Light application in Visual Studio 2010 RC and to run it in the Windows Phone 7 series emulator. This template uses the Silverlight 3 version of the MVVM Light Toolkit V3. At this time, only the essentials features of the GalaSoft.MvvmLight.dll assembly are supported on the phone.

New in V3 alpha3

The following features have been added after V3 alpha2:

New logo

An awesome logo has been designed for MVVM Light by Philippe Schutz.

DispatcherHelper class (in GalaSoft.MvvmLight.Extras.dll)

This class is useful when you work on multi-threaded WPF or Silverlight applications.

Initializing: The DispatcherHelper class must be initialized in the UI thread. For example, you can initialize the class in a Silverlight application’s Application_Startup event handler, or in the WPF application’s static App constructor (in App.xaml).

// Initializing in Silverlight (in App.xaml)

private void Application_Startup(
    object sender,
    StartupEventArgs e)
{
    RootVisual = new MainPage();
    DispatcherHelper.Initialize();
}


// Initializing in WPF (in App.xaml)

static App()
{
    DispatcherHelper.Initialize();
}

Verifying if a property exists

The ViewModelBase.RaisePropertyChanged method now checks if a given property name exists on the ViewModel class, and throws an exception if that property cannot be found. This is useful to detect typos in a property name, for example during a refactoring. Note that the check is only done in DEBUG mode.

Replacing IDisposable with ICleanup

The IDisposable implementation in the ViewModelBase class has been marked obsolete. Instead, the ICleanup interface (and its Cleanup method) has been added. Implementing IDisposable in a ViewModel is still possible, but must be done explicitly. IDisposable in ViewModelBase was a bad practice, because it supposes that the ViewModel is garbage collected after Dispose is called. instead, the Cleanup method does not have such expectation.

The ViewModelLocator class (created when an MVVM Light project template is used in Visual Studio or Expression Blend) exposes a static Cleanup method, which should in turn call each ViewModel’s Cleanup method. The ViewModel is free to override the Cleanup method if local cleanup must be performed.

Passing EventArgs to command with EventToCommand

The EventToCommand class is used to bind any event to an ICommand (typically on the ViewModel). In this case, it can be useful to pass the event’s EventArgs parameter to the command in the ViewModel. For example, for the MouseEnter event, you can pass the MouseEventArgs to a RelayCommand<MouseEventArgs> as shown in the next listings.

Note: Bringing UI specific classes (such as EventArgs) into the ViewModel reduces the testability of the ViewModel, and thus should be used with care.

Setting EventToCommand and PassEventArgsToCommand:

<Grid x:Name="LayoutRoot">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="MouseEnter">
            <cmd:EventToCommand Command="{Binding MyCommand}"
                                PassEventArgsToCommand="True" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
</Grid>

Getting the EventArgs in the command

public RelayCommand<MouseEventArgs> MyCommand
{
    get;
    private set;
}

public MainViewModel()
{
    MyCommand = new RelayCommand<MouseEventArgs>(e =>
    {
        // e is of type MouseEventArgs
    });
}

Changes to templates

Various changes have been made to project templates and item templates to make them more compatible with Silverlight 4 and to improve their visibility in Visual Studio and Expression Blend.

Bug corrections

When a message is sent through the Messenger class using the method Messenger.Default.Send<T>(T message, object token), and the token is a simple value (for example int), the message was not sent correctly. This bug is now corrected.

New in V3

The following features have been added after V2.

Sending messages with callback

Certain classes have been added to the GalaSoft.MvvmLight.Messaging namespace, allowing sending a message and getting a callback from the recipient. These classes are:

NotificationMessageWithCallback: Base class for messages with callback.

NotificationMessageAction: A class with string notification, and a parameterless callback.

NotificationMessageAction<T>: A class with string notification, and a callback with a parameter of type T.

To send a message with callback, use the following code:

var message = new NotificationMessageAction<bool>(
    "Hello world",
    callbackMessage =>
    {
        // This is the callback code
        if (callbackMessage)
        {
            // ...
        }
    });

Messenger.Default.Send(message);

To register and receive a message with callback, use the following code:

Messenger.Default.Register<NotificationMessageAction<bool>>(
    this,
    message =>
    {
        // Do something
        
        // Execute the callback
        message.Execute(true);
    });

Messenger.Default can be overriden

The Messenger.Default property can also be replaced, for example for unit testing purposes, by using the Messenger.OverrideDefault method. All the public methods of the Messenger class have been made virtual, and can be overridden in the test messenger class.

Sending messages to interfaces

In V2, it was possible to deliver messages targeted to instances of a given class. in V3 it is still possible, but in addition you can deliver a message to instances that implement a certain interface. The message will not be delivered to other recipients.

Use the overload Messenger.Default.Send<TMessage, TTarget>(TMessage message) where TTarget is, in fact, an interface (for example IDisposable). Of course the recipient must register to receive the type of message TMessage.

Sending messages with a token

Messages can now be sent through the Messenger with a token.

To send a message with token, use the method overload Send<TMessage>(TMessage message, object token).

To receive a message with token, use the methods Register<TMessage>(object recipient, object token, Action<TMessage> action) or Register<TMessage>(object recipient, object token, bool receiveDerivedMessagesToo, Action<TMessage> action)

The token can be a simple value (int, string, etc…) or an instance of a class. The message is not delivered to recipients who registered with a different token, or with no token at all.

Renaming CommandMessage to NotificationMessage

To avoid confusion with ICommand and RelayCommand, the CommandMessage class has been renamed to NotificationMessage. This message class can be used to deliver a notification (of type string) to a recipient.

ViewModelBase constructor with IMessenger

The ViewModelBase class now accepts an IMessenger parameter. If this constructor is used instead of the default empty constructor, the IMessenger passed as parameter will be used to broadcast a PropertyChangedMessage when the method RaisePropertyChanged<T>(string propertyName, T oldValue, T newValue, bool broadcast) is used.

In the default ViewModelBase constructor is used, the Messenger.Default instance will be used instead.

EventToCommand behavior

The EventToCommand behavior has been added in V3. It can be used to bind any event of any FrameworkElement to any ICommand (for example a RelayCommand located in the ViewModel). More information about the EventToCommand behavior can be found here and here.

Updated the project templates to remove the sample application

The project template has been updated to remove the sample application that was created every time that a new MVVM Light application was created in Visual Studio or Blend. This makes the creation of a new application easier, because you don’t need to remove code before you can start writing code.

Bug corrections

Some bugs that were in Version 2 have been corrected:

In some occasions, an exception could be thrown when a recipient was registered for a message at the same time as a message was received.

New names for DLLs

If you upgrade an existing installation, you will need to change the reference to the DLLs in C:\Program Files\Laurent Bugnion (GalaSoft)\Mvvm Light Toolkit\Binaries. The assemblies have been moved, and the versions for Silverlight 4 and for WPF4 have been renamed, to avoid some confusion. It is now easier to make sure that you are using the correct DLL.

WPF3.5SP1, Silverlight 3

When using the DLLs, make sure that you use the correct versions.

WPF4, Silverlight 4

When using the DLLs, make sure that you use the correct versions.

Laurent Bugnion (GalaSoft)

Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM News Feed

Updated Wiki: Home

lbugnion — Wed, 05 May 2010 08:38:15 GMT

Project Description

Get started

More information about the MVVM Light Toolkit can be found on http://www.galasoft.ch/mvvm/getstarted.

Latest news:

MVVM News Feed

Crowdsourcing MVVM Light Toolkit support

Sunday, April 18, 2010 | From MVVM

Considering the number of emails that are sent to me asking for support for MVVM Light toolkit, I find myself unable to answer all of them in sufficient time to make me feel good.

In consequence, I started to send the following message in response to support queries, either per email or on the MVVM Light Codeplex discussion page.

Hi,

I am doing my best to answer all the questions as fast as possible. I receive a lot of them, however, and cannot reply to everyone fast enough to make me happy.

Due to this, I would like to encourage you to post your question on StackOverflow, and tag it with the tag mvvm-light.

StackOverflow is an awesome site where tons of developers help others with their technical question.

http://stackoverflow.com/questions/tagged/mvvm-light

Thanks!

Laurent

Bug reports

Regarding bug reports, feel free to continue to send them to the Codeplex site (preferred), or to me directly.

I hope that this will help all support queries to be answered faster, and with the great quality for which the StackOverflow users are known!

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Small change in MVVM Light Toolkit templates for Blend 4 RC

Sunday, April 18, 2010 | From MVVM

Ah, the joy of new releases… You will find that the MVVM Light Toolkit works fine with Visual Studio 2010 RTM and Blend 4 RC except for a few adjustments:

Blend templates

The path to the Expression Blend 4 project templates changed. If you start Expression Blend 4 RC now, you will likely not see the MVVM Light templates in the New Project dialog.

New Project dialog with MVVM Light

To restore the templates, follow the steps:

Open Windows Explorer
Navigate to C:\Users\[username]\Documents\Expression (or simply type My Documents in Windows Explorer and then open the Expression folder).
Change the name of the “Blend 4 beta” folder into “Blend 4”.

That’s it, you should now see the templates in the New Project dialog in Blend 4.

Note that since the new name is “Blend 4”, I hope that I won’t need to do the same exercise when Blend 4 RTM is released!

Windows Phone 7 templates

Reminder: If you want to write code for Windows Phone 7, you need to keep the Visual Studio 2010 RC as well as Expression Blend 4 beta.

Updated package

I uploaded an update to the Blend 4 templates. It is available like before on the “Install manually” page and on the Codeplex page.

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Using commands with ApplicationBarMenuItem and ApplicationBarButton in Windows Phone 7

Friday, April 09, 2010 | From MVVM

<phoneNavigation:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar x:Name="MainPageApplicationBar">
        <shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarMenuItem 
                Text="Add City" />
            <shell:ApplicationBarMenuItem 
                Text="Add Country" />
        </shell:ApplicationBar.MenuItems>
        <shell:ApplicationBar.Buttons>
            <shell:ApplicationBarIconButton 
                IconUri="/Resources/appbar.feature.video.rest.png" />
            <shell:ApplicationBarIconButton 
                IconUri="/Resources/appbar.feature.settings.rest.png" />
            <shell:ApplicationBarIconButton 
                IconUri="/Resources/appbar.refresh.rest.png" />
        </shell:ApplicationBar.Buttons>
    </shell:ApplicationBar>
</phoneNavigation:PhoneApplicationPage.ApplicationBar>

This code will create the following UI:

Application bar, collapsed

Application bar, expanded

ApplicationBarItems are not, however, controls. A quick look in MSDN shows the following hierarchy for ApplicationBarMenuItem, for example:

Using code behind

In MainPage.xaml:

<shell:ApplicationBarMenuItem Text="My Menu 1"
    Click="ApplicationBarMenuItemClick"/>

In MainPage.xaml.cs

private void ApplicationBarMenuItemClick(
    object sender, 
    System.EventArgs e)
{
    var vm = DataContext as MainViewModel;
    if (vm != null)
    {
        vm.MyCommand.Execute(null);
    }
}

Conclusion

Laurent Bugnion (GalaSoft)

Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM Light Toolkit V3 SP1 for Windows Phone 7

Sunday, April 04, 2010 | From MVVM

He he I start to sound like Microsoft… Anyway… I just released a service pack (SP1) for MVVM Light Toolkit V3.

Why?

What?

So what do you get in this service pack that was not already in V3? (for more info about what’s new in V3, check the What’s New page).

Project and Item templates for Visual Studio 10 Express (phone edition). Unzip these files in your “My Documents” folder, and you can now create a new MVVM Light application in the WinPhone7 version of Visual Studio 2010 Express.
Signed assemblies: All the assemblies are now signed, which is a requirement in certain build configurations.
XML documentation files: Thanks to Matt Casto for pinging me and reminding me that I had forgotten to include them (doh).
New and improved Windows Phone 7 assemblies and templates: This one deserves its own section (see below).

What was wrong with the old Silverlight 3 assemblies in Windows Phone 7 projects?

GalaSoft.MvvmLight.WP7.dll with RelayCommand, Messenger and ViewModelBase
GalaSoft.MvvmLight.Extras.WP7.dll with EventToCommand and DispatcherHelper
System.Windows.Interactivity.dll which is the same DLL installed in the Blend SDK, and which is needed for the EventToCommand behavior to work.

Happy coding!

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Sample code and slides for my TechDays10 (Belgium) talks

Friday, April 02, 2010 | From MVVM

Note: before unpacking the zip file, you should right click on it, and select properties / Unblock.

I also published the slides for my two talks:

As far as I know, the videos will be online soon, stay tuned and I will announce when it is the case.

Get Started page for the MVVM Light Toolkit: http://www.galasoft.ch/mvvm/getstarted

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Sample code for my #mix10 talk online

Tuesday, March 16, 2010 | From MVVM

I just saw that the video for my MIX10 session is online already! Impressive work, MIX10 team. I also published the sample code on my web server, so here are the links:

It was a real pleasure and an amazing experience to have this talk and to get all the great feedback! Thanks all for coming, and as usual don’t hesitate to send your feedback!

Laurent

What’s new in MVVM Light V3

Tuesday, March 16, 2010 | From MVVM

V3 of the MVVM Light Toolkit was released during MIX10, after quite a long alpha stage. This post lists the new features in MVVM Light V3.

Compatibility

MVVM Light Toolkit V3 can be installed for the following tools and framework versions:

Visual Studio 2008 SP1, Expression Blend 3
- Windows Presentation Foundation 3.5 SP1
- Silverlight 3
Visual Studio 2010 RC, Expression Blend 4 beta
- Windows Presentation Foundation 3.5 SP1
- Windows Presentation Foundation 4 RC
- Silverlight 3
- Silverlight 4 RC

For more information about installing the MVVM Light Toolkit V3, please visit this page. For cleaning up existing installation, see this page.

New in V3 RTM

The following features have been added after V3 alpha3:

Project template for the Windows Phone 7 series (Silverlight)

New in V3 alpha3

The following features have been added after V3 alpha2:

New logo

An awesome logo has been designed for MVVM Light by Philippe Schutz.

DispatcherHelper class (in GalaSoft.MvvmLight.Extras.dll)

This class is useful when you work on multi-threaded WPF or Silverlight applications.

// Initializing in Silverlight (in App.xaml)

private void Application_Startup(
    object sender,
    StartupEventArgs e)
{
    RootVisual = new MainPage();
    DispatcherHelper.Initialize();
}


// Initializing in WPF (in App.xaml)

static App()
{
    DispatcherHelper.Initialize();
}

Verifying if a property exists

Replacing IDisposable with ICleanup

Passing EventArgs to command with EventToCommand

Note: Bringing UI specific classes (such as EventArgs) into the ViewModel reduces the testability of the ViewModel, and thus should be used with care.

Setting EventToCommand and PassEventArgsToCommand:

<Grid x:Name="LayoutRoot">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="MouseEnter">
            <cmd:EventToCommand Command="{Binding MyCommand}"
                                PassEventArgsToCommand="True" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
</Grid>

Getting the EventArgs in the command

public RelayCommand<MouseEventArgs> MyCommand
{
    get;
    private set;
}

public MainViewModel()
{
    MyCommand = new RelayCommand<MouseEventArgs>(e =>
    {
        // e is of type MouseEventArgs
    });
}

Changes to templates

Various changes have been made to project templates and item templates to make them more compatible with Silverlight 4 and to improve their visibility in Visual Studio and Expression Blend.

Bug corrections

When a message is sent through the Messenger class using the method Messenger.Default.Send<T>(T message, object token), and the token is a simple value (for example int), the message was not sent correctly. This bug is now corrected.

New in V3

The following features have been added after V2.

Sending messages with callback

Certain classes have been added to the GalaSoft.MvvmLight.Messaging namespace, allowing sending a message and getting a callback from the recipient. These classes are:

NotificationMessageWithCallback: Base class for messages with callback.

NotificationMessageAction: A class with string notification, and a parameterless callback.

NotificationMessageAction<T>: A class with string notification, and a callback with a parameter of type T.

To send a message with callback, use the following code:

var message = new NotificationMessageAction<bool>(
    "Hello world",
    callbackMessage =>
    {
        // This is the callback code
        if (callbackMessage)
        {
            // ...
        }
    });

Messenger.Default.Send(message);

To register and receive a message with callback, use the following code:

Messenger.Default.Register<NotificationMessageAction<bool>>(
    this,
    message =>
    {
        // Do something
        
        // Execute the callback
        message.Execute(true);
    });

Messenger.Default can be overriden

Sending messages to interfaces

Sending messages with a token

Messages can now be sent through the Messenger with a token.

To send a message with token, use the method overload Send<TMessage>(TMessage message, object token).

To receive a message with token, use the methods Register<TMessage>(object recipient, object token, Action<TMessage> action) or Register<TMessage>(object recipient, object token, bool receiveDerivedMessagesToo, Action<TMessage> action)

The token can be a simple value (int, string, etc…) or an instance of a class. The message is not delivered to recipients who registered with a different token, or with no token at all.

Renaming CommandMessage to NotificationMessage

ViewModelBase constructor with IMessenger

In the default ViewModelBase constructor is used, the Messenger.Default instance will be used instead.

EventToCommand behavior

Updated the project templates to remove the sample application

Bug corrections

Some bugs that were in Version 2 have been corrected:

In some occasions, an exception could be thrown when a recipient was registered for a message at the same time as a message was received.

New names for DLLs

WPF3.5SP1, Silverlight 3

When using the DLLs, make sure that you use the correct versions.

WPF4, Silverlight 4

When using the DLLs, make sure that you use the correct versions.

Laurent Bugnion (GalaSoft)

Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM Light V3 released at #MIX10

Tuesday, March 16, 2010 | From MVVM

During my session “Understanding the MVVM pattern” at MIX10 in Vegas, I showed some components of the MVVM Light toolkit V3, which gave me the occasion to announce the release of version 3. This version has been in alpha stage for a while, and has been tested by many users. it is very stable, and ready for a release. So here we go!

What’s new

What’s new in MVVM Light Toolkit V3 is the topic of the next post.

Cleaning up

I would recommend cleaning up older versions before installing V3. I prepared a page explaining how to do that manually. Unfortunately I didn’t have time to create an automatic cleaner/installer, this is very high on my list but with the book and the conferences going on, it will take a little more time. Cleaning up is recommended because I changed the name of some DLLs to avoid some confusion (between the WPF3.5 and WPF4 version, as well as between the SL3 and SL4 versions). More details in the section titled “Compatibility”.

Installation

Installing MVVM Light toolkit is the manual process of unzipping a few files. The installation page has been updated to reflect the newest information.

Compatibility

MVVM Light toolkit V3 has components for the following environments and frameworks:

Visual Studio 2008:
- Silverlight 3
- Windows Presentation Foundation 3.5 SP1
Expression Blend 3
- Silverlight 3
- Windows Presentation Foundation 3.5 SP1
Visual Studio 2010 RC
- Silverlight 3
- Silverlight 4
- Windows Presentation Foundation 3.5 SP1
- Windows Presentation Foundation 4
- Silverlight for Windows Phone 7 series
Expression Blend 4 beta
- Silverlight 3
- Silverlight 4
- Windows Presentation Foundation 3.5 SP1
- Windows Presentation Foundation 4

Feedback

As usual I welcome your constructive feedback. If you want the issue to be discussed in public, the best way is through the discussion page on the Codeplex site. if you wish to keep the conversation private, please check my Contact page for ways to talk to me.

Video, tutorials

There are a few new videos and tutorials available for the MVVM Light toolkit. The material is listed on the Get Started page, under “tutorials”.

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM News Feed

Updated Wiki: Home

lbugnion — Fri, 09 Apr 2010 12:19:09 GMT

Project Description

Get started

More information about the MVVM Light Toolkit can be found on http://www.galasoft.ch/mvvm/getstarted.

Donate

If you are so enclined, you can donate to the MVVM Light project:

Latest news:

MVVM News Feed

MVVM Light Toolkit V3 SP1 for Windows Phone 7

Sonntag, 4. April 2010 | From MVVM

He he I start to sound like Microsoft… Anyway… I just released a service pack (SP1) for MVVM Light Toolkit V3.

Why?

What?

So what do you get in this service pack that was not already in V3? (for more info about what’s new in V3, check the What’s New page).

Project and Item templates for Visual Studio 10 Express (phone edition). Unzip these files in your “My Documents” folder, and you can now create a new MVVM Light application in the WinPhone7 version of Visual Studio 2010 Express.
Signed assemblies: All the assemblies are now signed, which is a requirement in certain build configurations.
XML documentation files: Thanks to Matt Casto for pinging me and reminding me that I had forgotten to include them (doh).
New and improved Windows Phone 7 assemblies and templates: This one deserves its own section (see below).

What was wrong with the old Silverlight 3 assemblies in Windows Phone 7 projects?

GalaSoft.MvvmLight.WP7.dll with RelayCommand, Messenger and ViewModelBase
GalaSoft.MvvmLight.Extras.WP7.dll with EventToCommand and DispatcherHelper
System.Windows.Interactivity.dll which is the same DLL installed in the Blend SDK, and which is needed for the EventToCommand behavior to work.

Happy coding!

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Sample code and slides for my TechDays10 (Belgium) talks

Freitag, 2. April 2010 | From MVVM

Note: before unpacking the zip file, you should right click on it, and select properties / Unblock.

I also published the slides for my two talks:

As far as I know, the videos will be online soon, stay tuned and I will announce when it is the case.

Get Started page for the MVVM Light Toolkit: http://www.galasoft.ch/mvvm/getstarted

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Sample code for my #mix10 talk online

Dienstag, 16. März 2010 | From MVVM

I just saw that the video for my MIX10 session is online already! Impressive work, MIX10 team. I also published the sample code on my web server, so here are the links:

It was a real pleasure and an amazing experience to have this talk and to get all the great feedback! Thanks all for coming, and as usual don’t hesitate to send your feedback!

Laurent

What’s new in MVVM Light V3

Dienstag, 16. März 2010 | From MVVM

V3 of the MVVM Light Toolkit was released during MIX10, after quite a long alpha stage. This post lists the new features in MVVM Light V3.

Compatibility

MVVM Light Toolkit V3 can be installed for the following tools and framework versions:

Visual Studio 2008 SP1, Expression Blend 3
- Windows Presentation Foundation 3.5 SP1
- Silverlight 3
Visual Studio 2010 RC, Expression Blend 4 beta
- Windows Presentation Foundation 3.5 SP1
- Windows Presentation Foundation 4 RC
- Silverlight 3
- Silverlight 4 RC

For more information about installing the MVVM Light Toolkit V3, please visit this page. For cleaning up existing installation, see this page.

New in V3 RTM

The following features have been added after V3 alpha3:

Project template for the Windows Phone 7 series (Silverlight)

New in V3 alpha3

The following features have been added after V3 alpha2:

New logo

An awesome logo has been designed for MVVM Light by Philippe Schutz.

DispatcherHelper class (in GalaSoft.MvvmLight.Extras.dll)

This class is useful when you work on multi-threaded WPF or Silverlight applications.

// Initializing in Silverlight (in App.xaml)

private void Application_Startup(
    object sender,
    StartupEventArgs e)
{
    RootVisual = new MainPage();
    DispatcherHelper.Initialize();
}


// Initializing in WPF (in App.xaml)

static App()
{
    DispatcherHelper.Initialize();
}

Verifying if a property exists

Replacing IDisposable with ICleanup

Passing EventArgs to command with EventToCommand

Note: Bringing UI specific classes (such as EventArgs) into the ViewModel reduces the testability of the ViewModel, and thus should be used with care.

Setting EventToCommand and PassEventArgsToCommand:

<Grid x:Name="LayoutRoot">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="MouseEnter">
            <cmd:EventToCommand Command="{Binding MyCommand}"
                                PassEventArgsToCommand="True" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
</Grid>

Getting the EventArgs in the command

public RelayCommand<MouseEventArgs> MyCommand
{
    get;
    private set;
}

public MainViewModel()
{
    MyCommand = new RelayCommand<MouseEventArgs>(e =>
    {
        // e is of type MouseEventArgs
    });
}

Changes to templates

Various changes have been made to project templates and item templates to make them more compatible with Silverlight 4 and to improve their visibility in Visual Studio and Expression Blend.

Bug corrections

When a message is sent through the Messenger class using the method Messenger.Default.Send<T>(T message, object token), and the token is a simple value (for example int), the message was not sent correctly. This bug is now corrected.

New in V3

The following features have been added after V2.

Sending messages with callback

Certain classes have been added to the GalaSoft.MvvmLight.Messaging namespace, allowing sending a message and getting a callback from the recipient. These classes are:

NotificationMessageWithCallback: Base class for messages with callback.

NotificationMessageAction: A class with string notification, and a parameterless callback.

NotificationMessageAction<T>: A class with string notification, and a callback with a parameter of type T.

To send a message with callback, use the following code:

var message = new NotificationMessageAction<bool>(
    "Hello world",
    callbackMessage =>
    {
        // This is the callback code
        if (callbackMessage)
        {
            // ...
        }
    });

Messenger.Default.Send(message);

To register and receive a message with callback, use the following code:

Messenger.Default.Register<NotificationMessageAction<bool>>(
    this,
    message =>
    {
        // Do something
        
        // Execute the callback
        message.Execute(true);
    });

Messenger.Default can be overriden

Sending messages to interfaces

Sending messages with a token

Messages can now be sent through the Messenger with a token.

To send a message with token, use the method overload Send<TMessage>(TMessage message, object token).

To receive a message with token, use the methods Register<TMessage>(object recipient, object token, Action<TMessage> action) or Register<TMessage>(object recipient, object token, bool receiveDerivedMessagesToo, Action<TMessage> action)

The token can be a simple value (int, string, etc…) or an instance of a class. The message is not delivered to recipients who registered with a different token, or with no token at all.

Renaming CommandMessage to NotificationMessage

ViewModelBase constructor with IMessenger

In the default ViewModelBase constructor is used, the Messenger.Default instance will be used instead.

EventToCommand behavior

Updated the project templates to remove the sample application

Bug corrections

Some bugs that were in Version 2 have been corrected:

In some occasions, an exception could be thrown when a recipient was registered for a message at the same time as a message was received.

New names for DLLs

WPF3.5SP1, Silverlight 3

When using the DLLs, make sure that you use the correct versions.

WPF4, Silverlight 4

When using the DLLs, make sure that you use the correct versions.

Laurent Bugnion (GalaSoft)

Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM Light V3 released at #MIX10

Dienstag, 16. März 2010 | From MVVM

What’s new

What’s new in MVVM Light Toolkit V3 is the topic of the next post.

Cleaning up

Installation

Installing MVVM Light toolkit is the manual process of unzipping a few files. The installation page has been updated to reflect the newest information.

Compatibility

MVVM Light toolkit V3 has components for the following environments and frameworks:

Visual Studio 2008:
- Silverlight 3
- Windows Presentation Foundation 3.5 SP1
Expression Blend 3
- Silverlight 3
- Windows Presentation Foundation 3.5 SP1
Visual Studio 2010 RC
- Silverlight 3
- Silverlight 4
- Windows Presentation Foundation 3.5 SP1
- Windows Presentation Foundation 4
- Silverlight for Windows Phone 7 series
Expression Blend 4 beta
- Silverlight 3
- Silverlight 4
- Windows Presentation Foundation 3.5 SP1
- Windows Presentation Foundation 4

Feedback

Video, tutorials

There are a few new videos and tutorials available for the MVVM Light toolkit. The material is listed on the Get Started page, under “tutorials”.

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

My program at #MIX10

Mittwoch, 10. März 2010 | From MVVM

Getting ready to fly to Vegas and MIX10 is really an exciting time! It is also a very busy time, because we are working on a few projects that will be shown on stage, I have my presentation to prepare, and of course as always the book… though these days it has been a bit on the back burner to be honest ;)

I arrive in Vegas on Sunday evening around 10PM, so I won’t be able to make it to the traditional IdentityMine dinner this year. I am sure it will be fun nonetheless!

My session: Understanding the MVVM pattern

http://live.visitmix.com/MIX10/Sessions/EX14

My session is scheduled on the first day, which is awesome, so I am crossing my fingers and hoping that the MIX team doesn’t change it at the last minute… The session will take place on

Monday, the 15th of March, 2PM, Room Lagoon F

Important: remember that the USA are moving to Summer time on Sunday, so don’t forget to adjust your watches!!

Ask the Experts

On Monday evening, I will attend the Ask the Experts event, which is taking place between 5Pm and 6:30PM in the main meal hall. This will be a great occasion to grab a beer and talk about code.

The Commons

MIX has a great place called the Commons, a great location to chill between sessions, and meet tons of interesting people. I love the Commons and plan to spend a lot of time there to meet as many people as I can.

Parties

I was invited to a few parties, and will do my best to avoid conflicts :) I plan to be at the following events:

Silverlight Mixers on Monday evening
Insiders MIX party on Tuesday
Silverlight partner happy hour on Tuesday too

This is a lot of fun, but at the same time we all know that the best value of a conference is to meet people face to face. This is just the right occasion.

And on Thursday…

On Thursday I will be attending a Silverlight event at the Luxor. It will be a very busy day, perfect way to end the conference. I fly back home on Friday morning, but due to a long stop in Washington DC (where I intend to go downtown and take pictures… except if the weather is bad, in which case I will probably go to the museum of flight), I will reach home only on Sunday.

Getting hold of me

The best way to reach me during MIX is to send me a message on Twitter. I will regularly tweet my location at the conference, so make sure to come and meet me. I am eager to make new friends, to talk about the fantastic jobs we did in WPF and Silverlight over the past year and hear your war stories!

http://www.twitter.com/lbugnion

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Schedule for my session at MIX10

Freitag, 5. März 2010 | From MVVM

Microsoft has published the schedule for the MIX10 sessions. I have a sweet spot, and I dearly hope that it stays this way (Last year I had a great spot, but it was changed last minute and then I had a much better one, “competing” against Vertigo and their Playboy app… yeah try to explain to a bunch of geeks that MVVM is better than Playboy… good luck with that ;) Anyway, this year my sweet spot is on the very first day of the conference (there are workshops on Sunday, but this qualifies as pre-conference), Monday after the keynote which should get everyone pumped and excited.

Schedule and location

I would be really happy to meet y’all at

Understanding the Model-View-ViewModel Pattern

in Lagoon F on Monday at 2:00 PM

http://live.visitmix.com/MIX10/Sessions/EX14

See you in Vegas (or in video…)

Everything I saw so far hints that this should be a very, very exciting edition of MIX, maybe the most electrifying ever. The great news is that everything will be available even if you cannot make it: The keynotes are typically streamed live, and if you remember last year’s experience at PDC, it is a really good alternative. Built with Silverlight, the feed uses smooth streaming (adjusting the quality according to your bandwidth automatically), possibility to pause and rewind if you miss something, and a great picture quality. As for the sessions, the message at MIX is that the videos will be available online approximately 24 hours after the session is being held. This is a great feat!

So, see you in Vegas (or in video)!

Cheers,

Laurent

The MVVM landscape at MIX10

Donnerstag, 21. Januar 2010 | From MVVM

The MIX conference this year had an open call for sessions, and 12 sessions were voted by the public out of 169. Surprisingly (or maybe not that surprisingly in fact), 3 sessions out of the 12 have the MVVM pattern in their title. This shows a lot of interest for this pattern which is helping the developer to create decoupled, testable, blendable applications in Silverlight and in WPF.

Since my session is one of the three, I decided to contact the other two speakers (we happen to run in the same circles ;)) and try to coordinate the content. I think that by talking to each other, we can organize our content so that we avoid overlap and offer a wider landscape to the audience.

The two other authors responded positively to my request, and this is roughly how it will look like. Of course some overlap is unavoidable, to set the context right and avoid misunderstandings. After all, MVVM is a pattern, and as such there are multiple possible implementations or even interpretations of the pattern. But I think that this way, you will get a wider, deeper overview of what MVVM has to offer for you today.

Rob Eisenberg’s “Build Your Own MVVM Framework”

Rob is coordinator on the Caliburn project (a very powerful MVVM framework), but this is not a Caliburn talk. Instead, Rob will take some of the features of this framework and demonstrate how to build them from scratch. This should be a must see for the people who want to understand what is involved in a MVVM application, and how to avoid taking a dependency on an external framework. Rob will also talk about additional topics not directly related to MVVM.

Shawn Wildermuth’s “RIA Services and MVVM: It Can Happen!”

Shawn is going to set the focus on MVVM applied to RIA Services applications. He will show you all the code, and then how external frameworks can help you in your task.

Laurent Bugnion’s “Understanding the Model-View-ViewModel Pattern”

In this talk, I will set primary focus on the Blendability, i.e. how to structure your application so that it works great in Expression Blend. For instance, how can you display “design time data” in Expression Blend, so that the designers have something to design against. I will also show some components included in my MVVM Light Toolkit and explain how they can help you solve some issues in your applications. My talk will apply to Windows Presentation Foundation as well as Silverlight.

To be noted

It is nice to note that Rob, Shawn and I are not employed by Microsoft, but “just” enthusiast users of the technologies we will talk about. There is a great community around Silverlight and WPF, and it is interesting to note that most of the MVVM frameworks (at the exception of PRISM which is not directly an MVVM framework) originate from outside of Microsoft. Let’s spread the word: MVVM is the pattern of choice when you work in WPF or Silverlight. Come visit our sessions, your life as a developer will be changed!

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM News Feed

Updated Wiki: Home

lbugnion — Tue, 02 Mar 2010 11:53:02 GMT

Project Description
The MVVM Light Toolkit is a set of components helping people to get started in the Model - View - ViewModel pattern in Silverlight and WPF. It is a light and pragmatic framework that contains only the essential components needed.

More information about the MVVM Light Toolkit can be found on http://www.galasoft.ch/mvvm/getstarted.

MVVM News Feed

The MVVM landscape at MIX10

Donnerstag, 21. Januar 2010 | From MVVM

Rob Eisenberg’s “Build Your Own MVVM Framework”

Shawn Wildermuth’s “RIA Services and MVVM: It Can Happen!”

Shawn is going to set the focus on MVVM applied to RIA Services applications. He will show you all the code, and then how external frameworks can help you in your task.

Laurent Bugnion’s “Understanding the Model-View-ViewModel Pattern”

To be noted

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Talking in Las Vegas: MIX2010 and MVVM

Dienstag, 19. Januar 2010 | From MVVM

This morning, very early (or very late depending how you see it), I learned that one of the sessions I submitted to the MIX 2010 open call for speakers had been picked by the public. Out of 169 sessions, only 12 were picked, so you imagine my feelings right now. Honestly, I am sure that this will be a good session, but it could have gone either way, and I had prepared myself mentally for the alternative possibility too.

Understanding the Model-View-ViewModel pattern

The Model-View-ViewModel pattern (also called MVVM) is a hot topic in today’s Silverlight and WPF world. This pattern facilitates modern development techniques such as separation of concerns (decoupling), unit testing and test driven development, work with modern tools such as Visual Studio 2010, Expression Blend and more.

In this session, Laurent (a user and promoter of MVVM since 2006) will introduce this pattern to you with many demos. We will talk about the basic components of a modern Silverlight or WPF application, and of additional helpers that will make your life as a developer much easier.

MVVM at MIX

Interestingly, 3 of the 12 open call sessions picked by the audience have “MVVM” in the title. Rob Eisenberg’s “Build Your Own MVVM Framework” and Shawn Wildermuth’s “RIA Services and MVVM: It Can Happen!”, in addition to mine, should cover the topic in depth. After thinking about it, I decided I will contact Rob and Shawn to talk to them about their session, and try to avoid overlap.

On my end, I will probably shift the focus a little more on what MVM brings you from a designer (well, integrator)’s point of view, and how you can leverage this pattern to create beautiful applications. I will also, of course, talk about the MVVM Light Toolkit, the open source toolkit I have been developing since last year, and which encounters a great success.

Send me your suggestions

I would love to hear if you have topics you would like to hear about during the session. I have a pretty good idea of what I will talk about, but let me know what is really important for you. What aspects of MVVM do you want me to focus on? What components of MVVM Light? Let me know, and I will adapt the content to include these topics!

I am very much looking forward to this session, and will see you in March at MIX!

MIX 2010: Voting for sessions has begun (I got two)

Mittwoch, 6. Januar 2010 | From MVVM

This year Microsoft decided to have an open call for sessions for the MIX 2010 in Las Vegas. This conference, in case you don’t know it yet, is a great 3 days about modern client technologies, such as ASP.NET, Windows Presentation Foundation and of course Silverlight. This year, MIX is taking place from the 15th to the 17th of March 2010 in the Mandalay Bay hotel in Vegas.

Today, the voting began! I didn’t count them, but there seems to be more than 100 sessions lined up, and the competition is fierce: Only 10 sessions will make the cut and be chosen for MIX. I just reviewed the speakers, and it is a pretty amazing line-up.

On my end, I submitted two sessions (see below). I honestly think that these two sessions will help the attendees become better developers in Silverlight and in WPF. The talks are based on years of experience with these two technologies, on real life projects.

A day in the life of a Silverlight/WPF Integrator

Vote here: http://visitmix.com/opencallvote/Entry?entryId=ADAYIN060

Abstract:

This session proposes an insight in the life of an integrator (sometimes called User Experience Developer or “Devigner”). How do we translate a creative designer’s vision into code, transforming it into interactive applications? What tools do we use, what tricks did we learn? This session will show you how to start from scratch and coordinate designers and developers to create a new rich application in Silverlight or Windows Presentation Foundation. We will see how to architect and structure the application according to the best practices in the field, and what workflows are involved. We will also see how to create and integrate XAML assets into the user interface. You will leave with a much better understanding on how the new integrator role is changing the way that client applications are developed.

You want to create beautiful applications? That’s what I do for a living, come and share the experience!

Having worked as an integrator for quite a few years now, in large distributed teams of developers and designers, I have identified many areas where the process is different from a classic application. The integrator role is a fairly recent role and many firms need guidance to understand how to start developing their Silverlight or WPF applications, and how to move from wireframes to design to development to testing.

We will also review the tools and the tips&tricks that make the life of an integrator easier. This is not just about Expression Blend, but about all the small helpers that facilitate the integration process.

Understanding the Model-View-ViewModel pattern

Vote here: http://visitmix.com/opencallvote/Entry?entryId=UNDERS103

Abstract:

From the maker of the MVVM Light Toolkit!

This talk is targeted at developers who keep hearing people talk about the Model-View-ViewModel pattern, but don’t quite know what it is, what it does, and how to get the best out of that. Again, few slides and a lot of code, as we will walk through the creation of a MVVM application and study the components that help separating the concerns in the application. We will also talk about external frameworks that help you creating new MVVM applications.

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Silverlight 4: Drag&drop with EventToCommand

Donnerstag, 17. Dezember 2009 | From MVVM

One of the MVVM Light Toolkit’s user requested that I add the possibility to pass the EventArgs of an event to the ICommand that it is bound to through the EventToCommand trigger. At first I was a bit reluctant because it seems like a transgression of the rule that says you should avoid to have too much knowledge about the UI layer in the ViewModel. For example, if you have a RelayCommand in the ViewModel that expects a MouseEventArgs, it kinds of binds you to a certain kind of UI element, which is not super clean.

That said, I also understand that in some cases it might be useful to get the EventArgs down in the ViewModel, which is why I decided to add this possibility (available from V3/alpha 3).

And in fact, as I was testing it, I just got another request from my good friend Laurent Kempé (one of the early and enthusiastic users of MVVM Light) to help use EventToCommand in the case of a drag&drop operation in Silverlight 4. That was the perfect test case for this new feature.

Note: Laurent wrote a post in French describing a drag&drop implementation.

Resources

The source code for this sample is available here. The MVVM Light Toolkit’s DLLs are also included (V3/alpha3). This code is for Visual Studio 2010 beta 2 and/or Expression Blend Preview for Silverlight 4.

You can optionally install the MVVM Light Toolkit V3/alpha3 from the Installing Manually page.

More info about the MVVM Light Toolkit is available on the Get Started page.

Creating a drag&drop enabled Silverlight application

Let’s start by creating a new MVVM Light application in Silverlight 4. In the moment the process of installing the project templates is manual, but it should be easy enough if you follow these instructions.

You can create a new MVVM Light application for Silverlight 4 in Visual Studio 2010 or in Expression Blend Preview 4. Simply choose File, New Project and then select the template called MVVM Light (SL4).

We need to define a drop target for the files in the application. This can be done for just any UI element, so you can choose the main Grid (if you want the whole application to be a drop target) or any other element. In our case, to keep things simple, let’s define the main Grid as the drop target.

Set the property AllowDrop to True, either in XAML or in Blend. Also change the other properties as shown in XAML below.
Note: We will implement the DroppedFileContent property in a moment.

<Grid x:Name="LayoutRoot"
      AllowDrop="True"
      Background="#FF9F9F9F">
    <TextBlock FontSize="36"
               FontWeight="Bold"
               Foreground="Purple"
               Text="{Binding DroppedFileContent}"
               VerticalAlignment="Center"
               HorizontalAlignment="Center"
               TextWrapping="Wrap"
               TextTrimming="WordEllipsis" />
</Grid>

Open the MainViewModel and add a bindable property.

Note: If you have the MVVM Light Toolkit installed, you can use a code snippet for this: Type mvvminpc then tab to expand the snippet, and enter the property’s name, tab, its type, tab and the name of the attribute. Then, edit the code until it looks like the one below:

/// <summary>
/// The <see cref="DroppedFileContent" /> property's name.
/// </summary>
public const string DroppedFileContentPropertyName = "DroppedFileContent";

private string _droppedFile = "Drop file here";

/// <summary>
/// Gets the DroppedFileContent property.
/// Changes to that property's value raise the PropertyChanged event. 
/// </summary>
public string DroppedFileContent
{
    get
    {
        return _droppedFile;
    }

    set
    {
        if (_droppedFile == value)
        {
            return;
        }

        _droppedFile = value;
        RaisePropertyChanged(DroppedFileContentPropertyName);
    }
}

Add a RelayCommand<DragEventArgs> property to the MainViewModel. Name this property HandleDropCommand. You will need to add GalaSoft.MvvmLight.Command, System and System.Windows to the “using” section.

public RelayCommand<DragEventArgs> HandleDropCommand
{
    get;
    private set;
}

Finally, in the constructor, initialize the HandleDropCommand. We will start by simply showing a MessageBox when a file is dropped.

public MainViewModel()
{
    HandleDropCommand = new RelayCommand<DragEventArgs>(e =>
    {
        System.Windows.MessageBox.Show("Drop");
    });
}

Add an EventToCommand trigger to the main Grid. This element is part of the GalaSoft.MvvmLight.Extras DLL which is referenced by default in the MVVM Light project template, so if you start like we described here, you don’t need to do anything to use EventToCommand. If you start from a non MVVM Light application, you need to add a reference to GalaSoft.MvvmLight.dll, GalaSoft.MvvmLight.Extras.dll and System.Windows.Interactivity.dll (make sure you get the V3/alpha3 version).
- Build the application to make sure that you have the latest stand loaded in Blend.
- In Blend, open the Assets tab, select the EventToCommand from the Behaviors category and drag/drop it on the LayoutRoot grid.
- Then set the EventName property to “Drop”.
- Bind the Command property to the HandleDropCommand in the MainViewModel which is the Explicit Data Context of the main Grid.
  
  Note: To open the databinding editor, press the advanced properties widget (the small black square) next to the Command property, and select Data Binding from the context menu.

Finally, check the PassEventArgsToCommand checkbox.

Note: The combination of having an argument of type EventArgs in the RelayCommand, and the PassEventArgsToCommand property set to true will cause the event’s EventArgs to be passed directly to the RelayCommand’s parameter.

If you do not have Blend, you can also add the EventToCommand in Visual Studio in XAML:
- In the MainPage.xaml file, add two namespaces to the UserCommand tag:

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras"

Then, add the EventToCommand trigger within the LayoutRoot grid with the following XAML code:

<i:Interaction.Triggers>
    <i:EventTrigger EventName="Drop">
        <cmd:EventToCommand Command="{Binding HandleDropCommand, Mode=OneWay}"
                            PassEventArgsToCommand="True" />
    </i:EventTrigger>
</i:Interaction.Triggers>

Test the application: In Blend, press F5, or in Visual Studio press Ctrl-F5. Then, drag a file, and drop it on the main Grid. Notice how the mouse cursor indicates that the Grid is a valid drop target.

Drop the file. You should see the MessageBox proving that the RelayCommand has been called successfully.

Getting and handling the files

Now that we have the RelayCommand ready, let’s access the DragEventArgs and get the file content from there. In this sample example, we will accept TXT files, and display the first few words from the file content.

Replace the call to MessageBox within the HandleDropCommand implementation with the following code:

if (e.Data == null)
{
    return;
}

var files = e.Data.GetData(DataFormats.FileDrop)
    as FileInfo[];

// This works with multiple files, but in that
// simple case, let's just handle the 1st one
if (files == null
    || files.Length == 0)
{
    DroppedFileContent = "No files";
    return;
}

var file = files[0];

if (!file.Extension.ToLower().Equals(".txt"))
{
    DroppedFileContent = "Not a TXT file";
    return;
}

using (var stream = file.OpenRead())
{
    using (var reader = new StreamReader(stream))
    {
        // Read the first line
        var line = reader.ReadLine();
        DroppedFileContent = line;
    }
}

Few notes about this code:

You can get a reference to the files dropped on the target with the DragEventArgs.Data.GetData method.

Note however that since we are in Silverlight within the security sandbox, you will get a security exception if you try to access the file’s FullName. You may get the content of the file (because it is dropped by the user) but not additional information about where these files are located.

In this example, we get only the first file, but it is easy to see how we could access all the files dropped.

We do handle only TXT files in this example.

Reading the file’s content is done in an usual way, with a Stream and a StreamReader. Note the presence of the “using” statements, to make it easier (no need to explicitly close and dispose the stream and the reader). For binary files, we would use a BinaryReader, etc…

An issue with Visual Studio 2010

In the course of preparing this article, I noticed an issue in Visual Studio 2010 when I attempt to debug the HandleDropCommand implementation. Even with a breakpoint placed within the code, the debugger does not break. I am not sure right now what is the reason, and the code does get executed, but this complicates debugging of course. I am investigating and talking to Microsoft about that, but right now I am not sure where it comes from.

Conclusion

In the MVVM pattern, we generally try to avoid putting too much code in the code behind because it complicates the developer-designer workflow. Though I am not a puritan about that :) I think that EventToCommand and the new PassEventArgsToCommand property are reasonable steps to make UI interaction such as drag&drop even easier to code.

Hope you like it :)

Laurent Bugnion (GalaSoft)

Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM Light V3/alpha3 for Blend 3 and Blend Preview 4

Samstag, 5. Dezember 2009 | From MVVM

The project and item templates allowing you to create pre-wired MVVM Light applications are now also available for Expression Blend 3 and Expression Blend Preview for .NET 4 and Silverlight 4. The installation process is manual, but not difficult at all (unzipping a few files to predefined paths). I did document the installation process here.

Of course the templates are also available for Visual Studio 2008 and Visual Studio 2010, as well as the binaries. The source code is available on Codeplex.

I still have one feature I want to add in V3, and then I will create a release version. Seeing how my schedule is, it will probably be during the holidays. However, V3/alpha 3 is very stable and I didn’t get any error report from users who upgraded. I also don’t think there will be any breaking change. At this point, I would recommend users who want the new features to upgrade to V3.

I will post a list of new features in this version later.

Happy coding!

MVVM Light V3 in Blend Preview for .NET 4 and Silverlight 4

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM Light Toolkit V3 Alpha 3 for WPF4/SL4

Montag, 30. November 2009 | From MVVM

I just published the latest alpha version of the MVVM Light Toolkit. I will post more about the new features in this alpha version, but the most exciting is probably that with this release, the MVVM Light Toolkit works in Windows Presentation Foundation 4 and in Silverlight 4 (in Visual Studio 2010).

There is no automatic installer for this version yet, but I wrote a page describing how to install manually (it is as easy as unzipping a few files). All the features are also available for Visual Studio 2008 as usual.

The source code was also updated on the Codeplex website.

More documentation will follow soon so stay tuned. In the mean time, have fun with MVVM in WPF4/SL4!

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Bug correction in Messenger and new feature in EventToCommand (MVVM Light Toolkit V3 alpha)

Freitag, 13. November 2009 | From MVVM

The advantage of pushing very early software to the advanced users is that bugs are detected before too many people suffer from them, and features requests can be placed and implemented without pain. This is exactly what happened with the MVVM Light Toolkit V3 alpha 2.

Bug correction

This applies to the new “send with token” feature of the Messenger. When a recipient registers for a type of message, it can provide a token (any object). Then, when a sender sends a message, it can also provide the same token. The Messenger will only send the messages to those recipients who provided the same token when registering. This enables creating separate optimized communication channels between objects. The token can be any object, for example a string, a GUID, etc…

A silly mistake I made in the Messenger preventer simple values (such as an Integer) to be used as a token when sending a message. Simple values can be very valuable for this scenario, since a common reference is not needed to the token: It is simply a kind of contract that the sender and the receiver agree upon in advance. This is as decoupled as it gets, and yet enables a private channel of communication between two objects. Anyway, this mistake is corrected, and available in changeset 34855 on Codeplex.

New feature

A user on Codeplex required an additional feature in the EventToCommand behavior: Adding a way to get the EventArgs from the fired event to the invoked command. I tried to find a good way to implement that, and decided to make this an opt-in feature. The scenario is:

if you set the new property PassEventArgsToCommand to true in the EventToCommand
and you do NOT set the CommandParameter, nor the CommandParameterValue
and you use a RelayCommand<EventArgs> as the data bound command
then the parameter passed to the RelayCommand will be the EventArgs.

I believe that passing the EventArgs straight to the ViewModel is a bit overstepping the separation of concerns between the View and the ViewModel. However I do also acknowledge that there are cases where this can be useful, and so now it is possible. This feature is also implemented in changeset 34855 on Codeplex.

I also updated the sample application which can be downloaded here, or from Codeplex (see below).

Sample applications on Codeplex

I took the occasion to upload some sample applications on Codeplex too.

EventToCommand: This application demoes the feature of the same name, and is detailed in this blog post.
CleanShutdown: This application shows a practical use for the Messenger, and a way to implement a clean shutdown that can easily be extended with additional components. More about this application here.
RaiseCanExecuteChanged: This app shows how to use RelayCommands and more info about this sample is found in this blog post.

Happy coding!!

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM Light Toolkit Logo by P. Schutz

Samstag, 7. November 2009 | From MVVM

I met Philippe Schutz at the TechDays in Geneva early this year, and have been following him on Facebook since then. He does amazing work with logos and icons, and it is only natural that I have thought of him when I decided to get a new logo and icons for the MVVM Light Toolkit.

A brand identity is quite important to me even in private projects. This is why I created the site GalaSoft (www.galasoft.ch) years ago, and started using this “brand” consistently as well as the cat logo (more about that on a post I wrote last year)

With the MVVM Light Toolkit starting to gain quite some popularity in the community, I have received a few suggestions to open a Facebook page for it, and to promote it on some other platforms. To do this, I needed a logo, something to display proudly and conveying the image, the message of MVVM Light.

So I present to you proudly the new MVVM Light Toolkit logos designed by Philippe Schutz:

Yeah I know, they are beautiful.

The design is meant to remind from the Windows 7 aesthetics, and of the Silverlight / .NET logos. I think it is a total success. Of course, the feather suggests the idea of lightness, as opposed to more complex frameworks that are very powerful, but also quite hard to understand and start with.

I will work hard to include this new identity in the MVVM Light Toolkit and all the material related (websites, etc…). I am also preparing a Facebook page for “the fans” ;) So as usual, stay tuned!

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM News Feed

Updated Wiki: Home

lbugnion — Tue, 02 Mar 2010 11:52:34 GMT

MVVM News Feed

The MVVM landscape at MIX10

Donnerstag, 21. Januar 2010 | From MVVM

Rob Eisenberg’s “Build Your Own MVVM Framework”

Shawn Wildermuth’s “RIA Services and MVVM: It Can Happen!”

Shawn is going to set the focus on MVVM applied to RIA Services applications. He will show you all the code, and then how external frameworks can help you in your task.

Laurent Bugnion’s “Understanding the Model-View-ViewModel Pattern”

To be noted

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Talking in Las Vegas: MIX2010 and MVVM

Dienstag, 19. Januar 2010 | From MVVM

Understanding the Model-View-ViewModel pattern

MVVM at MIX

Send me your suggestions

I am very much looking forward to this session, and will see you in March at MIX!

MIX 2010: Voting for sessions has begun (I got two)

Mittwoch, 6. Januar 2010 | From MVVM

A day in the life of a Silverlight/WPF Integrator

Vote here: http://visitmix.com/opencallvote/Entry?entryId=ADAYIN060

Abstract:

You want to create beautiful applications? That’s what I do for a living, come and share the experience!

Understanding the Model-View-ViewModel pattern

Vote here: http://visitmix.com/opencallvote/Entry?entryId=UNDERS103

Abstract:

From the maker of the MVVM Light Toolkit!

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Silverlight 4: Drag&drop with EventToCommand

Donnerstag, 17. Dezember 2009 | From MVVM

That said, I also understand that in some cases it might be useful to get the EventArgs down in the ViewModel, which is why I decided to add this possibility (available from V3/alpha 3).

Note: Laurent wrote a post in French describing a drag&drop implementation.

Resources

You can optionally install the MVVM Light Toolkit V3/alpha3 from the Installing Manually page.

More info about the MVVM Light Toolkit is available on the Get Started page.

Creating a drag&drop enabled Silverlight application

You can create a new MVVM Light application for Silverlight 4 in Visual Studio 2010 or in Expression Blend Preview 4. Simply choose File, New Project and then select the template called MVVM Light (SL4).

Set the property AllowDrop to True, either in XAML or in Blend. Also change the other properties as shown in XAML below.
Note: We will implement the DroppedFileContent property in a moment.

<Grid x:Name="LayoutRoot"
      AllowDrop="True"
      Background="#FF9F9F9F">
    <TextBlock FontSize="36"
               FontWeight="Bold"
               Foreground="Purple"
               Text="{Binding DroppedFileContent}"
               VerticalAlignment="Center"
               HorizontalAlignment="Center"
               TextWrapping="Wrap"
               TextTrimming="WordEllipsis" />
</Grid>

Open the MainViewModel and add a bindable property.

Note: If you have the MVVM Light Toolkit installed, you can use a code snippet for this: Type mvvminpc then tab to expand the snippet, and enter the property’s name, tab, its type, tab and the name of the attribute. Then, edit the code until it looks like the one below:

/// <summary>
/// The <see cref="DroppedFileContent" /> property's name.
/// </summary>
public const string DroppedFileContentPropertyName = "DroppedFileContent";

private string _droppedFile = "Drop file here";

/// <summary>
/// Gets the DroppedFileContent property.
/// Changes to that property's value raise the PropertyChanged event. 
/// </summary>
public string DroppedFileContent
{
    get
    {
        return _droppedFile;
    }

    set
    {
        if (_droppedFile == value)
        {
            return;
        }

        _droppedFile = value;
        RaisePropertyChanged(DroppedFileContentPropertyName);
    }
}

Add a RelayCommand<DragEventArgs> property to the MainViewModel. Name this property HandleDropCommand. You will need to add GalaSoft.MvvmLight.Command, System and System.Windows to the “using” section.

public RelayCommand<DragEventArgs> HandleDropCommand
{
    get;
    private set;
}

Finally, in the constructor, initialize the HandleDropCommand. We will start by simply showing a MessageBox when a file is dropped.

public MainViewModel()
{
    HandleDropCommand = new RelayCommand<DragEventArgs>(e =>
    {
        System.Windows.MessageBox.Show("Drop");
    });
}

Add an EventToCommand trigger to the main Grid. This element is part of the GalaSoft.MvvmLight.Extras DLL which is referenced by default in the MVVM Light project template, so if you start like we described here, you don’t need to do anything to use EventToCommand. If you start from a non MVVM Light application, you need to add a reference to GalaSoft.MvvmLight.dll, GalaSoft.MvvmLight.Extras.dll and System.Windows.Interactivity.dll (make sure you get the V3/alpha3 version).
- Build the application to make sure that you have the latest stand loaded in Blend.
- In Blend, open the Assets tab, select the EventToCommand from the Behaviors category and drag/drop it on the LayoutRoot grid.
- Then set the EventName property to “Drop”.
- Bind the Command property to the HandleDropCommand in the MainViewModel which is the Explicit Data Context of the main Grid.
  
  Note: To open the databinding editor, press the advanced properties widget (the small black square) next to the Command property, and select Data Binding from the context menu.

Finally, check the PassEventArgsToCommand checkbox.

Note: The combination of having an argument of type EventArgs in the RelayCommand, and the PassEventArgsToCommand property set to true will cause the event’s EventArgs to be passed directly to the RelayCommand’s parameter.

If you do not have Blend, you can also add the EventToCommand in Visual Studio in XAML:
- In the MainPage.xaml file, add two namespaces to the UserCommand tag:

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras"

Then, add the EventToCommand trigger within the LayoutRoot grid with the following XAML code:

<i:Interaction.Triggers>
    <i:EventTrigger EventName="Drop">
        <cmd:EventToCommand Command="{Binding HandleDropCommand, Mode=OneWay}"
                            PassEventArgsToCommand="True" />
    </i:EventTrigger>
</i:Interaction.Triggers>

Test the application: In Blend, press F5, or in Visual Studio press Ctrl-F5. Then, drag a file, and drop it on the main Grid. Notice how the mouse cursor indicates that the Grid is a valid drop target.

Drop the file. You should see the MessageBox proving that the RelayCommand has been called successfully.

Getting and handling the files

Replace the call to MessageBox within the HandleDropCommand implementation with the following code:

if (e.Data == null)
{
    return;
}

var files = e.Data.GetData(DataFormats.FileDrop)
    as FileInfo[];

// This works with multiple files, but in that
// simple case, let's just handle the 1st one
if (files == null
    || files.Length == 0)
{
    DroppedFileContent = "No files";
    return;
}

var file = files[0];

if (!file.Extension.ToLower().Equals(".txt"))
{
    DroppedFileContent = "Not a TXT file";
    return;
}

using (var stream = file.OpenRead())
{
    using (var reader = new StreamReader(stream))
    {
        // Read the first line
        var line = reader.ReadLine();
        DroppedFileContent = line;
    }
}

Few notes about this code:

You can get a reference to the files dropped on the target with the DragEventArgs.Data.GetData method.

Note however that since we are in Silverlight within the security sandbox, you will get a security exception if you try to access the file’s FullName. You may get the content of the file (because it is dropped by the user) but not additional information about where these files are located.

In this example, we get only the first file, but it is easy to see how we could access all the files dropped.

We do handle only TXT files in this example.

Reading the file’s content is done in an usual way, with a Stream and a StreamReader. Note the presence of the “using” statements, to make it easier (no need to explicitly close and dispose the stream and the reader). For binary files, we would use a BinaryReader, etc…

An issue with Visual Studio 2010

Conclusion

Hope you like it :)

Laurent Bugnion (GalaSoft)

Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM Light V3/alpha3 for Blend 3 and Blend Preview 4

Samstag, 5. Dezember 2009 | From MVVM

Of course the templates are also available for Visual Studio 2008 and Visual Studio 2010, as well as the binaries. The source code is available on Codeplex.

I will post a list of new features in this version later.

Happy coding!

MVVM Light V3 in Blend Preview for .NET 4 and Silverlight 4

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM Light Toolkit V3 Alpha 3 for WPF4/SL4

Montag, 30. November 2009 | From MVVM

The source code was also updated on the Codeplex website.

More documentation will follow soon so stay tuned. In the mean time, have fun with MVVM in WPF4/SL4!

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Bug correction in Messenger and new feature in EventToCommand (MVVM Light Toolkit V3 alpha)

Freitag, 13. November 2009 | From MVVM

Bug correction

New feature

if you set the new property PassEventArgsToCommand to true in the EventToCommand
and you do NOT set the CommandParameter, nor the CommandParameterValue
and you use a RelayCommand<EventArgs> as the data bound command
then the parameter passed to the RelayCommand will be the EventArgs.

I also updated the sample application which can be downloaded here, or from Codeplex (see below).

Sample applications on Codeplex

I took the occasion to upload some sample applications on Codeplex too.

EventToCommand: This application demoes the feature of the same name, and is detailed in this blog post.
CleanShutdown: This application shows a practical use for the Messenger, and a way to implement a clean shutdown that can easily be extended with additional components. More about this application here.
RaiseCanExecuteChanged: This app shows how to use RelayCommands and more info about this sample is found in this blog post.

Happy coding!!

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM Light Toolkit Logo by P. Schutz

Samstag, 7. November 2009 | From MVVM

So I present to you proudly the new MVVM Light Toolkit logos designed by Philippe Schutz:

Yeah I know, they are beautiful.

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM News Feed

Updated Wiki: Home

lbugnion — Tue, 02 Mar 2010 11:52:01 GMT

MVVM News Feed

The MVVM landscape at MIX10

Donnerstag, 21. Januar 2010 | From MVVM

Rob Eisenberg’s “Build Your Own MVVM Framework”

Shawn Wildermuth’s “RIA Services and MVVM: It Can Happen!”

Shawn is going to set the focus on MVVM applied to RIA Services applications. He will show you all the code, and then how external frameworks can help you in your task.

Laurent Bugnion’s “Understanding the Model-View-ViewModel Pattern”

To be noted

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Talking in Las Vegas: MIX2010 and MVVM

Dienstag, 19. Januar 2010 | From MVVM

Understanding the Model-View-ViewModel pattern

MVVM at MIX

Send me your suggestions

I am very much looking forward to this session, and will see you in March at MIX!

MIX 2010: Voting for sessions has begun (I got two)

Mittwoch, 6. Januar 2010 | From MVVM

A day in the life of a Silverlight/WPF Integrator

Vote here: http://visitmix.com/opencallvote/Entry?entryId=ADAYIN060

Abstract:

You want to create beautiful applications? That’s what I do for a living, come and share the experience!

Understanding the Model-View-ViewModel pattern

Vote here: http://visitmix.com/opencallvote/Entry?entryId=UNDERS103

Abstract:

From the maker of the MVVM Light Toolkit!

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Silverlight 4: Drag&drop with EventToCommand

Donnerstag, 17. Dezember 2009 | From MVVM

That said, I also understand that in some cases it might be useful to get the EventArgs down in the ViewModel, which is why I decided to add this possibility (available from V3/alpha 3).

Note: Laurent wrote a post in French describing a drag&drop implementation.

Resources

You can optionally install the MVVM Light Toolkit V3/alpha3 from the Installing Manually page.

More info about the MVVM Light Toolkit is available on the Get Started page.

Creating a drag&drop enabled Silverlight application

You can create a new MVVM Light application for Silverlight 4 in Visual Studio 2010 or in Expression Blend Preview 4. Simply choose File, New Project and then select the template called MVVM Light (SL4).

Set the property AllowDrop to True, either in XAML or in Blend. Also change the other properties as shown in XAML below.
Note: We will implement the DroppedFileContent property in a moment.

<Grid x:Name="LayoutRoot"
      AllowDrop="True"
      Background="#FF9F9F9F">
    <TextBlock FontSize="36"
               FontWeight="Bold"
               Foreground="Purple"
               Text="{Binding DroppedFileContent}"
               VerticalAlignment="Center"
               HorizontalAlignment="Center"
               TextWrapping="Wrap"
               TextTrimming="WordEllipsis" />
</Grid>

Open the MainViewModel and add a bindable property.

Note: If you have the MVVM Light Toolkit installed, you can use a code snippet for this: Type mvvminpc then tab to expand the snippet, and enter the property’s name, tab, its type, tab and the name of the attribute. Then, edit the code until it looks like the one below:

/// <summary>
/// The <see cref="DroppedFileContent" /> property's name.
/// </summary>
public const string DroppedFileContentPropertyName = "DroppedFileContent";

private string _droppedFile = "Drop file here";

/// <summary>
/// Gets the DroppedFileContent property.
/// Changes to that property's value raise the PropertyChanged event. 
/// </summary>
public string DroppedFileContent
{
    get
    {
        return _droppedFile;
    }

    set
    {
        if (_droppedFile == value)
        {
            return;
        }

        _droppedFile = value;
        RaisePropertyChanged(DroppedFileContentPropertyName);
    }
}

Add a RelayCommand<DragEventArgs> property to the MainViewModel. Name this property HandleDropCommand. You will need to add GalaSoft.MvvmLight.Command, System and System.Windows to the “using” section.

public RelayCommand<DragEventArgs> HandleDropCommand
{
    get;
    private set;
}

Finally, in the constructor, initialize the HandleDropCommand. We will start by simply showing a MessageBox when a file is dropped.

public MainViewModel()
{
    HandleDropCommand = new RelayCommand<DragEventArgs>(e =>
    {
        System.Windows.MessageBox.Show("Drop");
    });
}

Add an EventToCommand trigger to the main Grid. This element is part of the GalaSoft.MvvmLight.Extras DLL which is referenced by default in the MVVM Light project template, so if you start like we described here, you don’t need to do anything to use EventToCommand. If you start from a non MVVM Light application, you need to add a reference to GalaSoft.MvvmLight.dll, GalaSoft.MvvmLight.Extras.dll and System.Windows.Interactivity.dll (make sure you get the V3/alpha3 version).
- Build the application to make sure that you have the latest stand loaded in Blend.
- In Blend, open the Assets tab, select the EventToCommand from the Behaviors category and drag/drop it on the LayoutRoot grid.
- Then set the EventName property to “Drop”.
- Bind the Command property to the HandleDropCommand in the MainViewModel which is the Explicit Data Context of the main Grid.
  
  Note: To open the databinding editor, press the advanced properties widget (the small black square) next to the Command property, and select Data Binding from the context menu.

Finally, check the PassEventArgsToCommand checkbox.

Note: The combination of having an argument of type EventArgs in the RelayCommand, and the PassEventArgsToCommand property set to true will cause the event’s EventArgs to be passed directly to the RelayCommand’s parameter.

If you do not have Blend, you can also add the EventToCommand in Visual Studio in XAML:
- In the MainPage.xaml file, add two namespaces to the UserCommand tag:

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras"

Then, add the EventToCommand trigger within the LayoutRoot grid with the following XAML code:

<i:Interaction.Triggers>
    <i:EventTrigger EventName="Drop">
        <cmd:EventToCommand Command="{Binding HandleDropCommand, Mode=OneWay}"
                            PassEventArgsToCommand="True" />
    </i:EventTrigger>
</i:Interaction.Triggers>

Test the application: In Blend, press F5, or in Visual Studio press Ctrl-F5. Then, drag a file, and drop it on the main Grid. Notice how the mouse cursor indicates that the Grid is a valid drop target.

Drop the file. You should see the MessageBox proving that the RelayCommand has been called successfully.

Getting and handling the files

Replace the call to MessageBox within the HandleDropCommand implementation with the following code:

if (e.Data == null)
{
    return;
}

var files = e.Data.GetData(DataFormats.FileDrop)
    as FileInfo[];

// This works with multiple files, but in that
// simple case, let's just handle the 1st one
if (files == null
    || files.Length == 0)
{
    DroppedFileContent = "No files";
    return;
}

var file = files[0];

if (!file.Extension.ToLower().Equals(".txt"))
{
    DroppedFileContent = "Not a TXT file";
    return;
}

using (var stream = file.OpenRead())
{
    using (var reader = new StreamReader(stream))
    {
        // Read the first line
        var line = reader.ReadLine();
        DroppedFileContent = line;
    }
}

Few notes about this code:

You can get a reference to the files dropped on the target with the DragEventArgs.Data.GetData method.

Note however that since we are in Silverlight within the security sandbox, you will get a security exception if you try to access the file’s FullName. You may get the content of the file (because it is dropped by the user) but not additional information about where these files are located.

In this example, we get only the first file, but it is easy to see how we could access all the files dropped.

We do handle only TXT files in this example.

Reading the file’s content is done in an usual way, with a Stream and a StreamReader. Note the presence of the “using” statements, to make it easier (no need to explicitly close and dispose the stream and the reader). For binary files, we would use a BinaryReader, etc…

An issue with Visual Studio 2010

Conclusion

Hope you like it :)

Laurent Bugnion (GalaSoft)

Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM Light V3/alpha3 for Blend 3 and Blend Preview 4

Samstag, 5. Dezember 2009 | From MVVM

Of course the templates are also available for Visual Studio 2008 and Visual Studio 2010, as well as the binaries. The source code is available on Codeplex.

I will post a list of new features in this version later.

Happy coding!

MVVM Light V3 in Blend Preview for .NET 4 and Silverlight 4

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM Light Toolkit V3 Alpha 3 for WPF4/SL4

Montag, 30. November 2009 | From MVVM

The source code was also updated on the Codeplex website.

More documentation will follow soon so stay tuned. In the mean time, have fun with MVVM in WPF4/SL4!

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

Bug correction in Messenger and new feature in EventToCommand (MVVM Light Toolkit V3 alpha)

Freitag, 13. November 2009 | From MVVM

Bug correction

New feature

if you set the new property PassEventArgsToCommand to true in the EventToCommand
and you do NOT set the CommandParameter, nor the CommandParameterValue
and you use a RelayCommand<EventArgs> as the data bound command
then the parameter passed to the RelayCommand will be the EventArgs.

I also updated the sample application which can be downloaded here, or from Codeplex (see below).

Sample applications on Codeplex

I took the occasion to upload some sample applications on Codeplex too.

EventToCommand: This application demoes the feature of the same name, and is detailed in this blog post.
CleanShutdown: This application shows a practical use for the Messenger, and a way to implement a clean shutdown that can easily be extended with additional components. More about this application here.
RaiseCanExecuteChanged: This app shows how to use RelayCommands and more info about this sample is found in this blog post.

Happy coding!!

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM Light Toolkit Logo by P. Schutz

Samstag, 7. November 2009 | From MVVM

So I present to you proudly the new MVVM Light Toolkit logos designed by Philippe Schutz:

Yeah I know, they are beautiful.

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM Light Toolkit V3 Alpha 2: EventToCommand behavior

Donnerstag, 5. November 2009 | From MVVM

Here is another early release of the MVVM Light Toolkit V3 (Alpha 2). I decided to release gradually and early as soon as a new part of this new version is ready, to allow advanced users to install, test and give feedback about the new features. If you haven’t seen it yet, the features available in V3 Alpha 1 are described in a previous article. There will be a few more alphas before I make a V3 release, which means more good things are a-coming ;)

Usual disclaimer: Alpha releases are not feature complete (meaning that APIs may change) and it is very possible that there are bugs in the code. Use with care and give feedback if something is not working, thanks!!

EventToCommand behavior

The new feature available in V3 Alpha2 is called EventToCommand and is a Blend behavior. These pieces of code are optimized for Expression Blend, but can also be added directly in XAML, as we will see in this article.

EventToCommand is used to bind an event to an ICommand directly in XAML.

Note: Even though Expression Blend facilitates the usage of EventToCommand, it is not a prerequisite. EventToCommand can be used even if Expression Blend is not installed on your system, or on your users’ system.

Credits, History

This behavior reuses much code from the Expression Blend sample behavior named InvokeDataCommand. I want to give props to the Expression team for creating and publishing these great samples. This would not have been possible without the work put into these samples. I want to especially thank Pete Blois and Jeff Kelly of the Expression team for their help.

I also want to thank Rishi, the creator of the nRoute toolkit, for the interesting discussions and a couple of ideas that I implemented in EventToCommand.

If you are already using InvokeDataCommand, the new EventToCommand behavior brings the following additional features:

WPF / Silverlight compatibility: The WPF version of the Expression Blend sample behavior InvokeDataCommand has a bug that prevents it to work (the Silverlight version runs fine though). The bug is corrected in EventToCommand, and both versions run well.
CommandParameter is bindable. You can bind this property, for example, to the value of a slider, the content of a TextBox, or any other property that is accessible to a data binding.
Disabling the attached control: If the IsEnabled property is available for the attached element, you can opt-in to automatically disable the element if the Command’s CanExecute method returns false. This is dynamic, i.e. if the value of CanExecute changes, the element will be disabled/enabled.
- In Silverlight, this is valid for all Controls.
- In WPF, this is valid for all FrameworkElements (Panels, Shapes, Controls, etc…).
- Note: By default, the element will not be disabled/enabled automatically. Since one element can have multiple EventToCommand behaviors added to link multiple events to commands, you probably want only one or two of these to affect the IsEnabled property. This can be turned on by using the MustToggleIsEnabled property, which can be either set in XAML (see below) or databound to a boolean value (checkbox, etc…).

Source code, Binaries

The source code is available for download from my website. If you prefer, you can go to the Codeplex page where the source code has also been updated.

The binaries can be found here.

Features, Usage

EventToCommand is a behavior that can be added to any FrameworkElement. This can be a Rectangle, an Ellipse (in fact, any shape), an Image, any Control (Button, Slider, CheckBox, RadioButton, and many many others) etc. In short: If you can add an element to your UI, you can probably add EventToCommand to it.

For more information about ICommand (and their MVVM Light implementation, RelayCommand), read this article. You can bind any event to any command. Typically, you will use this to link an element’s event to a command defined in a ViewModel class. For more information about the ViewModel pattern in WPF and Silverlight, this page will help you.

In Expression Blend:

Adding an EventToCommand to any element in Expression Blend is super easy thanks to the visual support.

Right click on the References folder and select “Add Reference”.

Add a reference to the MVVM Light DLLs. You need two: GalaSoft.MvvmLight.dll and GalaSoft.MvvmLight.Extras.dll. In addition, you need the System.Windows.Interactivity.dll which contains the base code for all behaviors.
You can download the DLLs needed here.
Open your project in Expression Blend, and build it to make sure that everything is working fine.
Locate the element on which you want to add a command in the Objects and Timeline panel.
Open the Assets panel and find the Behaviors category.
You can also find behaviors in the Asset library, which is the last button on the bottom of the toolbar.

Drag the EventToCommand behavior on the element you selected before in the Objects and Timeline panel.

With the EventToCommand selected, select the Properties panel.
Select the event you want to handle.

In the Miscellaneous section, bind the EventToCommand to the ICommand you want to execute when the event is fired.
If you use the MVVM pattern, you probably want to use an ICommand (for example a RelayCommand) located in the ViewModel that is set as the DataContext for your window/page.
In WPF, you can also enter a value, for example ApplicationCommands.Save. In that case, you must set a CommandBinding.

If you want to pass a parameter to the ICommand, you can set the CommandParameter property. You can data bind CommandParameter to something (for example the Text property of a TextBox, etc…). If you want to set a hard coded value ) for example “Hello world”, you need to set CommandParameterValue in the XAML editor (see the “Caveat” section below).

Finally, if you want the attached element to be disabled depending on the ICommand.CanExecute method, set the MustToggleIsEnabledValue property to True. You can also use MustToggleIsEnabled to data bind this property to something else (for example a CheckBox’s IsChecked property) (see the “Caveat” section below).
- In Silverlight, this will only work on Controls. Use the VisualStateManager to modify the appearance of the disabled control.
- In WPF, any FrameworkElement can be disabled. Use the Triggers panel to modify the appearance of the FrameworkElement when it is disabled.

In XAML

Using the XAML editor, follow the steps to add an EventToCommand to an element.

Add a reference to the MVVM Light DLLs. You need two: GalaSoft.MvvmLight.dll and GalaSoft.MvvmLight.Extras.dll. In addition, you need the System.Windows.Interactivity.dll which contains the base code for all behaviors.
You can download the DLLs needed here.
Add an xmlns for the following namespaces:

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras"

Add the EventToCommand to the desired element (in this example, a Rectangle) with the following XAML code:

This presupposes that the DataContext of your page/window is set to a ViewModel containing the TestCommand command, as is usual in the MVVM pattern.

<Rectangle Fill="White"
           Stroke="Black"
           Width="200"
           Height="100">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="MouseEnter">
            <cmd:EventToCommand Command="{Binding TestCommand,
                                          Mode=OneWay}"
               CommandParameter="{Binding Text,
                                  ElementName=MyTextBox,
                                  Mode=OneWay}"
               MustToggleIsEnabledValue="True" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
</Rectangle>

Listening to events on other elements

Because EventToCommand derives from System.Windows.Interactivity.TriggerAction<T>, it has a property named SourceName. With this property, you can attach EventToCommand to an element, but listen to events on another element. I didn’t explicitly forbid this in the code, but I would recommend against it. I think that it creates confusing code that can easily be broken. The best is probably to always listen to events on the attached element itself, and leave SourceName empty.

Small caveat

Because of limitations in the Silverlight framework (specifically, the fact that data bindings can only be applied to a FrameworkElement), I had to resort to a small trick to make CommandParameter and MustToggleIsEnabled bindable. You will see in the code that there are four properties:

CommandParameter:
- In Silverlight, used to data bind CommandParameter.
- In WPF, used either for data binding or for hard coded values.

CommandParameterValue:
- In Silverlight and in WPF, used for hard coded values only.

MustToggleIsEnabled:
- In Silverlight, used to data bind MustToggleIsEnabled.
- In WPF, used either for data binding or for hard coded values.

MustToggleIsEnabledValue:
- In Silverlight and in WPF, used for hard coded values only.

In short, if you don’t care about Silverlight compatibility for your XAML code, you can always use CommandParameter or MustToggleIsEnabled in WPF, either for data binding or for hard coded values. If you want to share your XAML between a Silverlight and a WPF application, then you should respect the rules above, or else you will get exceptions in Silverlight when the XAML is being parsed.

Demo application

The demo application shows multiple usages of the EventToCommand behavior. The application runs in Silverlight and in WPF. Feel free to download the code and play with it to learn how to use EventToCommand!

Binding a Button’s Click event and a Rectangle’s MouseEnter event to a simple RelayCommand.

Binding a Button’s Click event and a Rectangle’s MouseEnter event to a RelayCommand with a data bound parameter.

Binding a Button’s Click event and a Rectangle’s MouseEnter event to a RelayCommand with a hard coded parameter.

Binding a Button’s Click event and a Rectangle’s MouseEnter event to a RelayCommand and disabling them depending on the parameter’s value.

Note: In Silverlight, Rectangles cannot be disabled.

License

MVVM Light Toolkit is distributed under the MIT License. This license grants you the right to do pretty much anything you want with the code, but don’t come crying if you break something (the exact wording is found here). Some parts of the GalaSoft.MvvmLight.Extras DLL are licensed under the MS-PL license.

Laurent Bugnion (GalaSoft)

Subscribe | Twitter | Facebook | Flickr | LinkedIn

MVVM Light Toolkit V3 Alpha 1

Dienstag, 27. Oktober 2009 | From MVVM

This is a super early release of the next version of the MVVM Light Toolkit. Please enjoy with care, be aware that this version is not fully tested and not feature complete by a long shot.

The binaries are available for download, as well as the source code. In addition, the source code for V3 alpha1 is up to date in Codeplex, so you can also get the code from there.

What’s new in the Messenger?

So far the changes are:

Bug correction: A “collection was modified” error could occur if a recipient was registering for a message type in the same method it used to receive another message. A similar error had been fixed in V2, but unfortunately this one remained. A unit test was added to isolate this case, and a fix has been implemented.
New built-in message types: NotificationMessageAction and NotificationMessageAction<TCallbackParameter>. These types can be used to send a message through the Messenger, and get a callback. A next post will give more information about this scenario.
Renamed message types: To avoid some confusion, I renamed CommandMessage to NotificationMessage. These messages are used to convey a notification (of type string) from a sender to a recipient. The term “command” was too confusing because it is a loaded term in the MVVM pattern (ICommand, RoutedCommand, RelayCommand, etc…). The term NotificationMessage is clearer. The old types are still available but have been marked Obsolete and will be removed in a future version of the toolkit.

At this point it is good to remember that the Messenger class (from V2) can be used to send any kind of message, from simple values to complex objects. The built-in message types are merely a convenience for specific scenarios, but nothing forces you to use them!

To make testing and mocking easier, it is now possible to override the Messenger.Default property and provide another implementation. In addition, all the public methods of the Messenger class have now been marked virtual, which means that they can be overriden. A next post will give more information about this scenario.
In V2, you could send a message to a given type of recipients only by using the method overload Send<TMessage, TRecipient>. In V3, TRecipient can now be an interface. This enables the Messenger to send messages to all the objects implementing a given interface. Note that the Messenger can send to any type of recipient, and no special requirement is needed to receive a message. But if some of your objects happen to implement an interface (for example IViewModel), you can make sure that your messages reach only these recipients (of course, the recipients still need to register for a type of messages).
When a recipient registers for a type of message, it can provide a token (any object). Then, when a sender sends a message, it can also provide the same token. The Messenger will only send the messages to those recipients who provided the same token when registering. This enables creating separate optimized communication channels between objects. The token can be any object, for example a string, a GUID, etc…

What’s new in ViewModelBase?

In V3 alpha 1, a small change has been made to ViewModelBase: The constructor ViewModelBase(Messenger) has been replaced by ViewModelBase(IMessenger). This makes it easier to test and mock ViewModels that use their own implementation of the IMessenger interface.

More changes will be implemented in V3 final.

Installation

if you have MVVM Light Toolkit V2 installed, you can easily deploy the V3 alpha1 DLLs manually by following the steps:

In Windows, choose the Start menu then All Programs, MVVM Light Toolkit, Binaries (Assemblies). This starts the Windows Explorer in the Binaries folder.
(optional but recommended) Rename GalaSoft.MvvmLight.dll (and the Silverlight version too) to GalaSoft.MvvmLight.bak.
Download the V3 alpha1 binaries.
Extract this file to a local folder.
Copy the WPF version of the assembly in Binaries, and then copy the Silverlight version to Binaries\Silverlight.

After these few steps, you are all set to use the new features described here. Again, remember that this is a super early release, so use with care and revert to V2 if you are encountering issues. Also, please give me feedback and suggestions!

What else?

I will publish in the next few days a few blog posts about these new features, and also continue to work on new features. As soon as some features are ready, I will push an alpha2 and blog about it. Thanks a lot for the support!!

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook| Flickr | LinkedIn

MVVM News Feed

Updated Wiki: Home

lbugnion — Tue, 02 Mar 2010 11:51:40 GMT

Updated Wiki: Home

lbugnion — Tue, 03 Nov 2009 09:14:53 GMT

MVVM News Feed

MVVM Light Toolkit V3 Alpha 1

Tuesday, October 27, 2009 | From MVVM

This is a super early release of the next version of the MVVM Light Toolkit. Please enjoy with care, be aware that this version is not fully tested and not feature complete by a long shot.

The binaries are available for download, as well as the source code. In addition, the source code for V3 alpha1 is up to date in Codeplex, so you can also get the code from there.

What’s new in the Messenger?

So far the changes are:

Bug correction: A “collection was modified” error could occur if a recipient was registering for a message type in the same method it used to receive another message. A similar error had been fixed in V2, but unfortunately this one remained. A unit test was added to isolate this case, and a fix has been implemented.
New built-in message types: NotificationMessageAction and NotificationMessageAction<TCallbackParameter>. These types can be used to send a message through the Messenger, and get a callback. A next post will give more information about this scenario.
Renamed message types: To avoid some confusion, I renamed CommandMessage to NotificationMessage. These messages are used to convey a notification (of type string) from a sender to a recipient. The term “command” was too confusing because it is a loaded term in the MVVM pattern (ICommand, RoutedCommand, RelayCommand, etc…). The term NotificationMessage is clearer. The old types are still available but have been marked Obsolete and will be removed in a future version of the toolkit.

To make testing and mocking easier, it is now possible to override the Messenger.Default property and provide another implementation. In addition, all the public methods of the Messenger class have now been marked virtual, which means that they can be overriden. A next post will give more information about this scenario.
In V2, you could send a message to a given type of recipients only by using the method overload Send<TMessage, TRecipient>. In V3, TRecipient can now be an interface. This enables the Messenger to send messages to all the objects implementing a given interface. Note that the Messenger can send to any type of recipient, and no special requirement is needed to receive a message. But if some of your objects happen to implement an interface (for example IViewModel), you can make sure that your messages reach only these recipients (of course, the recipients still need to register for a type of messages).
When a recipient registers for a type of message, it can provide a token (any object). Then, when a sender sends a message, it can also provide the same token. The Messenger will only send the messages to those recipients who provided the same token when registering. This enables creating separate optimized communication channels between objects. The token can be any object, for example a string, a GUID, etc…

What’s new in ViewModelBase?

More changes will be implemented in V3 final.

Installation

if you have MVVM Light Toolkit V2 installed, you can easily deploy the V3 alpha1 DLLs manually by following the steps:

In Windows, choose the Start menu then All Programs, MVVM Light Toolkit, Binaries (Assemblies). This starts the Windows Explorer in the Binaries folder.
(optional but recommended) Rename GalaSoft.MvvmLight.dll (and the Silverlight version too) to GalaSoft.MvvmLight.bak.
Download the V3 alpha1 binaries.
Extract this file to a local folder.
Copy the WPF version of the assembly in Binaries, and then copy the Silverlight version to Binaries\Silverlight.

What else?

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook| Flickr | LinkedIn

Clean shutdown in Silverlight and WPF applications

Sunday, October 18, 2009 | From MVVM

Update: There was a small error in the Silverlight version of the application. The code used to navigate to a different webpage was wrong (in ApplicationExtensions.cs). I wrote this article in the Austrian mountains and did not have the web to check the code, sorry about that ;) I updated the source code. If you downloaded the source code before the 19th of October, 8AM GMT, you want to load the correct version. Apologies!!

It is often difficult for large applications with multiple, loosely coupled components to cleanly shut down. Once a clean shutdown procedure is established, adding new components can disrupt the whole sequence, and things get ugly fast.

In this article, we will show a way to use a Messenger to create a loosely coupled shutdown sequence, making it easy to add new components if needed. For the sake of the demonstration, we will use the MVVM Light Toolkit Messenger, but of course this can also be realized with other messaging systems.

As a bonus, the sample application will also show how to use the same Messenger class to enable communication between two ViewModels that don’t know each other, making it very easy to refactor the application or to modify the client application (for example by adding new screens, etc…).

CleanShutdown demo from Laurent Bugnion on Vimeo.

What is a clean shutdown sequence?

Easy to request shutdown

To cleanly shut down a system, we need a central point from which the shutdown sequence can be started. This central point (we’ll call it the ShutdownService) should be reachable from any place in the application in an easy way. This way, if we add new components, they can request shut down without the ShutdownService needing any modification.

Possibility to interrupt shutdown

Some components might need a little more time to process important information, to display a “shutdown animation”, to log some information to a web service, etc. Some of these operations might be asynchronous, meaning that the shutdown sequence should be interrupted temporarily. This should be implemented in a way that allows adding new components without the ShutdownService or other components being changed.

Being notified upon shutdown

Some components might need to be notified when shutdown is happening, for example to save important information to the disk. Here too, we need to be able to add new components without changing anything else.

Requesting shutdown

This is quite easy: we simply provide a static method in the ShutdownService class. This method called RequestShutdown can be called by any object in the application. A more sophisticated implementation could include a reason for shutdown, letting the ShutdownService decide if the complete shutdown sequence must be executed, of if it should be ignored (for example, in case of a critical application error, a “catastrophic shutdown”, it could be dangerous or impossible to attempt a clean shutdown. Similarly, we could avoid to use a static method, and instead store an instance of the ShutdownService in an IoC container.

Giving everyone a possibility to interrupt shutdown

The ShutdownService provides a possibility for any object in the application to interrupt shutdown. We use the MVVM Light Toolkit’s Messenger class so that objects can register to be notified when a shutdown sequence starts, and to interrupt it if needed. We will use a NotificationMessageAction<bool>. This message type contains:

A string specifying which operation needs to be initiated. In the case of the shutdown sequence, we will send a string meaning ConfirmShutdown. The recipient of the message can take the opportunity to confirm that shutdown is OK, or to request shutdown to be stopped.
A callback method (of type Action<bool>) that the recipient can call to prevent shutdown from happening. If the recipient calls the callback with true, the shutdown sequence will be interrupted. If it calls the callback with false, (or if it doesn’t call it at all), the shutdown sequence will continue.

Note that the recipient that interrupts shutdown is responsible for requesting shutdown again, after the asynchronous operation has completed. A more elaborate implementation could use a timeout to force shutdown if the asynchronous operation still did not complete after a certain time.

Notifying of imminent shutdown

When shutdown is really happening, a last message will be sent to notify recipients that this time, it’s for real. this gives a unique opportunity to recipients to take last minute measures, such as saving their state to a file, etc. In the sample application, we use a CommandMessage with a string meaning NotifyShutdown. Recipients who subscribed to this message can do what needs to be done.

Let’s see some code

So time to see some code. The source code can be downloaded here. The application can be run in WPF or in Silverlight, and looks like this:

The 3 sliders are used to change the color of the application’s background.
The big X is used to close the application.
On closing, the values of the 3 sliders are saved to a file.
When the application starts, the saved values are read from the file and set.
An animation is played when the application is closed (rotation, scale animation and fade out).

ShutdownService

This class exposes one static method used by other objects to request shutdown. The class is instantiated on startup by the Application object (in App.xaml.cs).

public static void RequestShutdown()
{
    var shouldAbortShutdown = false;

    Messenger.Default.Send(new NotificationMessageAction<bool>(
        Notifications.ConfirmShutdown,
        shouldAbort => shouldAbortShutdown |= shouldAbort));

    if (!shouldAbortShutdown)
    {
        // This time it is for real
        Messenger.Default.Send(new CommandMessage(Notifications.NotifyShutdown));

        Application.Current.Shutdown();
    }
}

We start by setting a local variable to false.

Then we send a message that interested objects can register for. This provides them with a callback that they can call to interrupt shutdown. The callback is implemented as a lambda expression. If at least one recipient replies true, the variable shouldAbortShutdown is set to true.

Finally, if shouldAbortShutdown is false (meaning that noone wants to interrupt), we send another message, this time announcing NotifyShutdown). If anyone registers for this message, they will know that the shutdown is imminent.

The last line shuts down the application.

Playing an animation on shutdown

In our sample application, we want to play an animation when the application is shut down. Animations are asynchronous, so we need to temporarily interrupt the shutdown sequence. To do this, we register for the message type NotificationMessageAction<bool>.

To make it easier to share this code between Silverlight and WPF, we place this code in a class called ShutdownAnimationService. This class is instantiated in the MainWindow (for WPF) or in the Page (for Silverlight).

Note: Some like to see MVVM applications without any code in the code-behind of a View. However, playing animations, showing popups and other functionalities are really the responsibility of the View. There is nothing wrong in placing code in the View, as long as it is View-specific!

Messenger.Default.Register<NotificationMessageAction<bool>>(this, message =>
{
    if (message.Command == Notifications.ConfirmShutdown)
    {
        if (!_shutdownAnimationHasRun)
        {
            var sbd = this.Resources["ShutdownStoryboard"] as Storyboard;
            if (sbd != null)
            {
                message.Execute(true); // true == abort shutdown

                sbd.Completed += ShutdownStoryboardCompleted;
                sbd.Begin();
            }
        }

        // If the animation ran already, no need to reply
        // to the message, allow shutdown.
    }
});

When a message of type NotificationMessageAction<bool> is sent (which is what the ShutdownService does), the lambda expression is executed.

First we check a global variable that tells us if the animation ran already.

If it didn’t run yet, we check if there is a Storyboard named ShutdownStoryboard in the resources. If we don’t find it, we let the shutdown happen (this is just a failsafe in case something went wrong with the Storyboard).

If we do find the storyboard, we execute the callback with true meaning that we interrupt the shutdown sequence.

Finally, we assign a “completed” event to the Storyboard and we start it.

Remember that it is now the responsibility of this object to restart the shutdown sequence! It is done in the completed event of the Storyboard:

void ShutdownStoryboardCompleted(object sender, System.EventArgs e)
{
    _shutdownAnimationHasRun = true;

    // Now that our pre-shutdown task is done
    // we can request shutdown again.
    ShutdownService.RequestShutdown();
}

Note: The animation is defined in the Page.xaml (for Silverlight) and in MainWindow.xaml (for WPF) and not in MainSkin.xaml. While storing the animation in the external resource dictionary would work in WPF, it fails in Silverlight.

Saving settings to a file

The class SettingsViewModel defines three properties (Red, Green and Blue) that are databound to the 3 sliders. In fact, the SettingsViewModel is the DataContext of the half-white panel on the left of the X button.

public SettingsViewModel()
{
    if (!IsInDesignMode)
    {
        Messenger.Default.Register<CommandMessage>(this, m =>
        {
            if (m.Command == Notifications.NotifyShutdown)
            {
                SaveSettings();
            }
        });
        
        _settingsFile = new SettingsFileHandler();

        var savedSettings = _settingsFile.LoadSettings();
        Messenger.Default.Send<Brush, MainViewModel>(
            savedSettings.ApplicationBackgroundBrush);

        _isLoading = true;

        var solidBrush
            = savedSettings.ApplicationBackgroundBrush as SolidColorBrush;
        if (solidBrush != null)
        {
            Red = solidBrush.Color.R;
            Green = solidBrush.Color.G;
            Blue = solidBrush.Color.B;
        }

        _isLoading = false;
    }
}

SettingsViewModel registers to receive messages of type CommandMessage. If the CommandMessage’s content is NotifyShutdown, it means the application is closing, and the object saves its state in a file.

The rest of the constructor is used to load existing settings, and send an initial message to the MainViewModel to set the saved brush as the application background (see the section below titled “Sending messages from a ViewModel to another” for more details).

Finally, we set the sliders to values corresponding to the saved ones.

The saving itself happens in SettingsFileHandler, which is also responsible for loading the settings when the application starts.

In WPF, saving the settings and reading them back is made with the XamlWriter, resp XamlReader. These two classes are very useful to save any CLR object to a XAML file, and to restore it. In this sample, we save to the Temp folder, but a normal implementation would save to the AppData folder.

In Silverlight, we don’t have XamlWriter, so we save to a plain text file in the IsolatedStorage instead, as explained in the section titled “Specific implementation details for Silverlight”.

Requesting shutdown when the button is pressed

The MainViewModel is set as the DataContext of the application’s window (in Silverlight, of the Page), with the exception of the half-white area with the 3 sliders (which is bound to the SettingsViewModel). Clicking the X button executes a RelayCommand defined in the MainViewModel. This command is very simple: It just calls the RequestShutdown method.

ShutdownCommand = new RelayCommand(ShutdownService.RequestShutdown);

Sending messages from a ViewModel to another

Another thing the MainViewModel does it define a bindable property called BackgroundBrush. This property, when updated, automatically sets the background of the application (through databinding). However, how do we know when the user changes the Brush?

In this simple application, we don’t really need two ViewModels. However, it makes sense to have them: If we decided to move the 3 sliders to a popup, for example, or to another window, it would be very easy to do, thanks to the separation of concerns: MainViewModel takes care of the MainWindow, SettingsViewModel takes care of the settings.

This poses a problem however: Since both ViewModels are separated, how can they communicate without being tightly coupled, which we really want to avoid. Well this is another usage for the Messenger: The MainViewModel registers for any message of type Brush:

public MainViewModel()
{
    if (IsInDesignMode)
    {
        BackgroundBrush = new SolidColorBrush(Colors.Orange);
    }
    else
    {
        Messenger.Default.Register<Brush>(
            this, 
            true, 
            m => BackgroundBrush = m);

        ShutdownCommand
            = new RelayCommand(ShutdownService.RequestShutdown);
    }
}

Whenever a message of type Brush is received, we just set the BackgroundBrush to it.

The Messenger class can be used to send any message type, from simple values to complex objects!

Note that we use an overload of the Register application: The second parameter is set to true, indicating that we want to receive all messages of type Brush, and derived types too (SolidColorBrush, LinearGradientBrush, etc…).

If we are in design mode (running in Expression Blend for example), we set the brush to Orange, so that we have something to see (otherwise the window would be transparent).

Finally, we need someone to send updates! This is the SettingsViewModel’s task: When the user moves the sliders, we send a message of type SolidColorBrush, corresponding to the value of the 3 sliders. We do, however, send this message only to MainViewModel, thus avoiding too much unnecessary communication.

private void SendBrushUpdate()
{
    if (_isLoading)
    {
        return;
    }

    Messenger.Default.Send<Brush, MainViewModel>(
      GetCurrentBrush());
}

private Brush GetCurrentBrush()
{
    return new SolidColorBrush(
      Color.FromArgb(255, Red, Green, Blue));
}

Specific implementation details for Silverlight

Most objects in this application are shared between WPF and Silverlight.

Reminder: To share objects, you can right click on a folder, select “Add, Existing Item” from the context menu. Browse to the item you want to share, then instead of clicking on the “Add” button, click on the small arrow within this button, and choose “Add as a Link” from the menu that opens.

Instead of saving the settings to the file system (which is not allowed in Silverlight), we save to the IsolatedStorage. The class SettingsFileHandler is not the same in Silverlight than in WPF, and takes care of this implementation detail.

Similarly, we do not have a XAML Writer in Silverlight, unfortunately. Instead of saving the settings to XAML (which is very easy and convenient), we use an extension of the partial class Settings (available only in the Silverlight version of the application) to serialize to a text format, and to deserialize from it.

Finally, we cannot shut down the application in Silverlight. We can, however, navigate to a different web page. Since the Shutdown() method doesn’t exist in the Application class in Silverlight, we provide an extension method (in the class ApplicationExtensions) with the same name.

These few techniques (partial class with specific Silverlight extensions, extension methods, adding items as link) help to “bridge the gap” between WPF and Silverlight and to write less code while providing similar functionality.

About NotificationMessageAction

This useful message type (allowing to send a notification and providing a callback to the recipient) is not yet part of the MVVM Light Toolkit V2, but will be included in future versions. An implementation is provided as part of the sample application, but is not final yet. Comments or feedback is welcomed!

Source code

The sample application’s source code can be downloaded from my site.

Conclusion

This sample application shows two usages of the Messenger class:

Enable communication between decoupled ViewModels.

Create a clean shutdown sequence that can easily be extended with new objects if necessary.

There are of course many other situations where a Messenger can be useful in an application. I hope to have awaken your interest for this very powerful yet simple to use component. For more information about the Messenger, RelayCommands or other parts of the MVVM Light Toolkit, please refer to the Get Started page.

Laurent Bugnion (GalaSoft)

Subscribe | Twitter | Facebook| Flickr | LinkedIn

MVVM Light Toolkit on Codeplex

Sunday, October 18, 2009 | From MVVM

Responding to a few requests from MVVM Light Toolkit users, I opened a project on Codeplex and published the installer as well as the source code there.

http://mvvmlight.codeplex.com/

Formally, nothing much changes, my site and my blog remain the main location to find information on the toolkit. Being on Codeplex gives the project more visibility, and provides a convenient place for discussions too.

Happy coding!

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook| Flickr | LinkedIn

MVVM Light Toolkit V2: What’s new?

Sunday, October 04, 2009 | From MVVM

I am happy and proud to announce that the MVVM Light Toolkit V2 has been published!

Shortcut: Jump directly to the installation instructions.

Excerpt from the Get Started page:

The main purpose of the toolkit is to accelerate the creation and development of MVVM applications in WPF and Silverlight.

Like other MVVM implementations, the toolkit helps you to separate your View from your Model which creates applications that are cleaner and easier to maintain and extend. It also creates testable applications and allows you to have a much thinner user interface layer (which is more difficult to test automatically).

This toolkit puts a special emphasis on the "blendability" of the created application (i.e. the ability to open and edit the user interface into Expression Blend), including the creation of design-time data to enable the Blend users to "see something" when they work with data controls.

What’s new?

So what is new in V2? Here is a list that should help you adapt your existing applications to the new version.

New Messenger API

The major change in this release is the new and improved Messenger class. The API has been reworked and simplified to make sending and registering for messages a one-liner each. Any type of message can now be sent, from simple values (int, double, string etc…) to complex messages.

The old methods are still available, however they have been marked Obsolete, which will cause warnings to appear in the Output window of Visual Studio when you build an existing application. I encourage you to upgrade to the new API, which should be quite harmless and rewarding.

There is also an IMessenger interface that the Messenger implements, which makes mocking and testing easier.

The new methods are described in an existing blog post, and additional blog posts around this component will follow.

Expression Blend templates

The MVVM Light templates (project templates and item templates) are now installed for Expression Blend 3 too. You can create and run new MVVM Light applications in this fantastic tool. With the help of the Blend source code editor, you can even consider writing simple MVVM applications without using Visual Studio at all (though for more complex applications, this might prove difficult).

More information about creating new applications in Expression Blend can be found in a related article.

Never miss a new version!

I wanted to make a small application to help you check really fast if a new version of the MVVM Light Toolkit is available for download. Simply choose Start / MVVM Light Toolkit / Check Version On Server, et voila. It’s simple and fast (of course, an Internet connection is required ;)) More information about this application is available here. Oh, by the way, this is, of course, an MVVM Light application.

Easier to find in the Start menu

The shortcuts for V1.1 were installed in Start / All Programs / Laurent Bugnion (GalaSoft) / MVVM Light Toolkit. This was not very convenient, and made them more difficult to find than it should be. I changed this, and the shortcuts are now under Start / All Programs / MVVM Light Toolkit.

Note: The V2 installer attempts to delete the shortcut folder “Laurent Bugnion (GalaSoft)”, since it is not needed anymore. Depending on your system’s configuration, this step might be unsuccessful, and you might have to delete this shortcut folder manually.

Minor changes

A few minor changes have been made, that shouldn’t affect the way that the Toolkit works, but make things a bit cleaner:

The method RelayCommand.RaiseCanExecuteChanged(bool) has been marked Obsolete and replaced by RelayCommand.RaiseCanExecuteChanged(). The parameter was not really necessary and has been removed.
In the “Add new project” dialog in Visual Studio, the WPF project template has been moved from “MVVM” to “Windows / MVVM”. It makes more sense to put all the WPF content under the Windows category.
In the project template for WPF, I moved the resource dictionary "Skin.xaml” to a folder named “Skins” and I renamed the file “MainSkin.xaml”.
For consistency, in Silverlight, I also added a “Skins” folder in the project template, and moved all the resources from App.xaml to MainSkin.xaml. Note that this features will not work in Silverlight 2 applications (but hey it’s time to move on, right?).
Cosmetic changes: Quite a few small improvements (“polish”) have been made to make the experience (installing and using the toolkit) more consistent and clean.

Bugs corrections

There were a few issues with V1.1 that have been corrected in V2:

A scenario I had not envisioned was causing issues: When a recipient would receive a message, and in the method handling that message would register another recipient for the same message type, an Exception occurred. This bug has been corrected and unit tests added to verify this behavior.
Thanks to Laurent Kempé for finding this one and helping me solve it, and to Innoveo for giving him some time to do this.
The property ViewModelBase.IsInDesignMode was returning false all the time when the assembly was compiled in Release mode. The value is now correct in Debug and Release modes.
(Silverlight only) When a RelayCommand was bound to a control, the control was not disabled properly if the command’s CanExecute method was returning false before it was bound.
Props go to Corrado Cavalli for finding this bug.
The manual step that was required when creating a new Silverlight MVVM Light application is not required anymore. I modified the project template to take care of this.

Conclusion

With these changes, the MVVM Light Toolkit should be easier to use, which is my main goal and the motivation that drives me.

In next releases, new components will be added to make MVVM application development more fun and enjoyable. I am very careful when I add a new component to the toolkit to keep it “light”. The MVVM Light Toolkit is not a “solution to all the problems”, and never will be. It does, however, make it quite easy to start creating clean applications in Silverlight and Windows Presentation Foundation. Its stated goals (improving the blendability of applications, making them easier to test, separation of concerns, avoiding “component overload”) are, I hope, respected. I encourage you to give me feedback (many already did, and I am grateful for that) and new ideas.

Laurent Bugnion (GalaSoft)
Subscribe | Twitter | Facebook| Flickr | LinkedIn

MVVM Light Toolkit Messenger V2 beta

Sunday, September 27, 2009 | From MVVM

Update: MVVM Light Toolkit V2 has been released. Please use the new installer to upgrade your installation.

Ever since I released V1.1 of the MVVM Light Toolkit, I have received wonderful and constructive feedback from users. Most of it is flowing into V2, which is almost ready (I am still fighting a little with MSI installers and project/item templates for one feature I am particularly happy about, which is making project templates and item templates available in Expression Blend. That’s right, with V2 you can start Blend, and choose “File / New Project / MVVM Light”, then press F5 to have an application running.

IMHO the most interesting and innovative change in the toolkit is the new Messenger. In V1.1, quite a lot of plumbing as involved to register for messages, and to send messages. You had to implement IMessageRecipient to get messages, and all messages had to inherit the MessageBase class. Let’s face it, this was a bad idea. Thankfully, Glenn Block (of MEF and Prism fame) called me on that, and suggested a much, much cleaner implementation: Get rid of IMessageRecipient and use Actions instead to register for messages. Get rid of MessageBase and allow me to send anything through the Messenger.

The new API

This immediately appealed to me (and to some of my users whom I talked to) and I propose to you the Messenger V2. It implements the IMessenger interface, which should make mocking and testing easier. The interface looks like this:

/// <summary>
/// Registers a recipient for a type of message TMessage. The <see cref="action" />
/// parameter will be executed when a corresponding message is sent.
/// <para>Registering a recipient does not create a hard reference to it,
/// so if this recipient is deleted, no memory leak is caused.</para>
/// </summary>
/// <typeparam name="TMessage">The type of message that the recipient registers
/// for.</typeparam>
/// <param name="recipient">The recipient that will receive the messages.</param>
/// <param name="action">The action that will be executed when a message
/// of type TMessage is sent.</param>
void Register<TMessage>(object recipient, Action<TMessage> action);

/// <summary>
/// Registers a recipient for a type of message TMessage.
/// The <see cref="action" /> parameter will be executed when a corresponding 
/// message is sent. See the <see cref="receiveDerivedMessagesToo" /> parameter
/// for details on how messages deriving from TMessage (or, if TMessage is an interface,
/// messages implementing TMessage) can be received too.
/// <para>Registering a recipient does not create a hard reference to it,
/// so if this recipient is deleted, no memory leak is caused.</para>
/// </summary>
/// <typeparam name="TMessage">The type of message that the recipient registers
/// for.</typeparam>
/// <param name="recipient">The recipient that will receive the messages.</param>
/// <param name="receiveDerivedMessagesToo">If true, message types deriving from
/// TMessage will also be transmitted to the recipient. For example, if a SendOrderMessage
/// and an ExecuteOrderMessage derive from OrderMessage, registering for OrderMessage
/// and setting receiveDerivedMessagesToo to true will send SendOrderMessage
/// and ExecuteOrderMessage to the recipient that registered.
/// <para>Also, if TMessage is an interface, message types implementing TMessage will also be
/// transmitted to the recipient. For example, if a SendOrderMessage
/// and an ExecuteOrderMessage implement IOrderMessage, registering for IOrderMessage
/// and setting receiveDerivedMessagesToo to true will send SendOrderMessage
/// and ExecuteOrderMessage to the recipient that registered.</para>
/// </param>
/// <param name="action">The action that will be executed when a message
/// of type TMessage is sent.</param>
void Register<TMessage>(object recipient, bool receiveDerivedMessagesToo, Action<TMessage> action);

/// <summary>
/// Sends a message to registered recipients. The message will
/// reach all recipients that registered for this message type
/// using one of the Register methods.
/// </summary>
/// <typeparam name="TMessage">The type of message that will be sent.</typeparam>
/// <param name="message">The message to send to registered recipients.</param>
void Send<TMessage>(TMessage message);

/// <summary>
/// Sends a message to registered recipients. The message will
/// reach only recipients that registered for this message type
/// using one of the Register methods, and that are
/// of the targetType.
/// </summary>
/// <typeparam name="TMessage">The type of message that will be sent.</typeparam>
/// <typeparam name="TTarget">The type of recipients that will receive
/// the message. The message won't be sent to recipients of another type.</typeparam>
/// <param name="message">The message to send to registered recipients.</param>
void Send<TMessage, TTarget>(TMessage message);

/// <summary>
/// Unregisters a messager recipient completely. After this method
/// is executed, the recipient will not receive any messages anymore.
/// </summary>
/// <param name="recipient">The recipient that must be unregistered.</param>
void Unregister(object recipient);

/// <summary>
/// Unregisters a message recipient for a given type of messages only. 
/// After this method is executed, the recipient will not receive messages
/// of type TMessage anymore, but will still receive other message types (if it
/// registered for them previously).
/// </summary>
/// <typeparam name="TMessage">The type of messages that the recipient wants
/// to unregister from.</typeparam>
/// <param name="recipient">The recipient that must be unregistered.</param>
void Unregister<TMessage>(object recipient);

/// <summary>
/// Unregisters a message recipient for a given type of messages and for
/// a given action. Other message types will still be transmitted to the
/// recipient (if it registered for them previously). Other actions that have
/// been registered for the message type TMessage and for the given recipient (if
/// available) will also remain available.
/// </summary>
/// <typeparam name="TMessage">The type of messages that the recipient wants
/// to unregister from.</typeparam>
/// <param name="recipient">The recipient that must be unregistered.</param>
/// <param name="action">The action that must be unregistered for
/// the recipient and for the message type TMessage.</param>
void Unregister<TMessage>(object recipient, Action<TMessage> action);

No Memory Leaks

One neat thing with the Messenger (already in V1 and of course also in V2) is that the objects are referenced using WeakReferences. Even though I recommend to unregister explicitly when you want to delete the message recipient, if you omit to do so, you won’t cause a memory leak, because the Messenger does not keep a hard reference to the recipient.

Backwards compatibility

All V1 methods are still available, but marked as Obsolete. This allows a smooth evolution of existing projects to the new syntax. When you build existing projects with the new toolkit, you will get warnings with a suggestion to move to the new syntax.

The MessageBase class and the deriving message types (GenericMessage, CommandMessage, CommandMessageGeneric, DialogMessage, PropertyChangedMessage) are still available as suggestions for the payload (i.e. you can use them if you like, but you can also build your own messages, or send anything you want (objects, simple value types, etc…). It is perfectly legal to do:

// Somewhere
Messenger.Default.Register<string>(this, DoSomething);

// Further
private void DoSomething(string message)
{
    // ...
}

// Somewhere else
Messenger.Default.Send(“Hello world”);

Default Messenger, mocking, testing, IoC

Note that like in V1, you can either use the default Messenger (Messenger.Default) or create your own messengers, for example to create specialized channels of communication. Since the IMessenger interface is now available, you can easily mock, test, use IoC containers, etc…

The Messenger V2 as well as the rest of the toolkit will be available in a few days, and I will also prepare sample applications to demonstrate the use more in-depth.

Laurent Bugnion (GalaSoft)

Subscribe | Twitter | Facebook| Flickr | LinkedIn

Using RelayCommands in Silverlight and WPF

Saturday, September 26, 2009 | From MVVM

Like most of us have found out the hard way, Silverlight 3 and Windows Presentation Foundation 3.5 are two quite similar beasts, but not totally the same. Silverlight is often presented as a subset of WPF (in fact, some features are available in Silverlight but not yet in WPF; generally speaking, though, it is true that Silverlight has less features than its big sister WPF) (yeah WPF is a girl, don’t tell me you didn’t know ;))

No Commands in Silverlight

One of the missing parts is Commanding. Commands in WPF are used as a kind of “weak events”, i.e. they can be used to execute an action when a control is actuated (just like an event), but without the tight coupling that an event brings with it. You can specify a Command on an object, and bind this command to a control in a completely different part of your application. You can have one person write the Command (typically a developer), and a completely other person (typically a designer) use the Command in the user interface. More interestingly, the designer can change the look and feel, for example replacing a series of Buttons by a Menu and MenuItems, and the developer doesn’t need to change anything to the code.

In Silverlight, parts of the “plumbing” are available already (the ICommand interface) but most of it is missing. This led some very clever people to implement Commands in Silverlight, to replace the missing pieces by a custom implementation. In Prism, the command implementation is called DelegateCommand. In my MVVM Light Toolkit, I use a command that my good friend, colleague at IdentityMine and fellow WPF Disciple Josh Smith created, called the RelayCommand.

Now, the beautiful part is that RelayCommands (and DelegateCommands too) work wonders in Silverlight, but also in WPF. RelayCommands are making your life much easier in WPF too. No need to implement complicated code to bind the control to your method, just use a RelayCommand to do that. And since the implementation is (almost) the same in Silverlight too, you can share code between Silverlight and WPF.

The Execute Method

When the control to which a Command is bound is actuated by the user, the Execute method is called. This method is specified by the ICommand interface, and every ICommand implementation must offer it (and of course RelayCommand does).

The Execute method is passed to the RelayCommand’s constructor in form of an Action (or Action<T> if the command has a parameter, in which case you must use the RelayCommand<T> class).

Note: An Action is a method (returning void) that can be passed to another object, for example as a parameter. It is something like a method pointer. If the method that the Action represents has a parameter, you must use Action<T> where T is the parameter’s type. There are also additional Action implementations with more than one parameters, but RelayCommand can only have 0 or 1 parameter.

The code to create a RelayCommand is:

public RelayCommand MyCommand
{
    get;
    private set;
}

public MainViewModel()
{
    MyCommand = new RelayCommand(
        () => DoSomething());
}

Note: The syntax () => DoSomething() is called a lambda expression, and is the shortest way to define and pass an Action to an object. In the sample here, the method DoSomething will be called without any parameter when the Command is executed.

CanExecute and CanExecuteChanged

Apart from the Execute method that the ICommand interface specifies, there is an additional method and an event that every ICommand (including, of course, RelayCommand) must offer.

CanExecute: This method should return true if the command can be executed. When the Command is used on a control, the control will be disabled automatically when CanExecute returns false.

CanExecuteChanged: This event should be raised when the CanExecute method must be “requeried” (when the value of CanExecute might have changed, and should be re-evaluated).

The CanExecute method can be passed to the RelayCommand constructor as a Func<bool> (or a Func<T, bool> if the command has a parameter).

Note: A Func is exactly like an Action, except that it has a return type. In the case of RelayCommands, the return type is bool: True if the command can be executed, false otherwise.

To create a command with an Execute and a CanExecute methods, you can do:

public RelayCommand MyCommand
{
    get;
    private set;
}

public MainViewModel()
{
    MyCommand = new RelayCommand(
        () => DoSomething(),
        () => return MyValue);
}

In the code above, if MyValue is true, the command can be executed; if it is false, the command cannot be executed (and controls using that command are disabled). This can depend on multiple parameters such as the state of the application, the time of the day, the weather outside, etc.

Note: When using lambda expressions, if the expression is just “return something”, the “return” keyword can be omitted. So the code becomes:

public RelayCommand MyCommand
{
    get;
    private set;
}

public MainViewModel()
{
    MyCommand = new RelayCommand(
        () => DoSomething(),
        () => MyValue);
}

The CommandManager

RelayCommands are available for WPF and Silverlight. However, one piece is missing in Silverlight: Windows Presentation Foundation has a class that is watching your UI, and that polls the commands’ state when something happens (for example when the user clicks a button, checks a checkbox, open a menu, etc…). This class is called the CommandManager and it doesn’t exist in Silverlight. Not at all. Nada.

So when a user actions the UI in WPF, this triggers the CommandManager to requery all the commands. In Silverlight you have to do the work yourself. This is why the RelayCommand class has a method called RaiseCanExecuteChanged. This method forces the control that uses the command to check again if the command may be executed or not. And if the command may not be executed, the control is disabled.

In WPF

Strictly speaking, in WPF, and if your command is bound to a control that is watched by the CommandManager, you shouldn’t have to raise the CanExecuteChanged event yourself. You can let the CommandManager handle the situation. That said, external events might also change the state of the UI. Let’s imagine that the UI should be enabled from 9AM to 5PM, and then disabled for the night. The user is not triggering the UI, so the code should request (politely) that the CommandManager requeries the state of the commands. This is done by calling the method InvalidateRequerySuggested on the CommandManager. And as you guessed, the method RaiseCanExecuteChanged of the RelayCommand class does just that.

And in Silverlight

However, since Silverlight doesn’t have the CommandManager, a little more manual work is involved. When the state of your object changes in a way that affects the UI, you must RaiseCanExecuteChanged on the corresponding commands. In Silverlight, this will raise the CanExecuteChanged event, thus forcing the bound controls to call CanExecute. In WPF, like we just saw, this will call InvalidateRequerySuggested on the CommandManager.

Show me the code

I created a small demo to illustrate this in Silverlight and in WPF, using the MVVM Light Toolkit. Most of the code is shared between WPF and Silverlight. The source code for the application is available as usual (WPF 3.5 SP1 and Silverlight 3).

The demo exposes one command, created in the MainViewModel class:

public RelayCommand IncreaseCounterCommand
{
    get;
    private set;
}

public MainViewModel()
{
    IncreaseCounterCommand = new RelayCommand(
        () => Counter++,
        () => CanIncrement);
}

The Counter and CanIncrement properties are raising the PropertyChanged event when they are modified, thus data bindings that refer to these two properties will be updated whenever the properties are modified. What the code above means is: When the IncreaseCounterCommand is executed, check the CanIncrement property. If it is true, increment the Counter property.

Figure 1: WPF demo application, Enabled and Disabled

Disabling the button

We have a manual way to enable/disable the “increment” button: If you click on the “Enabled” text, it will turn into “Disabled”. This text (it’s a ToggleButton) is bound to the CanIncrement property directly. So in fact, when the text is “Disabled”, the CanIncrement property is set to false.

Of course, we want the controls using this command to be automatically disabled/enabled when the CanIncrement property changed. In WPF, nothing needs to be done, because the CommandManager will automatically requery the state of the commands when the user clicks on the UI. In fact the state of the commands is requeried very, very often during the course of the application. Even just moving the mouse on the UI causes the CommandManager to requery the state of commands bound to visible UI element.

In Silverlight however, no CommandManager, so we need to raise the CanExecuteChanged event on the command manually. Note that raising the CanExecuteChanged event can be useful in WPF too if you change the CanIncrement property in the code, for example through a timer. So, in fact, we will just call IncreaseCounterCommand.RaiseCanExecuteChanged() in Silverlight and in WPF too when CanIncrement changes:

public bool CanIncrement
{
    get
    {
        return _canIncrement;
    }

    set
    {
        if (_canIncrement == value)
        {
            return;
        }

        _canIncrement = value;

        // Update bindings, no broadcast
        RaisePropertyChanged(CanIncrementPropertyName);

        IncreaseCounterCommand.RaiseCanExecuteChanged();
    }
}

Just a warning: In V1 of the MVVM Light Toolkit, the method RaiseCanExecuteChanged was taking a boolean parameter. This boolean was actually not very useful, and has been removed in V2. Calling the old method still works in V2, but the parameter has no effect, and the method has been marked Obsolete. It will be removed in a future version of the toolkit.

This sample uses V2 beta of the MVVM Light Toolkit.

Silverlight/WPF Compatibility

Much of the code is shared between Silverlight and WPF in this small demo.

The ViewModel code is completely shared. The source code files are physically into the WPF project, and added as links into the Silverlight project. Implement once, compile twice.

To add a source code file as a link, choose “Add existing item” in Visual Studio. Then, select a file. Instead of clicking on Add, click on the arrow on the right of the Add button, and select “Add as a link”.

The resources defining the look&feel of the application are placed into the file Skins\MainSkin.xaml. The code n this file is 100% the same in WPF and in Silverlight. To reuse the Silverlight control templates in WPF too, I use the WPF Toolkit’s implementation of the Visual State Manager.

Finally, the XAML code in the main UI element (MainWindow.xaml in WPF, and Page.xaml in Silverlight) is almost the same, except for one little difference: Since Silverlight doesn’t support commands out of the box, we rely on an attached behaviour to bind the RelayCommand to the Button:

<Button cmd:ButtonBaseExtensions.Command="{Binding IncreaseCounterCommand}"
        Grid.Row="2"
        Style="{StaticResource IncrementButtonStyle}"
        Content="Increment" />

Conclusion

Commands in WPF are quite a complex topic, and I must admit that I didn’t completely understand them before I discovered the RelayCommand class. I totally fell in love with this fantastic helper. Josh Smith has been fantastic in allowing me to re-use his code in the MVVM Light Toolkit. I hope that this article will help you understand the power and convenience of RelayCommands. Happy coding!

Laurent Bugnion (GalaSoft)

Subscribe | Twitter | Facebook| Flickr | LinkedIn

New articles about the MVVM Light Toolkit V1.1.1

Wednesday, September 09, 2009 | From MVVM

To help you get started with the MVVM Light Toolkit V1.1.1, I published two new articles:

Creating a new MVVM Light application in Visual Studio
This article will show you how to use Visual Studio to create a brand new MVVM Light application in Windows Presentation Foundation and in Silverlight.
Understanding the MVVM Light application sample
When you create a new MVVM Light application, the application can be run and serves as a sample. This post helps you to understand the various components and layers in the MVVM Light application, and how they interact together.

Of course, before you read these two articles, you should probably check the Get Started page and the Installation instructions.

Happy coding!

MVVM Light Toolkit V1.1.1: What’s new?

Sunday, September 06, 2009 | From MVVM

The new version of the MVVM Light Toolkit was just posted. So what is new? Well, to be honest not much.

The biggest change is the new installer. It is now a standalone MSI installer, because some of you reported some issues with the previous ClickOnce based setup. I personally liked the ClickOnce setup (and I got a few good comments about it), but of course a standalone, offline installer is more versatile, so be it :)
The following shortcuts are created in Start / All programs / Laurent Bugnion (GalaSoft) / MVVM Light Toolkit:
- A shortcut to the locally installed source code.
- A shortcut to the locally installed binaries (DLLs).
- A shortcut to the Get Started web page online.
You can change the paths of the files and the installation type (WPF, SL or both) by executing the MVVM Light Toolkit setup and choosing the “repair” option. This is useful if you change the settings of Visual Studio for some reason.
Corrected a bug in the ViewModelBase.IsInDesignMode property. This property returns true when the code (XAML or C#) is executed inside a design tool such as Expression Blend or Visual Studio. The bug and the solution are exposed in a previous blog post.
The ViewModelBase class implements IDisposable now. This is a scenario that occurs very often so it makes sense to make it the default. View Models can override the Dispose(bool) method if needed to clean up their resources.
Added two snippets for WPF and two for Silverlight. These new snippets create an attached property or a dependency property using a constant as the property name. This makes it easier to handle the name and to avoid “magic strings”.
- mvvmpropa creates an attached property for WPF.
- mvvmpropdp creates a dependency property for WPF.
- mvvmslpropa creates an attached property for Silverlight.
- mvvmslpropdp creates a dependency property for Silverlight.
Changed a few implementation details in the Project Template to make the creation and deletion of View Models cleaner.

That’s all for now. From today I will be working on the next version with a few interesting features added to the toolkit, and a few changes in the interface to make it even easier to use the MVVM Light Toolkit and create your MVVM applications in WPF and in Silverlight!

Installing the MVVM Light Toolkit

Sunday, September 06, 2009 | From MVVM

I just published a new version of the MVVM Light Toolkit. For more information about the toolkit in general, please refer to the Get Started page on my website. Also, more blog posts will follow soon and help you get started with the MVVM Light Toolkit, and also help you understanding how you can use it to solve various issues related to the development of View Model based applications in Windows Presentation Foundation and in Silverlight.

The installation procedure is explained in details on my website. Have fun!!

Detecting design time mode in WPF and Silverlight

Saturday, September 05, 2009 | From MVVM

We already talked often about providing design time data to your designers in Windows Presentation Foundation and in Silverlight, thus enabling them to work visually in design editors such as Expression Blend or the Visual Studio designer (codenamed Cider).

The goal here is very simple: Designers should see something on their design surface. This sounds simple, but it can get quite tricky. Since Blend and Cider run (parts of) your application’s code to render the WPF or Silverlight elements, you need to make sure that the whole code can be executed safely. For some simple operations, it is not a problem (for example, getting today’s date and time is something that Blend and Cider can do easily) but others are more difficult. Here are two examples off the top of my head:

Connecting to a database to get data: Since the code that runs in Blend or Cider is executed in a different context than in the real application, this kind of code will fail in Blend/Cider and should be replaced by something else.
Getting data from the internet: Here too, most attempts to connect to the internet from Blend/Cider will fail. In the best case you will still see your data controls, but they will be empty. In the worst case you might even get an exception in Blend, which will hide everything on the design surface.

Detecting this kind of issues requires a bit of experience, and to be very systematic. Thankfully you can easily attach a debugger to Expression Blend and execute the code from your application that Blend is running (how else did you think I found out how Blend works and developed my MVVM Light Toolkit? ;)) Attaching the debugger to Blend will be the topic for a next article.

Isolating/Replacing the code

Once you detected the offending lines in your code (and if you do WPF and Silverlight right, this will probably be within your View Model classes), you should provide something else to Blend/Cider to execute. But how can you make sure that you are executing this code in a design time editor and not at runtime?

In fact this is a bit tricky. The problem is that there are a few, very different scenarios that need to be supported:

Running environment	IsInDesignMode
WPF element within Expression Blend	True
Silverlight element within Expression Blend	True
WPF element within Cider	True
Silverlight element within Cider	N/A (no Silverlight designer in Visual Studio for now)
WPF application (runtime)	False
Silverlight application (runtime)	False
WPF user control embedded in a Windows Forms application (runtime)	False
WPF user control embedded in a Windows Forms application within Blend	N/A (Blend can open, but not render Windows Forms applications)
WPF user control embedded in a Windows Forms application within Cider	True

Yeah, I am pretty sure that many of you guys forgot that WPF user controls can be embedded in a Windows Forms application. I am guilty of not having tested this particular case in my MVVM Light Toolkit, and the IsInDesignMode property will return true even when the WinForms application is running, forcing the WPF user control to use design time data. Not good (this particular bug is corrected already and will be published in the next few days with V1.1.1 of the MVVM Light Toolkit).

Providing the IsInDesignMode property

I spent a bit of time talking to friends and checking the web, trying to find a unified code that would work in all situations. As much as I can, I try to get the exact same code to run in WPF and in Silverlight (most of the MVVM toolkit’s code is actually shared between WPF and SL), but in that particular case, nothing seemed to work reliably in both environments. So my solution is:

private static bool? _isInDesignMode;

/// <summary>
/// Gets a value indicating whether the control is in design mode (running in Blend
/// or Visual Studio).
/// </summary>
public static bool IsInDesignModeStatic
{
    get
    {
        if (!_isInDesignMode.HasValue)
        {
#if SILVERLIGHT
            _isInDesignMode = DesignerProperties.IsInDesignTool;
#else
            var prop = DesignerProperties.IsInDesignModeProperty;
            _isInDesignMode
                = (bool)DependencyPropertyDescriptor
                .FromProperty(prop, typeof(FrameworkElement))
                .Metadata.DefaultValue;
#endif
        }

        return _isInDesignMode.Value;
    }
}

Known issues

There is one known issue with this code though: When you open the WinForms designer with the embedded WPF user control in Cider, the code returns false, and thus the runtime mode data is used. This might be a problem because runtime data can crash the designer and nothing will be rendered. After turning the problem in my head a few nights, I decided that this would just be a documented bug. If you are in the situation where you must absolutely use the Windows Forms designer in Cider, and you have an embedded WPF user control in your window, and the designer crashes, I recommend commenting out the code that causes the crash, designing your WinForms window, and then restoring the code. This is annoying, granted, but I don’t have a better solution right now. If anyone knows a way around this problem, please feel free to leave a comment!!

Usage

This property is used over and over again as soon as you do development in Blend. It makes sense to expose it in a way that makes it easy to use.

In my MVVM Light Toolkit, the property is a static property of the ViewModelBase class. This makes it very easy to use in the source code. However, binding to a static property is a bit cumbersome in WPF and impossible in Silverlight. So I also provide a non static property, that is just a wrapper around the static one. The full code is found below. Using the property becomes:

In XAML:

<Window x:Class="MvvmLight6.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Height="400"
        Width="300"
        DataContext="{Binding Main, Source={StaticResource Locator}}">
    
    <Window.Resources>
        <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
    </Window.Resources>

    <Grid>
        <TextBlock Text="Design mode only!!"
            Visibility="{Binding IsInDesignMode, 
                Converter={StaticResource BooleanToVisibilityConverter}}" />
    </Grid>
</Window>

In C# (within the View Model)

public MainViewModel()
{
    if (IsInDesignMode)
    {
        // Code runs in Blend -->
        // create design time data.
    }
    else
    {
        // Code runs in runtime -->
        // Connect to DB, services, etc...
    }
}

In C# (outside of the View Model)

public MainWindow()
{
    this.InitializeComponent();

    if (!ViewModelBase.IsInDesignModeStatic)
    {
        this.Closing += (s, e) => ViewModelLocator.Dispose();
    }
}

The full code

The whole property, including static and non-static accessor is:

private static bool? _isInDesignMode;

/// <summary>
/// Gets a value indicating whether the control is in design mode (running in Blend
/// or Visual Studio).
/// </summary>
public static bool IsInDesignModeStatic
{
    get
    {
        if (!_isInDesignMode.HasValue)
        {
#if SILVERLIGHT
            _isInDesignMode = DesignerProperties.IsInDesignTool;
#else
            var prop = DesignerProperties.IsInDesignModeProperty;
            _isInDesignMode
                = (bool)DependencyPropertyDescriptor
                .FromProperty(prop, typeof(FrameworkElement))
                .Metadata.DefaultValue;
#endif
        }

        return _isInDesignMode.Value;
    }
}

/// <summary>
/// Gets a value indicating whether the control is in design mode (running under Blend
/// or Visual Studio).
/// </summary>
[SuppressMessage(
    "Microsoft.Performance",
    "CA1822:MarkMembersAsStatic",
    Justification = "Non static member needed for data binding")]
public bool IsInDesignMode
{
    get
    {
        return IsInDesignModeStatic;
    }
}

MVVM News Feed