The Cosmopolitan shell and theme source code is released!

We’ve released the source code for the Cosmopolitan shell and theme, allowing you use the default LightSwitch 2012 shell and theme as starting points for your own custom shells and themes.

You can download the source here.

Custom LightSwitch shells and themes are topics that crop up commonly on customer visits and in the forums, yet the complexity and cost of building a custom shell or theme from scratch can outweigh the benefit in some situations: often small, visual tweaks are all that’s desired from a custom shell or theme. We created the Cosmopolitan shell and theme with the intent that it could serve as a working, easily customizable sample. The code and XAML is structured to facilitate making incremental changes to our default shell.

With all of the LightSwitch-specific plumbing already present and working in the sample, building a custom shell or theme is now a largely Silverlight-intensive task, with most effort focused on the specific user interface and experience required of your shell.

Prerequisites

If you’re interested in building a custom theme or shell with the Cosmopolitan source, you’ll need the following on your machine:

If you’ve never built a LightSwitch extension, you may also want to take a look at the official documentation on LightSwitch extensions.

Whoa, that’s a lot of code!

This is the complete source code for the shell and theme we ship in the box, so there’s is a lot of functionality packed into the project. The volume of XAML and code might be a bit overwhelming. For the most part, though, you can start by looking at the root XAML files for the shell and theme and drill-in from there. The root shell and themes files are as follows:

  • ~/Presentation/Shells/CosmopolitanShell.xaml: This is root user control that describes the shell layout and appearance. Want to move the command bar to the top of the shell and put the navigation menu on the side? Start here.
  • ~/Presentation/Themes/CosmopolitanTheme.xaml: This is the root resource dictionary that merges in all of the styles used by LightSwitch. While there are no styles defined in this file, you can follow the merged dictionaries to track down the style you want to change. We’ve tried to group related styles into well-named files, too.

We’re putting the finishing touches on a multi-part blog series that will walk you through the process of customizing the Cosmopolitan shell and theme and include some tips-and-tricks for debugging and testing your custom shells and themes. So if all of the source code is still a bit much, stay tuned!

If you have any questions on the Cosmopolitan shell and theme source, head over to the LightSwitch Extensibility Forums.

Thanks!

Joe Binder, Program Manager, Visual Studio LightSwitch