Adding control styles to your LightSwitch theme extension (Part3: style keys and hidden templates).

I spent most of the weekend cleaning up the ExtensionsMadeEasy extension, because the next two posts will just cry for a little code sample, and I really wanted to use my extension for these sample projects, so forgive me for being a bit late and boring with my blog posts lately…

Armed with the knowledge that theming is far superior than shelling, let’s continue our quest to make a complete and working example of a LightSwitch theme.  We have already examined the official MSDN theme walktrough, learned that you can simply define new default styles for most of the Silverlight default controls in an IThemeExtension implementation, and studied the Metro theme sources, and it still feels like we are missing some final information before we can finish our theme.

Well, that, AND some designing skills…

  • Problem one is that the LightSwitch generated screens use some keyed styles for a lot of the controls.
  • Problem two is that we want to make our Theme compatible with the default shell, we need to define styles for controls that aren’t even visible to us, because they are in the Microsoft.LightSwitch.Client.Internal dll…

For both, it’s obvious that we need a lot more documentation and better working samples from the LightSwitch team.  We can either nag about it, connect to them and ask for it, or just not take any chances, not sit around waiting for more documentation (hey, writing documentation sucks, when was the last time you wrote any?) , and I start working on a complete list of all keys and controls that we really need in a theme extension.

The bad news is that I just started working on it (although you can get pretty far by creating a custom control, and investigating the control.Resources!), but haven’t finished it yet.  There are a lot, let me just tell you that, and I promise to finish and post the list here soon.

The good news is that I have a working sample ready. A little proof of concept where I override one default control (scrollbar), make use of a keyed style (x:key=”NavigationHeaderButtonStyle”) and define a new default style for a control inside the default shell (Microsoft.LightSwitch.Client.Internal.ActiveScreenTabItem)!

Wait… Are that icons in the theme I see?

PS: I also restyled the ScrollBar for a complete theme I’m working on, based on the GlassButton by Micheal Sync.  Does it look ok to you guys? All feedback appreciated, as always, in the comment section below or on Twitter.

PS2: much credit goes to the awesome LightSwitch team, in combination with the awesome SilverLightSpy team! Hehe!

1 thought on “Adding control styles to your LightSwitch theme extension (Part3: style keys and hidden templates).

  1. Pingback: Adding control styles to your LightSwitch theme extension (Part4: adding images to the shell). « Jan Van der Haegen's blog

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your 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 )

Connecting to %s