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:

 

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:

 

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

 

 

• Modifying the MouseOver Brush:

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

• Modifying the Selected Background brush:

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

• Modifying Highlight & Border Brush

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

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

 

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.

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