This topic introduces you to the ResourceWasher™ component where you learn to change the overall color schemes of your applications.
This document contains the following sections:
The following table lists the prerequisites required for this topic:
The table below lists the main features of the ResourceWasher component.
The ResourceWasher component requires you to specify the SourceDictionary and the WashColor properties.
In order to use the washer, you must set the SourceDictionary property to a dictionary that contains the resources to wash. The ResourceWasher makes a copy of the resources and changes the colors in the copy according to the rules you’ve specified by setting WashColor and WashMode. You can set the SourceDictionary either in XAML or in code.
In XAML:
<ig:ResourceWasher
x:Name="resWasher1" AutoWash="True" WashColor="Purple">
<ig:ResourceWasher.SourceDictionary>
<ResourceDictionary
Source="/;component/Common/Themes/IG/IG.xamPivotGrid.xaml" />
</ig:ResourceWasher.SourceDictionary>
</ig:ResourceWasher>
In C#:
ResourceDictionary resXamGrid = new ResourceDictionary();
resXamGrid.Source =
new System.Uri("/;component/Common/Themes/IG/IG.xamPivotGrid.xaml");
resWasher1.SourceDictionary = resXamGrid;
To facilitate color washing, set the WashColor property to the Color designated for washing.
Note: The default value is Transparent and in that case the resources are not washed at all.
Based on the WashMode property the ResourceWasher supports two modes:
HueSaturationReplacement - Replaces the hue and saturation values with the corresponding values from the wash color but retains the brightness value.
SoftLightBlend – this is the default value - Blends each of the RGB color values with the corresponding wash color values.
After you define a ResourceWasher you can control when the process of cloning the resources that happens by setting the AutoWash property. You can leave its default value (True) if you want the washed resources to be available immediately after the loading of the ResourceWasher’s SourceDictionary. If you need the resources to wash at a later time, set AutoWash to False and use the WashResources method when the new cloned resources are needed.
The following sample defines a ResourceWasher in XAML and on one Button’s Click event sets the Source dictionary to the page resources and executes the WashResources method.
In XAML:
<ig:ResourceWasher x:Name="resWasher1" WashColor="Red" AutoWash="False" />In C#:
private void btnWash_Click(object sender, System.Windows.RoutedEventArgs e)
{
resWasher1.SourceDictionary = this.Resources;
resWasher1.WashResources();
}Sometimes you may need to wash different resources in different colors or you may need to wash only a part of the resources in one dictionary. Selective washing is achieved by separating the resources in different dictionaries and use several ResourceWashers in your app. However there is another more elegant way to achieve this with only one ResourceWasher instance – by using WashGroups.
When you create your styling resources you can use the attached property WashGroup (defined in the ResourceWasher class) to group the individual elements in order to wash them separately. Another useful attached property is IsExcludedFromWash . When you set it to True the style is not processed at all by the ResourceWasher.
In XAML:
<Page.Resources>
<SolidColorBrush x:Key="Background1" Color="Wheat"
ig:ResourceWasher.WashGroup="WashGroup1"
ig:ResourceWasher.IsExcludedFromWash="False" />
<SolidColorBrush x:Key="Background2" Color="BlueViolet"
ig:ResourceWasher.WashGroup="WashGroup2"
ig:ResourceWasher.IsExcludedFromWash="False" />
<SolidColorBrush x:Key="Background3" Color="Honeydew"
ig:ResourceWasher.WashGroup="WashGroup3"
ig:ResourceWasher.IsExcludedFromWash="True" />
<SolidColorBrush x:Key="Background4" Color="Orange"
ig:ResourceWasher.WashGroup="WashGroup4"
ig:ResourceWasher.IsExcludedFromWash="False" />
</Page.Resources>
Once you have attached groups to some of your resources you can use just one ResourceWasher and define the rules for washing for each WashGroup. You can specify a WashMode and WashColor for each group individually and also define a global rule for all elements in the ResourceDictionary. The rules (WashColor and WashMode) defined in the ResourceWasher apply to all elements in the dictionary and get overridden only for the groups defined in the WashGroups collection.
You should add the separate WashGroup objects in a WashGroupCollection and set this collection to the ResourceWasher’s WashGroups property.
In XAML:
<ig:ResourceWasher x:Name="resWasher1" WashColor="Red">
<ig:ResourceWasher.WashGroups>
<ig:WashGroupCollection>
<!--This one will be washed in Red-->
<ig:WashGroup Name="WashGroup1" />
<!--This one will override the Red and will be washed in Blue-->
<ig:WashGroup Name="WashGroup2" WashColor="Blue" />
<!--This one will NOT be washed at all because it is defined as
IsExcludedFromWash="True"-->
<ig:WashGroup Name="WashGroup3" />
</ig:WashGroupCollection>
<!--WashGroup4 will be washed in red as it is a part of
the ResourceDictionary Washed-->
</ig:ResourceWasher.WashGroups>
</ig:ResourceWasher>
Following are some other topics you may find useful.