How to modify DX themes in WPF

Our controls present their appearance using templates. To provide an excellent appearance, we use complex templates with nested borders and gradient brushes. As a result, the controls' color cannot be changed via simple Style with one Setter as there are many visual elements with different brushes.

The purpose of this article to show users how to modify themes' templates. Themes' templates can be modified from version to version and sometimes it is necessary to find a new template that represent an element and replace the old one. We recommend modifying actual templates rather then try to use templates from an old version that can be found in our old tickets.

To modify our controls' appearance, it is necessary to find the necessary element's template, embed it in your application resources and modify it accurately without destroying our template's internal structure. If you modify our template structure, you can break some functionality. So, be careful.

The second point about our templates is that the same template is different for different themes. To implement your custom template for a specific theme (not the default DeepBlue theme), it is necessary to assign the ThemeName property in the template key. For example, this is our template for the RowIndicator in the default DeepBlue theme:

	
[XAML]
xmlns:dxgt="http://schemas.devexpress.com/winfx/2008/xaml/grid/themekeys"
...
<Window.Resources>
<DataTemplate x:Key="{dxgt:RowIndicatorThemeKey ResourceKey=IconPresenterTemplate}">
....
</DataTemplate>
</Window.Resources>

If you assign the Office2007Black theme, this template will not be applied. To create a template for Office2007Black, assign the ThemeName property:

	
[XAML]
xmlns:dxgt="http://schemas.devexpress.com/winfx/2008/xaml/grid/themekeys"
...
<Window.Resources>
<DataTemplate x:Key="{dxgt:RowIndicatorThemeKey ResourceKey=IconPresenterTemplate,ThemeName=Office2007Black}">
..
</DataTemplate>
</Window.Resources>

If do not need to create different templates for different themes and your custom template is a theme independent, simply set the IsThemeIndependent property to True:

	
[XAML]
xmlns:dxgt="http://schemas.devexpress.com/winfx/2008/xaml/grid/themekeys"
...
<Window.Resources>
<DataTemplate x:Key="{dxgt:RowIndicatorThemeKey ResourceKey=IconPresenterTemplate, IsThemeIndependent=true}">
..
</DataTemplate>
</Window.Resources>

Of course, the most interesting question is how to find the necessary template. There are two ways to do it in our WPF line: to use the Snoop tool and to use our ThemeEditor.

Let's start with the Snoop tool. The last version of this tool is available via the following link: Snoop. This tool allows you to research a control's visual tree. To learn how to get started with this tool, review Getting Started with Snoop

For an application using our controls, select the necessary element in the visual tree using the Ctrl+Shift+Mouse Click shortcut, review the element name or the nearest element name in a visual tree, and search for it in our source code.

Search for the necessary name in the control library folder, for example, for a GridControl, here:
"c:\Program Files (x86)\DXperience 12.1\Sources\DevExpress.Xpf.Grid"
If you use not default name, look for in the necessary theme folder, too:
"c:\Program Files (x86)\DXperience 12.1\Sources\DevExpress.Xpf.Themes"

The last step is to copy the template from our source code, embed it in your container resources (for example, Window.Resources) and change something. Remember that you need to use our default DeepBlue theme, to apply the modified template without assigning the template key ThemeName property.

In the attachment to this thread, you will find a video that illustrates how to use Snoop to modify our RowIndicator template. A sample itself is available here:How to provide any text for the RowIndicator

The second approach that is available from version v11.2 is to use our own Theme Editor. We have described this tool in our documentation very accurately, and in detail. You will find several topics on how to start using this tool at the following link:Theme Editor for WPF.

Refer to our Getting Started topic. It includes the "Creating a New Theme topic" that covers all necessary details about modifying our themes.