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.
Solution - start

What the solution looks like to start.

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

TestArea - start

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 - end

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

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

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

9 thoughts on “Adding control styles to your LightSwitch theme extension (Part1: introduction).

      • I’m already enjoying your ExtensionsMadeEasy extension and your answer brings more joy!! 🙂

        Thx for ur contribution to the community!!

      • Thanks again for feedback PowerBala, I’m glad you are enjoying it! I promise I have some updates planned that will blow your mind 😀
        It’s an awesome feeling to be an active LightSwitch community member! A really nice product, AND really nice people in the community, including yourself!

    • Hey Roger,
      thanks for the feedback (and the free publicity for EME on the MSDN forums :-))

      AFAIK a custom control would be the inevitable starting point of your journey.
      However, you could make that control a simple but smart ContentPresenter, which shows the LightSwitch default control (textbox, checkbox, …) for your value, unless you tell the ContentPresenter from code to show something else. It seems like a really big challenge, but you could make a smart enough system that solves this for everyone for once and for all…
      If I had any time left at all, I would gladly volunteer to help, but I’m swamping in work at the moment… 😦

      Hope all goes well for you, and a good solution is found!

      Best of luck!

  1. Pingback: Sưu tầm: Creating A LightSwitch Theme Extension using Expression Blend | Thangletoan’s Weblog

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