6.10.2010

The Silverlight team has just come out with some great new themes! Here’s a brief rundown to give you a sense of what’s new and fresh, and some tips that will help you get started.

COSMOPOLITAN

Inspired by the Metro UX of the Windows Phone 7, this theme’s design principles included ideas such as: clean, light, modern. At the control level, each design approach is simple and minimal. At the project template level, you can tie in some rich animations and transitions, making this theme result in a truly digital and modern looking  app. demo
ACCENT COLOR

This theme concept was focused on flexibility, simplicity and elegance. The theme consists of a muted gray-scale control palette whose interactive states are highlighted using a punch of color, the accent color. This color can be edited in the resource dictionary, and the edits will cascade throughout the entire application for easier UX explorations and more flexible branding opportunities. demo
WINDOWS 7 INSPIRED

This theme is all about the OS. Oftentimes in an LOB scenario you want to be able to build an app that ties in seamlessly with what your customers use on an everyday basis.  Using a combination of these control styles and the Windows UI guidelines will invariably get you to that place where your app looks great and feels highly contextual within the OS. demo

 

V1.0 Release  5.17.2010

On 5/17 Project templates for Silverlight Navigation templates and Business Application Templates went live in VSIX format to help developers download our Silverlight 4 theme packs and get started quickly in building themed applications.

Hosted theme templates can be found here so you can see each theme in action:

Cosmopolitan (code name Metro)

AccentColor

Windows7 (OS compatible theme)

To get started, you can download all the theme templates at the microsoft.com download page. In the package you will find different options for your different needs.

  1. SL4Themes-RawAssets
  • These will help you update existing Silverlight projects using implicit styling in Silverlight 4.
  • The download consists of AccentColor, Cosmopolitan and Windows7 assets. Each theme contains the following assets that you should add as resource dictionaries to your existing project: Brushes.xaml, CoreStyles.xaml, Fonts.xaml, SDKStyles.xaml, Styles.xaml and ToolkitStyles.xaml

2. SL4Themes-templates

  • These will help you create a new Silverlight project from scratch.
  • You can install the ExpressionBlend4 templates and the VisualStudio2010 templates for each of the 3 three themes.
  • For the VisualStudio2010 templates you can install the Silverlight Navigation Template, or the RIAServices version.
  • The Navigation Template is a quick install (double-click to open and follow the dialog instructions). This will install the templates in our VisualStudio project folder. Then go into VS and create a new project… You should see an option for the Navigation Template with AccentColor, Navigation Template with Cosmopolitan Theme and AccentColor with Windows7 theme depending on which ones you install.

 

Below is a summary of all the cool places you can find the new themes showcased… or variations of the theme.

MIX / NAB / TechED Demos 

The Cosmopolitan theme was part of the Book Club demo by Nikhil Kothari in his MIX’10 talk 

The Cosmopolitan theme was also included in the DevConnections keynote at NAB.

Upcoming face time for the Cosmopolitan theme will be in Jason Zander’s keynote demo where we will be showcasing the RIA Services version of the Cosmopolitan theme in a travel app.

Future Demos 

TechReady11 DEV Track and VSLive Ux talks are planned for highlighting best practices in LOB UI design. Look out for the sessions over the coming months.

Expression Blend Launch 6.7.2010 

Theme project templates were also created for the Blend4 release. These are available in the theme pack download at microsoft.com

SLTV

An SLTV session is planned for the new Silverlight LOB themes. Look out for more info on this blog!

Blogs

Tim Heuer, Corrina Black and Tsitsi Gora will be blogging more on the new Silverlight themes in the coming months and providing invaluable information on customizing and extending the themes for deeper impact on a developer’s application building process. Be sure to check out the blogs for new theme updates.

Thanks and enjoy!