Current filter:
                                You should refresh the page.
                                  • Important note

                                    Default styles and templates of our controls are responsible for control appearance in certain themes. We are constantly improving these styles and templates, so they may have different implementation in different versions of our controls. Such changes are not followed by additional notifications and you may face difficulties in the future after an upgrade to a new version, since styles and templates may be overridden in it.

                                    If you use the Theme Editor and custom themes, differences between your custom and actual implementation in default resources can be resolved during the theme upgrading process with the help of the KDiff3 tool. However, in case you use customized styles and templates in your application directly, you need to pay special attention to overridden resources when upgrading your controls to a different version. Use this approach only if customization of the required element cannot be accomplished using documented members.

                                    How to find a required template/style.

                                    1. In general, to find a required template, it is necessary to iterate through a visual tree of a control and then find a required element in our source code (it can be found in the "\DevExpress XX.X\Components\Sources"folder).
                                    Let’s assume that your task is to change the GridControl filter icon.

                                    The first step to accomplish this task is to find an element in an application visual tree.
                                    The most commonly used tool for researching a visual tree of  WPF applications is Snoop. To find the required template using this tool,
                                    start an application that shows the required filter icon and find of which elements it consists using Snoop:

                                    The icon is represented by the Grid control, which contains four Path controls. Now let's find a template that contains all these elements in DevExpress resources.

                                    In this tutorial, Notepad++ is used for this task, but you can use any other tool that supports searching for files by their content (e.g. Visual Studio's built-in search). As an element is related to GridControl, it makes sense to search only in the GridControl folder, for example: "DevExpress.Xpf.Themes.Office2013\DevExpress.Xpf.Grid". The following screenshot illustrates how to find a required template:

                                    In this particular case, the search string is complex, but usually there are elements with names in the visual tree besides the element you are searching for, and you can easily find the required template by using these names.

                                    2. Another useful tool to search for a required element is our ThemeEditor. Create a temporary custom theme (you can delete this theme later) and navigate through the visual tree of an element as described in this article. Using this tool, you can see the whole visual tree of the control you are iterating through and find an element that is related to the part of the control you wish to change. In this application, you can change a template/style and see how this change affects the control. As a visual tree of one element can be different in different themes, create a temporary theme based on the one you are using in your application.

                                    Finding resources with this approach without some experience is a quite complex task, so if you face any difficulties customizing a specific element, do not hesitate to contact DevExpress support. We will find the simplest approach to change the appearance of this element.

                                    How to change a template/style.

                                    Now you have a required template/style and can change a required element or a property of the element as you wish. Please note, however, that elements in styles/templates are used by elements in other styles/templates or in code behind, therefore, follow these rules to avoid problems:

                                    1. Do not remove elements whose names start with 'PART_" and don't change such names. These elements are used in code behind and removing them leads to an application crash. In case you wish to make such an element invisible in your application, set this element's Visibility property to "Collapse" (note that this approach won't work in a scenario described in the next point).
                                    2. Sometimes the Visibility property of such "PART_" editors is changed in code behind; therefore, setting this property from styles/templates doesn't have any effect. In this case, to hide such an element, set its Opacity property to "0".
                                    3. Avoid removing elements; this can lead to an exception or incorrect operation.
                                    4. Do not remove elements from complex brushes like:
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFD1E4FC" Offset="0" /> <GradientStop Color="#FFAED1F6" Offset="1" /> <GradientStop Color="#FFB5D0F1" Offset="0.5" /> <GradientStop Color="#FFA4C5ED" Offset="0.5" /> </LinearGradientBrush>

                                    Such GradientStop elements are used in animation and removing one of them can lead to an exception.

                                    Note also that elements like "cs:Name="Grid_0001"" are not required so feel free to remove them.

                                    <Grid Background="#00000000" Margin="0,-2,0,0" Width="13" Height="13" cs:Name="Grid_0001">

                                    How to apply a changed template.

                                    Now you have a changed style/template, which can be inserted in your application. To do this, copy the style/template into your application. The main requirements here are that the style/template should be visible for the target element. Therefore, templates/styles that are used in popups should be placed into App.xaml resources. Note that often styles/templates use static resources (e.g. brushes, converters, etc), so, to make a style/template work, you need to copy these resources as well. Copy namespaces that are used in the style/template and check that all assemblies are referenced in your project.

                                    Note that ThemeKeyExtensionBase<T> descendants are used as resource keys to support the theming mechanism. So, to make your templates work in all themes, set the IsThemeIndependent property to True:

                                    <ControlTemplate x:Key="{dxgt:GridColumnHeaderThemeKey ResourceKey=ColumnFilterTemplate,IsThemeIndependent=true}"

                                    If you want the template to have different appearance in different themes, create templates for each theme you are planning to use and set the ThemeName property for each of these templates accordingly.

                                    <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>

                                    If you face any difficulties with changing our templates, do not hesitate to contact us. Describe what element you wish to change and how it should look like (or provide a simple sketch). In addition, describe at what exactly step you faced the problems, so we will be able to improve this guide.

                                    If you successfully changed the required element, please drop us a line about what element you changed and why. This way, we will be able to understand what parts of our components are often changed and provide built-in mechanisms for their customization.

                                Show all comments
                                • RAJIB BANERJEE 5 03.08.2018

                                  How do I change the Background of a DockLayoutManager ?

                                • Michael Ch (DevExpress Support) 03.09.2018


                                  I've created a separate ticket on your behalf (T614249: How to change the Background of a DockLayoutManager). It has been placed in our processing queue and will be answered shortly.

                                • Mayssa Amri 03.18.2019


                                  Please How can I make the drag and drop property in column chooser works with all themes ?
                                  I set the property AllowDragDrop to True but it does not work .

                                  Any suggesion please  ?


                                • Alexander Rus (DevExpress Support) 03.18.2019

                                  Hello Mayssa,
                                  It seems that your question is not directly related to the ticket subject, so I have created a separate ticket on your behalf:
                                  How to enable Drag&Drop in the column chooser for all themes
                                  Let's continue our conversation in that thread.


                                • Michael Schreiber 08.27.2019

                                  To right click on the related control in the designer or document outline in Visual Studio and selecting "Edit Template" and creating a copy seems to be a less complicated way to find the template. It only requires to select the desired theme for the designer by setting the theme e.g. via

                                  dx:ThemeManager.Theme="{dx:Theme Name=Office2019White}"

                                  I wonder why this method is not described. Is this not a valid approach?

                                • Kirill (DevExpress Support) 08.27.2019

                                  Although this approach is generally correct, it cannot be used in the case of our controls. Our controls use theme-dependent resources and special optimized templates (RenderTemplates) which cannot be correctly obtained using this approach. Moreover, the approach with the "Edit Template" option allows editing only the root template. So, we don't recommend using it to modify our templates.


                                0 Solutions

                                Creation Date Importance Sort by