Jan 30

Written by: Michael Washington
1/30/2012 3:10 PM 

Visual Studio LightSwitch allows you to create Theme extensions. A theme controls the overall look of a LightSwitch application.

Microsoft has an article, Walkthrough: Creating a Theme Extension, that covers the basics of creating themes for LightSwitch, however, this article will go a bit deeper and demonstrate creating more complex themes.

First note that the following are required in order to create LightSwitch extensions:

• Visual Studio 2010 SP1 (Professional, Premium, or Ultimate edition)

• Visual Studio 2010 SP1 SDK

• Visual Studio LightSwitch 2011

• Visual Studio LightSwitch 2011 Extensibility Toolkit

 

First, we create an extension project in Visual Studio.

We add a New Item to the .Lspkg project.

We add a Theme to the project.

A number of files are created in the various projects in the solution, including files in the Theme folder in the .Client project.

We click on the .Vsix project…

We then Start Debugging. This will open another instance of Visual Studio.

We create or open a LightSwitch project and go into Properties.

We click on the Extensions tab and enable the theme extension.

On the General Properties tab we select the Theme.

We then run the application.

The application shows with the default theme.

We now close the application, and the Visual Studio instance, and return to the extensions project.

Creating a Basic Theme

We right-click on the .xaml file and open it in Expression Blend.

When we click on the Resources tab, we can easily alter the brush styles.

When we run the application we see that our changes are reflected.

A More Advanced Theme

If we look at the LightSwitch Metro Theme we see an example of a more advanced theme.

It contains a class that implements the IThemeExtension interface, and an associated resource file.

See Jan Van der Haegen's article: Adding control styles to your LightSwitch theme extension for a full explanation of the the IThemeExtension interface.

We add a new class that implements the IThemeExtension interface using the following code:

 

using System;
using System.ComponentModel.Composition;
using Microsoft.LightSwitch.Theming;
using System.Collections.Generic;
using Microsoft.LightSwitch.Model;
namespace SimpleGreenTheme.Presentation.Themes
{
    [Export(typeof(IThemeExtension))]
    [Theme(GreenTheme.ThemeId, GreenTheme.ThemeVersion)]
    internal class MetroStyles :
        IThemeExtension
    {
        IEnumerable<Uri> IThemeExtension.GetControlStyleResources(
            string themeId, string themeVersion, IEnumerable<IModuleDefinition> modules)
        {
            yield return new
                Uri(@"/SimpleGreenTheme.Client;component/Presentation/Themes/GreenStyles.xaml", 
                UriKind.Relative);
        }
    }
}

 

Next, we add a Resource Dictionary to the project.

We can download Silverlight Themes from this link to “grab some ideas” .

When we open the resource file in Expression Blend…

We can visually edit the theme.

When we run the application we are able to see our advanced theming of controls.

 

Download Code

The LightSwitch project is available at http://lightswitchhelpwebsite.com/Downloads.aspx

Also See:

• Walkthrough: Creating a Theme Extension
• Adding control styles to your LightSwitch theme extension
• New Silverlight 4 Themes
• LightSwitch Metro Theme (source)

Microsoft Tutorials:

• Walkthrough: Creating a Value Control Extension
• Walkthrough: Creating a Detail Control Extension
• Walkthrough: Creating a Smart Layout Control Extension
• Walkthrough: Creating a Stack Panel Control Extension
• How to: Create a LightSwitch Extension Project
• How to: Debug or Test a LightSwitch Extension
• How to: Set VSIX Package Properties
• How to: Distribute a LightSwitch Extension