wpf-403598-common-concepts-themes-customize-devexpress-theme-resources.md
You can customize a visual element’s theme resources (brushes, thicknesses, colors, styles, templates, and so on) as described below.
If you use the DevExpress WPF Controls NuGet packages, you should additionally install DevExpress WPF Controls on your machine. The installation includes the DevExpress WPF Themes source code.
The WPF Theme Designer is a standalone tool that allows you to create custom themes based on built-in DevExpress WPF Application Themes.
To change a theme resource with the WPF Theme Designer, perform the following steps:
Topic : WPF Theme Designer - Create and Apply a New Custom Theme.
You can copy theme resources[1] from the DevExpress WPF Controls source code to your application, modify these theme resources, and use them as a XAML resources in your project.
To access an element’s theme resource[1], locate this element in your application’s visual tree. You can use Visual Studio’s Live Visual Tree, Snoop (used in this topic), the WPF Theme Designer Inspect Element tool, or another tool that analyzes the visual tree.
This article shows how to search for a template that defines the GridColumn filter icon’s appearance:
Path items.Use the item’s unique attributes to identify the item you want to change: control type, name, or property. This sample uses the Path’s Data property.
Locate the element in the source code of the DevExpress WPF Theme whose appearance you want to change. You can use the Visual Studio’s built-in search tool (used in this topic), the WPF Theme Designer’s Individual Colors window, or another tool that can search for text in files.
Follow the steps below to locate the GridColumn filter icon’s template in the Office2016White theme’s source code.
C:\Program Files\DevExpress 25.2\Components\Sources\XPF\DevExpress.Xpf.Themes\Office2016White\Office2016White.csproj.Data property value is F1 M 1296.5.When you modify theme resources, your modifications may affect DevExpress WPF Controls and lead to exceptions, incorrect operation, and other issues. To avoid these issues, we recommend that you follow the instructions below.
Do not remove elements whose names start with PART_ and do not change the names/types of these elements. DevExpress WPF Controls may use them in code-behind.
DevExpress WPF Controls may change the Visibility of PART_ editors in code-behind. Do not modify the Visibility property in those theme resources[1]. To hide these elements , set their Opacity property value to 0.
Do not remove elements from complex brushes. Animated DevExpress WPF Controls use these elements.
DevExpress WPF Controls may contain the cs:Name attribute. You should remove it from your custom theme resource or specify the following XML namespaces to ignore it:
Paste modified theme resources[1] to resources of the target element (control, window, or an application) and choose one of the following options:
To apply modified resources to all DevExpress WPF Themes , set the resource’s IsThemeIndependent property to true.
To modify resources for a specific theme , specify the resource’s ThemeName property.
If you do not specify a resource’s IsThemeIndependent or ThemeName properties, the resource is applied in the DeepBlue theme only.
The modified theme resource[1] should meet the following requirements:
Make sure that the theme resource is visible for its target element.
Reference assemblies and copy namespaces that the theme resource uses.
Place theme resources used in popups and MessageBoxes in the App.xaml resources.
If a theme resource uses static resources (Brushes, Converters, and others), you should also copy them to your application.
ThemeName property for each created theme resource.The following code sample uses different templates for Office2013 and MetropolisDark application themes:
<Window ...
xmlns:dxgt="http://schemas.devexpress.com/winfx/2008/xaml/grid/themekeys">
<Window.Resources>
<ControlTemplate x:Key="{dxgt:GridColumnHeaderThemeKey ResourceKey=ColumnFilterTemplate,ThemeName=Office2013}" TargetType="{x:Type ToggleButton}">
<!-- ... -->
</ControlTemplate>
<ControlTemplate x:Key="{dxgt:GridColumnHeaderThemeKey ResourceKey=ColumnFilterTemplate,ThemeName=MetropolisDark}" TargetType="{x:Type ToggleButton}">
<!-- ... -->
</ControlTemplate>
</Window.Resources>
</Window>
An original theme resource may use the theme’s dynamic resources:
<Window ...
xmlns:dxgt="http://schemas.devexpress.com/winfx/2008/xaml/grid/themekeys">
<Window.Resources>
<ControlTemplate ...>
<Grid>
<Border BorderBrush="{DynamicResource {dxgt:TableViewThemeKey ResourceKey=ColumnChooserBorderBrush}}">
</Grid>
</ControlTemplate>
<Window.Resources>
</Window>
If you specify your modified resource’s IsThemeIndependent property, it still uses resources from the default theme (DeepBlue). To use resources from the applied theme , perform the following steps:
dxi="http://schemas.devexpress.com/winfx/2008/xaml/core/internal" XAML namespace.DynamicResource to a dxi:ThemeResource. The ThemeResource markup extension dynamically sets its target property to a resource from the target element’s applied theme. The target element must be in your application’s visual tree.The following code sample sets the Border’s (TargetElement) BorderBrush (TargetProperty) property value to a resource (ThemeKey) from the target element’s applied theme:
<Window ...
xmlns:dxi="http://schemas.devexpress.com/winfx/2008/xaml/core/internal"
xmlns:dxgt="http://schemas.devexpress.com/winfx/2008/xaml/grid/themekeys">
<Window.Resources>
<ControlTemplate ...>
<Grid>
<Border BorderBrush="{dxi:ThemeResource {dxgt:TableViewThemeKey ResourceKey=ColumnChooserBorderBrush}}">
</Grid>
</ControlTemplate>
<Window.Resources>
</Window>
View Example: Load Resources from DevExpress Themes Dynamically with the ThemeResource extension
Note
The ThemeResource markup extension is explicitly not supported for the standard WPF DataGrid.
Footnotes