Inner Column Header Template Customization

• Jun 24, 2026
• 2 minutes to read

You can modify column header appearance using built-in templates. Locate the required element’s template, embed it in your application’s resources, and modify it without compromising the template’s internal structure. The image below demonstrates an example of a grid column with a modified column header filter button:

The following example changes column header filter button appearance:

XAML

<dx:ThemedWindow.Resources>
   <ControlTemplate x:Key="{dxgt:GridColumnHeaderThemeKey ResourceKey=ColumnFilterTemplate, IsThemeIndependent=True}"      
                    TargetType="{x:Type ToggleButton}">
      <Image Source="Filter.png" Width="16" Height="16" />
   </ControlTemplate>
</dx:ThemedWindow.Resources>

Refer to the following help topic for more information: Modify Theme Resources.

Replace the Filter Popup Glyph

To replace only the filter popup glyph (the predefined icon displayed in a column header when the filter popup is hidden) without redefining the entire filter button template, assign a ControlTemplate to the DataViewBase.FilterPopupGlyphTemplate property. To replace the glyph in an individual column header, use the ColumnBase.FilterPopupGlyphTemplate property. The column-level template has higher priority than the view-level template.

The following example assigns a custom icon as the filter popup glyph for all column headers in the TableView:

XAML

<dx:ThemedWindow xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
                 xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid">
    <dx:ThemedWindow.Resources>
        <ControlTemplate x:Key="CustomFilterGlyph">
            <Path Data="M 0,0 L 8,0 L 5,4 L 5,8 L 3,8 L 3,4 Z"
                  Fill="{Binding Path=(TextBlock.Foreground),
                                 RelativeSource={RelativeSource AncestorType=ContentPresenter}}"
                  HorizontalAlignment="Center"
                  VerticalAlignment="Center"
                  Stretch="Uniform"
                  Width="10" Height="10"/>
        </ControlTemplate>
    </dx:ThemedWindow.Resources>
    <dxg:GridControl ItemsSource="{Binding Orders}">
        <dxg:GridControl.View>
            <dxg:TableView FilterPopupGlyphTemplate="{StaticResource CustomFilterGlyph}"/>
        </dxg:GridControl.View>
    </dxg:GridControl>
</dx:ThemedWindow>

To replace the glyph for a selected column only, assign the template to that column’s FilterPopupGlyphTemplate property instead:

XAML

<dxg:GridControl.Columns>
    <dxg:GridColumn FieldName="ShipDateTime" Header="Ship Date &amp; Time"
                    FilterPopupGlyphTemplate="{StaticResource CustomFilterGlyph}"/>
    <dxg:GridColumn FieldName="CustomerName" Header="Customer"/>
</dxg:GridControl.Columns>