Skinning your LightSwitch application: intro

I have been dropping hints here and there about an extension “with a little twist”, “that will blow your mind”, …

I have been working towards it since the early beta days, and I can now confidently announce that, in a couple of months, I will release the first, be it very rough, beta, alpha, version of my LightSwitch skinning extension.

Why skinning?

Every LightSwitch application has that glowing button in the top right called “Design Screen”.  When you ever have the joy of showing LightSwitch, click that button, the runtime editor pops up, and by simply selecting a Bing map control extension from a combo box and hitting save, change your static, auto-generated screen to a vivid and dynamic one.  Stop right there.

Stop and take a good look at your audience.  The unsuspecting LightSwitch virgins never see it coming, and usually have their mouth dropped open.  I gave my 10th LightSwitch demo a couple of weeks ago, to the two newest members in my team, and one of them literally whispered in disbelief: “That’s… Amazing!”

The way I experience LightSwitch, the opposite is to be said on shell and theme extensions, unfortunately.  The default implementation really is quite nice, but creating a shell or a decent theme extension is such a huge job in a barely documented maze of code, it feels like it requires a master in advanced nuclear engineering just to stay sane while doing it… What’s even worse, is that there is nothing vivid or dynamic about the end result.


So what is skinning then?

I have made it my mission to create one theme and one shell extension, that combined, offer the power of skinning a LightSwitch application to both the developer and the end-user.  My functional requirements for this skinning extension are:

  • A skin can be changed at runtime.  A button (in the ribbon bar, next to the ‘Design Screen” one), takes the user to the skinning configuration screen.  Here, the user can select a skin from a number of predefined skins, and it gets applied immediately, completely changing the look and feel of the entire application.  No restarts should be required to see the result.
  • A skin is a package that defines the look and feel of the entire LightSwitch application.  It’s a theme extension that fully supports the default shell, screens, all of the control templates, … It’s also a shell extension, offering custom shell controls (navigation, commands, …).
  • A skin can be fine tuned at runtime.  The user can change the color or type of brush with just a few clicks for each of the brushes used in all of the control templates.  The user can reposition the shell controls, and select which control template to use.  Once again, all changes can be previewed and are applied immediately from the skinning configuration screen.
  • A new skin can be downloaded without any hassle.  Even in a deployed application, it should be possible for the user to download a new skin and apply it from the skinning configuration screen.
  • A skin is user specific, user group specific, or company specific.  The developer of the application can choose and modify the skin to be used, or just create a new, perhaps company specific one.  He can choose to empower admin users of the application to change this default skin, set new skins for groups of users or specific individuals, and/or add the right to groups of users to pick their own, personal skin to apply.
There will be a time in the near future, at least, I hope that time will come, when people will talk about shell and theme extensions and say: “Granted, shells and themes were a good start, but they are SO 2011 aren’t they?”  


You’re dreaming right?

Yes, I am.  But there’s nothing wrong with that, is there?

As I said, I have a lot of working samples now, crossed every foreseeable obstacle at least once, so it’s “just a matter of time” now, recreating the 2k+ control templates used in LightSwitch,  adding new control templates for the shell parts, creating the skin configuration screen, storing user specific skin settings, …


Justin Anderson (Microsoft MSFT) said:
Users will not be able to change the theme (a LightSwitch theme) of the application. LightSwitch themes are chosen by the developer during development. But I’m sure if a shell author want to get creative, a shell can provide their own customizability (not just limited to theming) at runtime by the end user.

But as Cromanty suggested, please do add this as a suggested feature on Connect.

Justin Anderson, LightSwitch Development Team
Proposed As Answer byJustin AndersonMicrosoft EmployeeTuesday, August 16, 2011 8:25 AM
Marked As Answer byBeth MassiMicrosoft Employee, OwnerWednesday, August 17, 2011 10:10 PM

Challenge accepted.

12 thoughts on “Skinning your LightSwitch application: intro

  1. Hallo makker 😀

    I’m enjoying my saturday morning coffee while reading the effective java book. Until monday I’ll try to find out what’s wrong with the singleton thingy ( can’t wait to get to that part 😀 )

  2. Hi Jan, how are you?
    Did you take a look at the Jetpack theme? I try to get in touch with you in another subject, but don’t know if you get my question… Your anwser was:

    Hey Dennis!
    Good to see you’re making such progress!
    Kind of an extremely busy couple of days at the moment (my blog has been really quiet I know ), but will have a look a bit later this week! Looking forward to it actually!

    Stay tuned!

    • Hey Myron,
      I hope to have a first version ready by the end of January, which will offer quite some dynamic capabilities already. I can’t predict “how much” the final version will contain, or when it will be ready, but I’m passionate about this and work on it as much as I can.
      Stay tuned!

  3. Pingback: Windows Azure and Cloud Computing Posts for 12/22/2011+ - Windows Azure Blog

  4. Pingback: Windows Azure and Cloud Computing Posts for 1/23/2012+ - Windows Azure Blog

  5. Pingback: Extensions made easy needs your help… « 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