Theming your Infragistics WPF Line of Business Applications – Quick and Customizable

[Infragistics] Kiril Matev / Friday, September 03, 2010

In an earlier post we looked at a quick and easy way to theme your Infragistics WPF Line of Business applications. The approach basically came down to specifying a single color setting, with all Infragistics WPF Line of Business controls being themed in shades of this color, preserving the differences in shade in the elements within a single control.

However, the approach described did not allow any control over the coloring of elements making up the control. Every element of the controls was washed using the same color and washing mode. This blog post presents a more refined approach, namely one allowing you to set different wash colors for different elements in the control being themed. The approach has been implemented in a sample project built with Visual Studio 2010, and Infragistics NetAdvantage for WPF 10.3. The sample project includes trial versions of all the libraries you need to run it. You can download a fully-functional trial version here.

The sample project consists of two forms, which feature all NetAdvantage for WPF controls that can be themed using resource-washing, and sets customized wash colors for some of their elements and behaviors. Please run the sample project and experiment with the color setting for the different WashGroups and the different controls to achieve the appearance you desire. Here's a screenshot of the sample application, featuring two windows with Infragistics NetAdvantage for WPF controls, flexibly themed using resource-washing:

Customized Resource Washing

The customized resource-washing approach relies on WashGroups, which specify the name of an element or behavior to be styled, and the WashColor to be used in the washing. WashGroups are fed into the WashGroups property of the ResourceWasher object. Here’s an example:

<Grid.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <!--xamdatagrid theme washing - importing the xamdatagrid base theme-->
            <igThemes:DataPresenterWashBaseDark />
            <igThemes:ResourceWasher
                 AutoWash="True" WashColor="LightBlue" WashMode="HueSaturationReplacement">
                <igThemes:ResourceWasher.SourceDictionary>
                    <!--set of brushes to be washed for the xamdatagrid-->
                    <igThemes:DataPresenterWashBaseDarkBrushes />
                </igThemes:ResourceWasher.SourceDictionary>
                <igThemes:ResourceWasher.WashGroups>
                    <igThemes:WashGroupCollection>
                        <!-- Specify WashColors for each WashGroup in the Theme.
                         The WashGroups are the same in all XamDataGrid themes. -->
                        <igThemes:WashGroup Name="HoverColor" WashColor="LightYellow"/>
                        <igThemes:WashGroup Name="ActiveColor" WashColor="Orange"/>
                        <igThemes:WashGroup Name="SelectedColor" WashColor="OrangeRed"/>
                    </igThemes:WashGroupCollection>
                </igThemes:ResourceWasher.WashGroups>
            </igThemes:ResourceWasher>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Grid.Resources>

Each of the WashGroups specifies the WashColor that will be used to wash a specific element or behavior of the control. The appearance resulting from the above code is shown below:

Control Elements and Behaviors Capable of Being Resource-Washed Separately

So, which elements and behaviors of the Infragistics NetAdvantage for WPF controls can be themed separately? Here’s a list of these elements and behaviors for these controls:

DataPresenter (used in XamDataGrid, XamDataCards)
ThemeColor
HoverColor
ActiveColor
SelectedColor

XamDockManager
ThemeColor
AlternateColor

Editors
ThemeColor
AlternateColor

XamOutlookBar
ThemeColor
Hover

XamTabControl
Hover
Pressed
Selected
SelectedHover

XamRibbon
BaseColor
Caption
TabArea
Hover
Text
Pressed
IsChecked
CheckBox
HeaderPanel
Editors

XamTilesControl
BaseColor
Text
Hover
Pressed

Summary

This refined approach allows you to take advantage of the quick effect of resource washing by setting a single WashColor property, and still be in control of theming individual elements and behaviors. It helps you quickly achieve the exact appearance you desire from Infragistics NetAdvantage for WPF controls.

If you have any questions, do not hesitate to email me at kmatev@infragistics.com