Theming your Infragistics WPF Line of Business Applications Made Quick and Easy

Say you’ve built an application using Infragistics WPF Line of Business controls, and would like to finish the job with a color theme matching the corporate color palette or the color your graphical designer has recommended. This blog post demonstrates how you can do this easily by using the powerful theming capabilities provided by Infragistics WPF Line of Business controls. This approach will enable you to change the color scheme of existing themes by a single color setting and quickly produce professional-looking themes for selected Infragistics WPF Line of Business controls.

Here are two versions of the same application screen, featuring XamRibbon, XamDataGrid and all Infragistics editor controls, produced by only changing the value of the color used for theme transformation (we call it theme “resource washing”).

Presenting resource washing

We refer to the approach of automatically creating a new theme based on an existing one as resource washing. Think of resource washing as a process similar to what happens in a washing machine when you wash whites with one colored item – all of the whites obtain a pale shade of the colored item. The metaphor aside and back into WPF, we will be merging standard Infragistics control theme resource dictionaries (the items to have their colors changed), and then using a ResourceWasher to modify their color settings appropriately.

Implementing resource washing

<Grid>
     <Grid.Resources>
      <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
             <!--xamdatagrid theme washing—>
             <!--importing the xamdatagrid base theme—>
             <igThemes:DataPresenterWashBaseLight />
             <igThemes:ResourceWasher 
                    AutoWash="True" WashColor="LightBlue" WashMode="HueSaturationReplacement">
                <igThemes:ResourceWasher.SourceDictionary>
                      <!--set of brushes to be washed for the xamdatagrid—>
                      <igThemes:DataPresenterWashBaseLightBrushes />
                </igThemes:ResourceWasher.SourceDictionary>
             </igThemes:ResourceWasher>
          </ResourceDictionary.MergedDictionaries>
       </ResourceDictionary>
     </Grid.Resources>
</Grid>

The code segment above performs resource washing for a XamDataGrid control, using a LightBlue color. Please refer to this code segment as we go along.

Add an igThemes namespace declaration to your window as follows:

xmlns:igThemes="http://infragistics.com/Themes"

Add the base theme for the control to the MergedDictionaries collection of the ResourceDictionary to make sure the ControlTemplates will be loaded.

Add a ResourceWasher, which is a customized ResourceDictionary type used to modify Infragistics WPF controls theme resource dictionaries to the same MergedDictionaries collection. The ResourceWasher SourceDictionary property has to be set to the set of brushes to be washed. Although you can use all themes as source, we recommend using brush sets with names ending in WashBaseLight or WashBaseDark – we have set these up especially for resource washing. In case of XamDataGrid these two brush sets are DataPresenterWashBaseLightBrushes and DataPresenterWashBaseDarkBrushes. There are corresponding light and dark brush sets to be used when washing for XamRibbon and editors controls, as implemented in the sample project.

The ResourceWasher uses the WashColor color in the process of washing – this is the color which all color settings in the theme will approach. In more advanced scenarios, to be covered in a separate post, we can define WashGroups which can be washed using separate colors. This gives you extra flexibility and precision in coloring selected elements of controls.

There are two modes of color washing controlled by the WashMode property of the ResourceWasher – experiment and set the one which works best for you:

• HueSaturationReplacement - Replaces the hue and saturation values with the corresponding values from the wash color but retains the brightness value.
• SoftLightBlend - Blends each of the RGB color values with the corresponding wash color values.

What makes this approach quick is also that you don’t need to set any properties on the XamDataGrid control or write and user code to take advantage of resource washing. Just make sure you haven’t set its Theme property to one of the built-in themes, as it will override the color settings from the washing.

Summary

Resource washing is a powerful tool for quickly producing your own shades of standard themes to match the color scheme you have selected for your application or organization as a whole. It frees you from the limitations of standard theme colors, and truly helps you quickly and easily deliver the application you’re building in the exact colors the graphical designers would like to have it.