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 with an export - closeup

Shell - closeup

Next up, a word to the wise about Themes…

Advertisements

9 thoughts on “Applying MVVM to your LightSwitch shell sample: the LightSwitch way

  1. Thanks foe this. So we could add some images to the shell this way? I’ll have to have a play around, I’m really looking for a way to add icons to all the menu items in a shell, any ideas?

    Great blog by the way.

    • Hey Adam! Thanks for your kind words!

      When you create a custom shell, you can make images appear all over. You do not need the MVVM way described above (you can do the magic in code behind), but MVVM really is a maintainable design pattern and I would still highly recommend it.

      If I find some time somewhere this week, I’ll try to prepare a little sample for a custom shell extension that would add icons to all of the menu items.

      Kind regards

      Jan

  2. Jan that would be fantastic if you could, and a first, as I’ve spend a while searching and nobody else has done it from what I can find. I’ve been putting off getting my hands dirty with the real code.

    Images on the menus, and if you could get the images to appear on the ‘tabs’ per screen as well, even better, would finish off the look of even a standard shell.

    thanks

  3. That’s great news. Really looking forward to it. It’s amazing what a few images here and there can do for an application, making it look much more friendly.

  4. Pingback: Creating a very dynamic LightSwitch shell extension in 15 minutes or less… « Jan Van der Haegen's blog

  5. When you factor all of these into the cost of your car insurance, you should
    realize that you have to be careful when shopping around for
    your coverage. In addition, because bumpers are now an elegant part of a car.

    Insurance companies try and communicate with both the parents and the child about
    driving rules.

Leave a Reply

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

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s