The Cosmopolitan shell and theme source code is released!

The Cosmopolitan shell and theme source code is released!

Rate This
  • Comments 11

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

Leave a Comment
  • Please add 6 and 6 and type the answer here:
  • Post
  • This is awesome!  Thanks!

  • I'm not a "creationist", but this is intelligent design !

    Thanks for sharing, you can not imagine how much this is giving insight in the lightswitch architecture.

    paul.

  • Hi Joe, got an important question to ask you;

    I had recently asked whether the Client HTML version of the LS has any dependency on Silverlight & XAML and the answer was "No". I also see the great work being put into the foundation of this new direction, meaning a product based HTML5/JS rather SL plugin. I see the back end of the RIA Services being replaced with WebAPI and basically a new line of product on it's own.

    Now I see this initiative of providing guidelines for make skins based on the SL and XAML and it's a fairly large amount of work on your part. So here are my questions:

    Do you foresee LS going into two directions, one based on HTML5 and another based on SL and each would have it's own skin/theme and rendering engine?

    Although the HTML5 development is still in Preview stage, but I would really like to see a transparent article from one of you guys about this new generation or evolution of LS. Is the SL version going to halt and the HTML5 becomes the next generation or are they going be two products in parallel or Share certain parts between each. And how the Skin/Theme and rendering be between the two products.

    I really would love to see a diagram of this new evolution.

    Thank you in advance!

  • Joe, I'd like to extend my previous question with another one, to help clarifying this point. The question is, suppose a new developer coming to LS without prior knowledge of LS and wants to "only" develop apps based on HTML5 for desktop and mobile devices, what should he/she learn from the current LS technology that would share with the HTML5 part?

    I also have another important question that could be answered in your article and that's is based on how LS will create each page/view either for desktop or devices? Here is some info to explain my question:

    Today, If I were to use ASP MVC, for developing desktop or even Mobile, I'd create separate view for each page and store it on the server and retrieve it as it's needed. This way I can create as many views as I need for my app without worrying about loading all the views at one shot.

    I've also seen SPA approach where a single view contains multiple logical views and loads the whole page in the DOM and at runtime, the developer hides/shows or perhaps uses some form of navigation library to navigate to different logical views. This is great for small apps for mobiles to load up front and users can flip between pages, but for any real LoB apps, you run into limitations quickly.

    My question is, how are you approaching having many pages/views and the ability to navigate through them and be able to bookmark them for SEO?

    As I said previously, I think a good diagram can speak a thousands words.

    Thank you again and looking forward to your future articles.

  • Cool, thanks for this.

  • Thank YOU!

  • there is no control for tiles development in vs 2012? how can i create tiles? Any idea?

  • THANKS! We will dig into it ASAP.

    Robert

  • Where is the multi-part blog series?

  • @Joe Binder -> I'm sure I am not alone in wondering where that multi-part blog series on customizing the Cosmopolitan shell and there is. Could you please give us an update on when we can expect it?

  • I would also like to see a post on updating this source code

Page 1 of 1 (11 items)