Modernize Apps Look & Feel with Metro Studio and the Cosmopolitan Shell

Modernize Apps Look & Feel with Metro Studio and the Cosmopolitan Shell

Rate This
  • Comments 6

One of the design goals for LightSwitch in Visual Studio 11 was to modernize the look and feel of the UI. Back in March the team released the beta of the LightSwitch Cosmopolitan Shell and Theme. This theme and shell provides a bunch of improvements over the default one like displaying a logo at the top of the application, streamlined top-bar navigation menu, and a “Metro-style” command bar now located at the bottom of screens. This shell will become part of the product and the default shell and theme for new projects you build with LightSwitch in Visual Studio 11 at final release.

So I attempted to apply the Cosmo shell to my Contoso Construction application a while back and I got a couple remarks about how my icons were pretty much sticking out like a sore thumb. I used traditional colorful icons in the application and while that looks great with the standard shell, it doesn’t fit well with the Metro-style icons in the Cosmopolitan shell. Unfortunately I didn’t have time to redraw the icons -- and let’s face it, I’m not a designer.

Enter Syncfusion Metro Studio

Luckily there’s a FREE tool out there that you can use to quickly create Metro-style icons! Last night I was reviewing a LightSwitch e-book from Jan (to be released soon I hear!) and he mentioned this free tool so I had to go check it out, Syncfusion Metro Studio. And yes it’s free! Thank you Syncfusion for supporting the community (and particularly the developers who can’t draw!)

image

This tool comes with a bunch of icon templates you can use to get started designing your own Metro-style icons and it’s super easy to use.

image

Pick a template and then you can change the sizing, shape, foreground, and background color. You can also view & copy the XAML or save it as a PNG.

image

For LightSwitch applications that use the Cosmo shell, it’s best to go with a Transparent background so that the light grey of the command bar comes through. Although Metro Studio doesn’t let you choose a transparent background in the color picker, you can simply type it in the textbox (like I show above).

Contoso Construction Updated

It took me about 20 minutes to update all the icons in the Contoso Contruction application and here’s what I came up with. Not bad for not being a designer :-). You can download the updated sample here:

Download Contoso Construction - LightSwitch Advanced Sample (Visual Studio 11 Beta)

Contoso1sm

Syncfusion Metro Studio is a huge time-saver and all the icons you create are royalty-free even for commercial applications. Have fun “Metro-styling” your apps!

Enjoy!

Leave a Comment
  • Please add 3 and 4 and type the answer here:
  • Post
  • VERY GOOD, ARE SO SPECIAL WORK, GOOD THANK YOU, BAY

  • By unchecking the Background Shapes check box, you could easily get rid off the background, instead of using the Color Picker. :)

  • Hey im having trouble with signing in

  • Can anyone recommend something like this that will allow adding text to the icons?

  • Metro Studio 2 Beta is now available for download...

    www.syncfusion.com/.../metrostudio_beta

  • Can anyone say about default size of icons in LightSwitch Cosmopolitan Shell and Theme?

Page 1 of 1 (6 items)