This walkthrough demonstrates how to create a theme extension for Visual Studio LightSwitch. A theme extension defines a color and font palette for the LightSwitch shell.
To create a theme extension, you must do the following:
Visual Studio Professional 2012
Visual Studio 2012 SDK
LightSwitch Extensibility Toolkit for Microsoft Visual Studio 2012
The first step is to create a project and add a LightSwitch Theme template.
To create an extension project
On the menu bar in Visual Studio, choose File, New Project.
In the New Project dialog box, select the LightSwitch node, and then select LightSwitch Extension Library (Visual Basic) or LightSwitch Extension Library (C#).
In the Name field, type TestThemeExtension as the name for your extension library. This name will appear on the Extensions tab of the LightSwitch Application Designer.
Choose the OK button to create a solution that contains the seven projects that are required for the extension.
To choose an extension type
In Solution Explorer, select the TestThemeExtension.Lspkg project.
On the menu bar, choose Project, Add New Item.
In the Add New Item dialog box, select LightSwitch Theme.
In the Name field, enter TestTheme as the name for your extension.
Choose the OK button. Files will be added to several projects in your solution.
The default name for your theme is “TestTheme” and the default description is “TestTheme description.” Both of these will appear in the Application Designer at design time. Therefore, you will change them to something more meaningful.
To specify the display name and description
In Solution Explorer, choose the TestThemeExtension.Common project.
Expand the Metadata and Themes nodes, and open the TestTheme.lsml file.
In the Theme element, replace the DisplayName value with Test Theme, and replace the Description value with This is my first try at creating a theme. As follows.
<Theme Name="TestTheme"> <Theme.Attributes> <DisplayName Value="Test Theme"/> <Description Value="This is my first try at creating a theme."/> </Theme.Attributes> </Theme>
These are the values that developers will see when they select your theme on the General Properties tab of the application designer.
At this point you have created a theme, and you can test it in a LightSwitch application.
The LightSwitch Theme project template added a TestTheme.xaml file to the TestThemeExtension.Client project. This file contains the resource directory for the LightSwitch shell; the default values and styles define the appearance of the LightSwitch Blue Theme (Default) theme that is the default for LightSwitch applications. You define your own theme by modifying some or all of the values in this file. For more information on the available styles, see Control Elements for LightSwitch Themes.
To define the theme
In Solution Explorer, choose the TestThemeExtension.Client project.
Expand the Presentation and Themes nodes, and open the TestTheme.xaml file.
On the menu bar, choose Edit, Find and Replace, Quick Replace.
In the Find and Replace dialog box, enter Segoe UI, Arial in the Find what field, and enter Segoe Script in the Replace with field.
Choose Current Document in the Look in list, and then choose Replace All.
Eleven occurrences will be replaced, defining Segoe Script for all of the font values.
In the TestTheme.xaml file, locate the TextBoxBackgroundBrush element, and replace <SolidColorBrush x:Key=”TextBoxBackgroundBrush” Color=”White”/> with <SolidColorBrush x:Key=”TextBoxBackgroundBrush” Color=”Yellow”/>.
Locate the ToolbarBackgroundBrush element and replace <SolidColorBrush x:Key=”ToolbarBackgroundBrush” Color=”#FFE9EDF1″/ with <SolidColorBrush x:Key=”ToolbarBackgroundBrush” Color=”Red”/.
Note that the color values can be entered as either a System.Drawing.Color value or a hexadecimal color value.
You can also open the .xaml file in Microsoft Expression Blend 4 and change the colors in a visual designer.
At this point you have created a rudimentary theme, and you can test it in a LightSwitch application.
You can test the theme extension in an experimental instance of Visual Studio. If you have not already tested another LightSwitch extensibility project, you have to enable the experimental instance first.
To enable an experimental instance
In Solution Explorer, select the TestThemeExtension.Vsix project.
On the menu bar, choose Project, TestThemeExtension.Vsix Properties.
On the Debug tab, under Start Action, choose Start external program.
Enter the path of the Visual Studio executable, devenv.exe.
By default on a 32-bit system, the path is C:\Program Files\Microsoft Visual Studio 11.0\Common7\IDE\devenv.exe; on a 64-bit system, it is C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE\devenv.exe.
In the Command line arguments field, type /rootsuffix Exp as the command-line argument.
All subsequent LightSwitch extensibility projects will also use this setting, by default.
To test the theme
On the menu bar, choose Debug, Start Debugging. An experimental instance of Visual Studio opens.
In the experimental instance, on the menu bar, choose File, Open Project.
In the Open Project dialog box, select any existing LightSwitch application project and open it.
On the menu bar, choose Project, ProjectName Properties.
In the project designer, on the Extensions tab, check the TestThemeExtension check box.
Select the General Properties tab, and in the Theme list, choose Test Theme.
On the menu bar, choose Debug, Start Debugging. Observe the changes in appearance in the running application.
This completes the theme extension walkthrough; you should now have a fully functioning theme extension that you can reuse in any LightSwitch project. Of course, you might want to modify the styles to make the theme a bit more pleasing to the eye; the walkthrough is only intended to show you the necessary techniques.
If you are going to distribute your extension, there are a couple more steps that you must take. To make sure that the information displayed for your extension in the project designer and in Extension Manager are correct, update the properties for the VSIX package. For more information, see How to: Set VSIX Package Properties. In addition, there are several things to consider if you are going to distribute your extension publicly. For more information, see How to: Distribute a LightSwitch Extension.
LightSwitch Metro Theme Extension Sample
This sample demonstrates how to recreate the LightSwitch Metro Theme extension, a contemporary theme for Visual Studio LightSwitch applications.
Building the Sample
The prerequisites for this sample are:
- Visual Studio 2010 SP1 (Professional, Premium, or Ultimate edition)
- Visual Studio 2010 SP1 SDK
- Visual Studio LightSwitch 2011
- Visual Studio LightSwitch 2011 Extensibility Toolkit
In addition to these prerequisites, you should be proficient in either Visual Basic or C# and should be familiar with theming in Silverlight. We also recommend that you be familiar with creating Visual Studio extensions using the Visual Studio SDK.
This sample expands upon the Help topic Walkthrough: Creating a Theme Extension, which demonstrates a simple theme that defines fonts and colors. The Metro theme also makes use of styles, defining new appearance and behavior for the built-in LightSwitch control templates. To provide a consistent experience, you will need to define Resource Dictionaries in the form of a .xaml file for each control template, as shown in the following illustration:
Additional styles are defined in the MetroStyles.xaml file, which also contains a MergedDictionaries node that references the other .xaml files. When LightSwitch loads the extension, it reads in all of the style information and applies it to the built-in templates, providing a different look and feel for your application.
There isn’t much code in this sample; most of the work is done in xaml. You can use this sample as a starting point for your own theme, changing the fonts, colors, and styles to create your own look. Enjoy!
For more information on creating extensions for Visual Studio LightSwitch, seeVisual Studio LightSwitch 2011 Extensibility Toolkit.
LightSwitch Extensibility Toolkit for Visual Studio 2012
Visual Studio LightSwitch is a tool for developing business applications for the desktop, web, and cloud. You can extend the functionality of LightSwitch by creating extensions using Microsoft Visual Studio Professional 2012, the Visual Studio 2012 SDK, and the LightSwitch Extensibility Toolkit for Microsoft Visual Studio 2012.
The following are required in order to create LightSwitch extensions:
Visual Studio Professional 2012
Visual Studio 2012 SDK
LightSwitch Extensibility Toolkit for Microsoft Visual Studio 2012
In addition to these prerequisites, you should be proficient in either Visual Basic or C# and should be familiar with both Windows Presentation Foundation (WPF) and Silverlight. We also recommend that you be familiar with creating Visual Studio extensions using the Visual Studio SDK.
There are six types of extensions for LightSwitch:
Let you wrap a base data type in a semantic type, providing additional validation and display capabilities in LightSwitch while continuing to store the data in its underlying type. They can include a Silverlight control for displaying data.
Silverlight user controls with additional attributes to make them usable in and better integrated with LightSwitch.
Domain service adapter class that enables LightSwitch to work with other data sources.
Can be used to create screens that have common layout patterns different from the standard screen layouts provided by LightSwitch.
Let you create an application shell with a different layout and different capabilities than the standard LightSwitch application shell.
Let you create a different appearance and behavior for LightSwitch applications and controls.
The LightSwitch Extensibility Toolkit for Microsoft Visual Studio 2012 includes templates that contain the necessary files for each extension type.
The LightSwitch Extensibility Toolkit for Microsoft Visual Studio 2012 installs two new project templates, LightSwitch Extension Library (Visual Basic) and LightSwitch Extension Library (Visual C#), that can be used to create extensions. When you select one of these project types, a solution with seven projects is generated:
The projects with names that end in .Client, .Client.Design, .Common, .Design, and .Server contain the various parts of the extension items that will be added to the library.
Contains client implementations that should be deployed with a LightSwitch application but are not found in the Common project. For example, controls, shells, and themes.
Contains implementations necessary during the debugging of a LightSwitch application. For example, control images or custom property editors for the runtime screen designer.
Contains implementations that are common to both the client and the server. For example, metadata loaders and validators.
Client sub-project, server sub-project, Visual Studio IDE
Contains implementations for design time integrated development environment (IDE) operations. For example, a screen template.
Visual Studio IDE
Contains server implementations that should be deployed with a LightSwitch application but are not found in the Common project. For example, data sources.
The .Lspkg project packages the previous five projects so that LightSwitch can unpack and reference them when the package is installed.
The .Vsix project packages the generated .Lspkg file into a .Vsix package so that it can be added to LightSwitch through the Extension Manager.
The contents of each project will differ depending on which extension type template is selected. To learn more about how to create extensibility projects, see How to: Create a LightSwitch Extension Project
The process of developing a LightSwitch extension is like that of developing a Visual Studio extension using the Visual Studio SDK. As with any extension, you create an extensibility project, write code for the extension, debug the extension, set properties for the .Vsix package, and distribute the extension.
The actual code that you have to write will vary depending on the extension type. To start working with a particular extension type, see one of the following topics:
As with any Visual Studio extension, you debug a LightSwitch extension by using an experimental instance of Visual Studio. To learn more about how to debug, see How to: Debug or Test a LightSwitch Extension.
Once your extension is complete, you will want to set properties in the .Vsix package to identify the extension. For more information, see How to: Set VSIX Package Properties. The final step is to publish your extension on Visual Studio Gallery. For more information, see How to: Distribute a LightSwitch Extension.