Adding control styles to your LightSwitch theme extension (Part1: introduction).

As promised, I’m going to start this weekend off by writing a little post about theme extensions.  This first part is just an introduction where we create a theme extension that styles one extra control, and I plan on writing more posts in this series later this week…

The theme extension, in my honest opinion, is the most underestimated (and: under documented) extension in LightSwitch.  When you follow the walkthrough on MSDN on how to create your own theme extension, you end up with an extension that contains a whole bunch of brushes, some font families, …  Let’s be honest, the fun factor of playing around with it, trying to find your own color scheme for your application, is quite low.

Why is it, when follow the MSDN walktrough and apply my theme, that I get the feeling I’m just looking at my application with (multi-) color tinted sunglasses,  but when I apply the Metro theme, things start looking clean and modern?  The answer, obviously, is because the Metro theme has included control styles ( and templates), whereas the style from the walkthrough, does not.

(Although in all fairness, the walkthrough on MSDN does link to a page about Control Elements for LS Themes, which is just as good as having no documentation at all.)

Prerequisites to follow the sample:

1. Follow the walkthrough on MSDN  and create your own theme, I named mine ThemeWithControlTemplates.  (I’m a developer, not a poet.)
2. Create a test project and set it up for easy modifying and debugging on the extension you made.

What the solution looks like to start.

Run your test application, enter a lot of data, so that your application looks like this:

Test application. (Note to self: take better care of your fish!)

You can see I have intentionally resized my application so that the scrollbar is visible.  Lets go ahead now and give that scrollbar a new style.

Add an IThemeExtension to your theme extension.

Wait?!?

Whot?

At least, that was the reaction I had when I noticed the Microsoft.LightSwitch.Theming namespace not only has an “ITheme” interface, but also an “IThemeExtension”.  Quick facts about the two:

• ITheme is an interface that has a property which exposes the URI to the resource dictionary with your “ColorAndFontScheme”.
• IThemeExtension is an interface that has a property which exposes the URIs (plural, if needed) with your “ControlStyleResources”.
• A LightSwitch Theme extension can hold both ITheme implementation(s) and IThemeExtension implementation(s).
• A LightSwitch application will first load the default “ColorAndFontScheme”, next it will load the “ColorAndFontScheme” from your ITheme implementation.  Next up, it loads the default “ControlStyleResources”, followed by your “ControlStyleResources”.

Lets go ahead and add such an IThemeExtension to our project.  In the same “Presentation/Themes” folder in the “ThemeExtensionWithControlTemplates”, add a new class and call it ThemeExtensionWithControlTemplates.

using System;
using System.ComponentModel.Composition;
using Microsoft.LightSwitch.Theming;

namespace ThemeWithControlTemplates.Presentation.Themes
{
    [Export(typeof(IThemeExtension))]
    [ThemeExtension(ThemeWithControlTemplates.ThemeId)]
    public class ThemeExtensionWithControlTemplates : IThemeExtension
    {  

        public System.Collections.Generic.IEnumerable<Uri>
            GetControlStyleResources(string themeId, string themeVersion,
            System.Collections.Generic.IEnumerable<Microsoft.LightSwitch.Model.IModuleDefinition> modules)
        {
            yield return
                new Uri(@"/ThemeWithControlTemplates.Client;component/Presentation/Themes/ThemeExtensionWithControlTemplates.xaml"
                    , UriKind.Relative);
        }
    }
}

Don’t forget to export it (using the Export attribute) so that the LightSwitch runtime will pick up your class.  You should also add the ThemeExtension attribute, with the same id as you used in your ThemeExtensionWithControlTemplates class.

Next up, also add a new ResourceDictionary to that folder, the URI already shows I named mine “ThemeExtensionWithControlTemplates.xaml”:

Solution - added the ThemeExtension and required ResourceDictionary.

The ResourceDictionary we have added is a normal resource dictionary, and we can add implicit styles to it.  For my example, I took the scrollviewer and scrollbar style from Alan Beasly’s amazing article on codeproject. (Hey, I’m developer, not a designer.)

ResourceDictionary - code is collapsed but unchanged from the article at Codeproject.com

The styles are unchanged except for the color brushes used.

You can also see I have added an implicit style for both ScrollBar and ScrollViewer, setting Alan’s MVVMScrollBarStyle and ScrollViewerStyleMVVM as the default styles to use for the ScrollBar and ScrollViewer.

Compile the application, and see the difference.

Application with new scrollbar style - one small step for man, one giant step for little developer.

You can now use the sample we made, to further style your entire application.  I’m working on an (open source) theme myself at the moment, and will blog whenever I can and find something blog worthy.  So far I have styled 7 controls, then decided it looked really bad, and just started over again.

Advertisements