Refresh your application with Infragistics ResourceWasher

Lazar Nikolov / Friday, October 11, 2013

Have you even wondered what the easiest way to bring new colors to your application is? Just in few steps?

I can hardly imagine an easier way to do it other than using the Infragistics ResourceWasher - especially, if your application is built with our amazing controls.

Here I will show you how you can use the resource washer to refresh your xamGrid with some vivid autumn colors to bring the season mood in your WPF application in just few steps.

The Infragistics ResourceWasher resides in the Infragistics.WPF4 assembly in the Infragistics.Windows.Themes namespace. It allows you to set the color that the algorithm will use to change the colors. You can also specify the resources that will be washed and different rules of washing – using groups – I will get back to this later.

I’m coloring a simple WPF application with pretty straightforward layout. That’s it for your reference:

Not washed

You see that Metro theme is applied here to the xamGrid control and the controls on top. Same code can be applied to all controls and all themes.

Let’s now change that blue to a color more appropriate for the autumn – ochre.

The first we need to do is to define the ResourceWasher object. I do this in the code behind of my View page. However, you can do it wherever you’d like. Just be sure this code executes by the time you would like your new color to take its place in your interface.

Code Snippet
  1. ResourceWasher _washer = new ResourceWasher()
  2. {
  3.     WashMode = WashMode.HueSaturationReplacement,
  4. };

I’ve set also the wash mode. There are two wash modes – HueSaturationReplacement and SoftLightBlend. HueSaturationReplacement replaces the hue and saturation values with the corresponding values from the wash color but retains the brightness value. That’s why I prefer this kind of washing since it keeps the vividness of the color.

I will define the wash color like that, in the constructor:

Code Snippet
  1. _washer.WashColor = new Color { R = 204, G = 119, B = 34 };

However, you can always use a standard color from the build in palette by accessing the Colors enumeration. I don’t like standard colors, I always would tune a bit.

Next on – specify the resource dictionary that will be washed. The resource washer creates a copy of the resources and changes the colors in the copy based on the rules specified by WashColor and WashMode. Here is how I do this in my sample:

Code Snippet
  1. ResourceDictionary rd = new ResourceDictionary();
  2. rd.Source = new Uri(@"/;component/Metro/Metro.xamGrid.xaml", UriKind.Relative);
  3. _washer.SourceDictionary = rd;

An important note here – ALL resource dictionaries inside Metro.xamGrid.xaml will be washed. This will also include Styles.Shared and Styles.WPF.

So far, we’ve defined the resource washer, set the wash mode and color and specified the resources to wash. A copy of all the resources is created and the colors are changed. But this still doesn’t affect our application because it doesn’t know for the washed resources. To see the changes you need to add the new resources to the global resource dictionary of the application. You can do this by the following line of code:

Code Snippet
  1. Application.Current.Resources.MergedDictionaries.Add(_washer);

Start your application now. Spot the differences? Hint –more than 10.


And that’s it, you now successfully washed you application with adding just couple of lines of code.

Now let’s get back briefly to wash groups. Generally, we would use the groups when we want to wash different elements with different colors. By setting wash group to a resource you can separate your resources into groups that will be washed by different rules. Tune in for more information on this soon.

You can find attached the project that I used while writing this post.

In conclusion, Infragistics ResourceWasher is a simple, yet powerful tool to easily modify the theme color of your application. Using it in your solution, you can bring the shininess again and even let users decide for their own!