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!
Next up, a word to the wise about Themes…
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
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
Hey Adam! I’m halfway through the sample (images appear on the menus, but not on the tabs yet). Stay tuned!
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.
Pingback: Creating a very dynamic LightSwitch shell extension in 15 minutes or less… « Jan Van der Haegen's blog
Hi it’s me, I am also visiting this site daily, this web page is really nice and the users are truly sharing nice thoughts.
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.
Thank you for sharing your thoughts. I truly appreciate your efforts
and I am waiting for your further write ups thank you once again.