3
votes

I am trying to understand what is the most streamlined way of customizing the look and feel of my LightSwitch applications.

I have built several WPF and Silverlight applications, and have a common set of brushes, styles, storyboards, images, etc, stored as resources in a dedicated class library. I do not have any user controls of my own - just styles, brushes, templates, etc, that make them look customized.

I chose to build my next application in LightSwitch and I would like to keep the same look and feel as my existing WPF and Silverlight apps. Therefore, I would like to re-use my existing resources.

I explored the Extensibility Toolkit and was able to have access to some of the resources used in LS such as brushes, but did not find where the styles and templates are.

Question #1: Where can I merge my own resource dictionaries to plug in my own styles and templates? For instance, if I have a implicit style for a button, where do I merge it?

In using the toolkit's theme approach, from what I understand, one needs to do the following just to see a modification applied to a LightSwitch application:
a) Build the theme project
b) Uninstall the extension if previously installed
C) Restart Visual Studio
d) Reinstall the updated theme extension
e) Restart Visual Studio
f) Load the LightSwitch solution and run it

Am I missing something? A work around I see is to create a regular Silverlight project and use my own resource library. And once I am satisfied with the look of a particular resource and want to see it in LightSwitch I merge it in the theme and perform the painful process described above.

Question #2: how can I quickly change a theme and see it in action?

Please, what am I missing? I am likely missing something because this cannot be so complicated, since it is so easy in SL and WPF. All I want to do is merge my resource dictionaries somewhere in my LS app and run it to see them in action. Please help! :)

1

1 Answers

1
votes

For Q1, simply merging a resource dictionary isn't enough, you need to use implement a little-known interface called IThemeExtension, and decorate the class with the ThemeExtension attribute. There's not much written about it, but once you get by the unfortunate name (it probably would have been a lot less confusing if it had been called something like a StyleExtension, or a ControlStyleExtension, but its name comes from the fact that it’s an extension to a theme, in the form of additional control styles), it's pretty simple.

The IThemeExtension interface has only one method to implement, GetControlStyleResources, which must return an IEnumerable(Of Uri). Its purpose is to expose one or more URI values that each point to a ResourceDictionary (stored in a XAML file) that contain control style definitions.

The italicised text is quoted from a book that I'm writing with Tim Leung, called "Pro Visual Studio LighSwitch 2011 Development", due out at the end of February.

If you download the source for the Metro theme, you'll see how Microsoft is using the theme to make control style changes, as well as brush color changes. (http://code.msdn.microsoft.com/LightSwitch-Metro-Theme-b1bfce24)

For Q2, when I'm creating a theme, to test it I use the following steps.

  1. Build the project
  2. Click on the link to the VSIX in the output window
  3. Follow the wizard to install the theme extension
  4. Open an LS project (if it's a project that hasn't used the theme, you need to tick the "Use in this project" checkbox in the project's properties, & if the theme hasn't already been selected, you need to select it for the project as well).
  5. Run the LS project

The extra bits in step 4 only need to be done for a project that doesn't already have your theme selected. Once that's done, the sequence is very simple. There's absolutely no need to uninstall/reinstall your extension. Just make sure that you increment the version number (from say 1.0 to 1.0.1 etc) each time you want to test it, & the extension will upgrade the previously installed version of itself.

I hope all that helps.