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

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. 

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.

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