In this blog I will be discussing the customization of the Rainier Theme. We will use the sample from the last blog and will first add the RainierOrange.xaml file from the Source\Controls.Samples\Theming\ThemeBrowser folder to our project and rename it RainierRadialBlue.xaml (don’t forget to set the build action to content). Ready?  Let’s start changing the color scheme of the controls in their different states

 

  • Modifying the Normal Brush:

if you look into the RainierRadialBlue.xaml, you will notice the following brush:

image 

by changing this brush, you will affect the color of all the controls when they are in their normal state.

Say for example, I want to change normal state as follow:

image 

I will simply define a new RadialGradientBrush (I usually use Blend to do this):

image 

 

  • Modifying the MouseOver Brush:

Changing the mouse over state requires modifying the MouseOverBrush as follow:

image

  • Modifying the Selected Background brush:

Changing the selected state requires modifying the selected background brush as follow:

image

  • Modifying Highlight & Border Brush

The border brush defines the border of the controls when they are in the normal state:

image

The Highlight Brush defines the border color of the controls when they are in a focused state:

image

 

Conclusion:

Rainier theme was inspired from the default theme of the Silverlight controls. We wanted to allow a greater flexibility when changing the background color of the controls. As you can see, It took only few changes of a set of predefined brushes to change the look and feel of all the controls.

image

You can download the sample project here & RainierRadialBlue.xaml here.