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:
- Follow the walkthrough on MSDN and create your own theme, I named mine ThemeWithControlTemplates. (I’m a developer, not a poet.)
- Create a test project and set it up for easy modifying and debugging on the extension you made.
Run your test application, enter a lot of data, so that your application looks like this:
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”.
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); } } }
This is brilliant. When are we going to see part 2…
Also, could you post your code? Thanks.
Hey Surfel!
Thanks for your reply again! Sorry it took me a while, but with any luck, I can upload the code sample tonight!
Kind regards
Jan
You my hero 🙂 🙂
Haha! Awesome!
Thank you for your feedback, glad you enjoyed it! And if you think this is fun, wait untill you see what I have coming! :-p
Kind regards
Jan
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!
Am using your extension and really appreciate it, but I want to style certain instances of controls rather than, say, all DataGrids. Been racking my head on this and can’t find a way. Even asked a question on the LightSwitch forum (http://social.msdn.microsoft.com/Forums/en-US/lsextensibility/thread/2b971df9-ee02-43b6-bf1c-f62c7a8ccc87) – the suggestion there is to create a custom control. Is that really the best way?
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!
Pingback: Sưu tầm: Creating A LightSwitch Theme Extension using Expression Blend | Thangletoan’s Weblog