Beginning LightSwitch Part 6: I Feel Pretty! Customizing the "Look and Feel" with Themes

Beginning LightSwitch Part 6: I Feel Pretty! Customizing the "Look and Feel" with Themes

Rate This
  • Comments 4

NOTE: This is the Visual Studio 2010 version of the popular Beginning LightSwitch article series. For other versions see:

Welcome to Part 6 of the Beginning LightSwitch series! In parts 1 thru 5 we built an Address Book application and learned all about the major building blocks of a Visual Studio LightSwitch application -- entities, relationships, screens, queries and user permissions. If you missed them:

In this post I want to talk about themes. Themes allow you to change the colors, fonts and styles of all the visual elements in the user interface. Now that our Address Book application is complete, we’re almost ready to get this in front of real users. But before we do, it would be really nice to apply a different look-and-feel to our application in order to make it stand out above the rest. Visual Studio LightSwitch comes with only one theme out of the box, but you can download more. In fact, there are all kinds of extensions you can download to enhance what LightSwitch can do out of the box, not just themes.

Visual Studio LightSwitch Extensibility

LightSwitch provides an entire extensibility framework so that professional developers can write extensions to enhance the LightSwitch development experience. Many third-party component vendors as well as the general community have released all sorts of extensions for LightSwitch. These include custom controls, business types, productivity libraries and designers, and of course themes. Check out some of the featured extensions from our partners. If you are a code-savvy, professional .NET developer with Visual Studio Professional or higher, then you can create your own extensions. For more information on creating extensions see the Extensibility section of the LightSwitch Developer Center.

Downloading and Enabling Extensions

Luckily, you don’t need to be a hardcore programmer to use extensions. They are easy to find and install. Just open the Extension Manager from the Tools menu.

image

The Extension Manager will come up and display all your installed extensions. Select the “Online Gallery” tab to choose from all the LightSwitch extensions from the Visual Studio Gallery. (Note: if you have Visual Studio Professional or higher and not just the LightSwitch edition installed, then you will need to filter the Extension Manager on “LightSwitch” to see those extensions.)

image

You can also download these extensions directly from the Visual Studio Gallery. Select the extension you want and click the download button to install.

For our Address Book application I’m going to apply the LightSwitch Metro Theme which is one of the most popular extensions (at the time of this writing) so it’s right at the top. Once you install the extension, you’ll need to restart Visual Studio LightSwitch. After extensions are installed, you need to enable them on a per-project basis. Open the project properties by right-clicking on the project in the Solution Explorer and select “Properties”. Then select the “Extensions” tab to enable the extension.

image

For our Address Book application, enable the Metro Theme extension. Also notice that there is the “Microsoft LightSwitch Extensions” also in this list which is always enabled and used in new projects. This is an extension that is included with the LightSwitch install and contains the business types Email Address, Phone Number, Money and Image that you can use when defining your data entities like we did in Part 1. You should never have to disable these.

Applying a Theme

Now that the theme extension is installed and enabled, you can apply the theme by selecting the “General Properties” tab and then choosing the LightSwitch Metro Theme.

image

Then just build and run (F5) the application to see how it looks!

image

For more information on the Metro Theme extension (and source code) see the LightSwitch Metro Theme Extension Sample.

Some More Cool LightSwitch Themes

Besides the Metro Theme, there are a lot of other nice looking themes available, some for free and some for a small fee. If you open the Extension Manager to the Online Gallery tab and enter the search term “theme” you will see a long list of them. Here are the top 5 most popular on the gallery (at the time of this writing):

  1. LightSwitch Metro Theme
  2. Spursoft LightSwitch Extensions
  3. Themes by Delordson (LightSwitchExtras.com)
  4. Luminous Themes
  5. VS Dark Blue Theme

Also check out Paul Patterson’s “Uber Theme Resource” which provides more screenshots and reviews of all the themes on the gallery!

Wrap Up

As you can see it’s easy to download and enable themes in Visual Studio LightSwitch in order to change the look-and-feel of your business applications. LightSwitch provides an entire extensibility model that not only allows the community to create themes, but all kinds of extensions that enhance the LightSwitch development experience that you can take advantage of. If you’re a code-savvy developer that wants to create your own themes, head to the Extensibility section of the LightSwitch Developer Center to get set up and then read this walkthrough Creating a Theme Extension.

Well that wraps up what I planned for the Beginning LightSwitch Series! I hope you enjoyed it and I hope it has helped you get started building your own applications with Visual Studio LightSwitch. For more LightSwitch training please see the Learn section of the LightSwitch Developer Center. In particular, I recommend going through my “How Do I” videos next.

Now I’m going to go enjoy some well-earned Christmas vacation. I’ll be back in a couple weeks. Happy Holidays LightSwitch-ers! Enjoy!

Leave a Comment
  • Please add 6 and 6 and type the answer here:
  • Post
  • Thanks for the mention Beth!

    I love LightSwitch extensions; especially themes! A simple click on the project properties window and I can change my application look to almost anything imaginable.

    Cheers!

  • Thanx for the articles. Hope you had time to do your Xmas shopping. I will continue to learn lights witch.

  • Very Nice, I am wondering if the LightSwitch extensions will work along Windows 8, what's the future of Silverlight based developer tools like Lightswitch?

  • Beth, I'd love to say that the Metro Theme is great but I can't because it illogically uses ALL CAPITALS all over the place. Why, for instance, are all field labels in ALL CAPS when tabs are not? Why are Navigation items in ALL CAPS but the navigation group headers are in "all lower case"?

    ALL CAPS are considerably more difficult to read than "Mixed Case". Please consider releasing an update to this theme that revises or even reverses the ALL CAPS and "all lower case" settings of this theme to make it more logical/easier to read.

    If you disagree, please explain the logic behind making so much of the UI "ALL CAPS" while strangely forcing "all lower case" onto arguably higher level items.

Page 1 of 1 (4 items)