We shipped the Silverlight Toolkit with the following Themes:

clip_image002

clip_image004

clip_image006

clip_image008

clip_image010

clip_image012

Expression Dark Expression Light Shiny Red Shiny Blue Rainier Orange Rainier Purple

In this post, I will be talking about how to customize these themes  and produce many great looking variations.

Customizing Shiny Blue Theme:

First thing first, if you haven’t already done so, download the Silverlight Toolkit here. Under the Source\Controls.Samples\Theming\ThemeBrowser you will find all themes files as well as the source code for theme browser sample. This blog assumes that you are familiar with Implicit Style Manger. Please refer to Beatriz’s or Jesse Liberty blogs. (for a deep dive go to Jafar's blog, the developer of ISM)

For now, we will be working with ShinyBlue.xaml.

Step 1:

Create a new Silverlight Project in Silverlight Project

Step 2:

Add a reference to Microsoft.Windows.Controls.Theming.dll and System.Windows.Controls.dll

Step 3:

Add ShinyBlue.xaml to your project, rename to ShinyDarkTeal.xaml and set the build action to Content.

image

Step 4:

Add the following lines to your page.xaml file:

 image

Step 5:

Open ShinyDarkTeal and search for the following lines (towards the beginning of the file):

 <Color x:Key="NormalBrushGradient1">#FFBAE4FF</Color>

 <Color x:Key="NormalBrushGradient2">#FF398FDF</Color>

 <Color x:Key="NormalBrushGradient3">#FF006DD4</Color>

 <Color x:Key="NormalBrushGradient4">#FF0A3E69</Color>

Replace by the following:

<Color x:Key="NormalBrushGradient1">#FFC5E1D7</Color>

<Color x:Key="NormalBrushGradient2">#FF7CB2A2</Color>

<Color x:Key="NormalBrushGradient3">#FF3F8570</Color>

<Color x:Key="NormalBrushGradient4">#FF294C41</Color>

Step 6:

Compile and run the sample. You should see the following:

image 

Conclusion

As you can see, changing the color of the theme is simple. In the next blog, I will dive deeper into theme customization. In the meanwhile, you can Download the sample here. I added more variations of the Shiny theme for you enjoyment:

image

You can download the individual themes here: