Applying MVVM to your LightSwitch shell sample: the LightSwitch way

Alright, another weekend, time to spend some time messing around with LightSwitch.

My first post this weekend, is about… Well you read the title: upgrade the shell sample we used in our first post, to use the Model – View – Viewmodel pattern.  Not that extremely hard: just instantiate any class that serves as the viewmodel, and bind it as the datacontext to your ShellSample.xaml class.

But of course, LightSwitch has his own interface called IShellViewModel, it’s in the Microsoft.LightSwitch.Runtime.Shell.ViewModels namespace, so that must mean they’ve got a plan, a “LightSwitch way” to implement MVVM on your shell, and here it is:

Add your ViewModel class anywhere in your project:

using Microsoft.LightSwitch.Runtime.Shell.ViewModels;
using System.ComponentModel.Composition;
namespace ShellExtension.Presentation.Shells
{
    [ShellViewModel("ShellSample.ShellViewModel")]
    [Export(typeof(IShellViewModel))]
    public class ShellSampleViewModel : IShellViewModel
    {
        public string Name
        {
            get { return "Totally useless property"; }
        }

        public string CompanyName
        {
            get
            {
                return "Contoso";
            }
        }
    }
}

Make sure your ViewModel implements the LightSwitch framework’s ISHellViewModel.  Also add two attributes, the latter to export it (make it available to the LightSwitch framework) as an IShellViewModel, the former to add MetaData to that export.  This MetaData is really important, you can pick whatever name you want (I chose “ShellSample.ShellViewModel”).

Now, I’ve tried all sorts of stuff to get this ViewModel to bind to my View automagically, but to no avail.  However, LightSwitch does have a trick up its sleeves that requires just one extra line of coding.  Go to your ShellSample.xaml, and in the declaration of your element, add the ShellHelpers namespace if it’s not already in there, and bind the MetaData String you picked before to the dependency property “ComponentViewModelService.ViewModelName”.

<UserControl x:Class="ShellExtension.Presentation.Shells.ShellSample"
    /* other namespace imports */
    xmlns:ShellHelpers="clr-namespace:Microsoft.LightSwitch.Runtime.Shell.Helpers;assembly=Microsoft.LightSwitch.Client"
    ShellHelpers:ComponentViewModelService.ViewModelName="ShellSample.ShellViewModel">

That’s all there is too it!

To prove it works, add an additional TextBlock or something in your ShellSample.xaml, and bind to a property on the ViewModel:

<TextBlock Grid.Column="0" Text="{Binding CompanyName}"
  Style="{StaticResource TextBlockFontsStyle}"
  Foreground="{StaticResource NormalFontBrush}"/>

And look mon!

Shell - closeup

Next up, a word to the wise about Themes…