Customize Header Layout

• Feb 14, 2019
• 2 minutes to read

You can customize a column header layout to rearrange its elements. The following image shows a layout change:

The following code sample demonstrates how to rearrange column header elements as shown in the image above:

XAML

<dx:ThemedWindow.Resources>
   <ControlTemplate x:Key="{dxgt:GridColumnHeaderThemeKey ResourceKey=Layout, IsThemeIndependent=True}">            
      <Grid>
         <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="4"></ColumnDefinition>
         </Grid.ColumnDefinitions>
         <StackPanel Orientation="Horizontal">
            <ContentControl Name="PART_Filter" VerticalAlignment="Center" />
            <ContentControl Name="PART_Content" VerticalAlignment="Center" Margin="5,0,0,0" />
            <dxg:SortIndicatorControl Name="PART_SortIndicator" Visibility="Collapsed" />
            <Image Source="{Binding Image}" Margin="10,4,0,4" />
         </StackPanel>
         <dxg:GridThumb Name="PART_Thumb" Cursor="SizeWE" />
      </Grid>
   </ControlTemplate>
</dx:ThemedWindow.Resources>

Follow the steps below to customize a column header layout:

1. Specify a theme resource value manually by adding a template with the corresponding key to resources (the data context for this template is the BaseColumn class):

   XAML

   <dx:ThemedWindow.Resources>
      <ControlTemplate x:Key="{dxgt:GridColumnHeaderThemeKey ResourceKey=Layout, IsThemeIndependent=True}">
         <!---->  
      </ControlTemplate>
   </dx:ThemedWindow.Resources>
   

2. To specify individual themes’ appearance, create templates for each theme and set each template’s ThemeName property accordingly:

   XAML

   <ControlTemplate x:Key="{dxgt:GridColumnHeaderThemeKey ResourceKey=Layout,ThemeName=Office2016}">
      <!----> 
   </ControlTemplate>
   <ControlTemplate x:Key="{dxgt:GridColumnHeaderThemeKey ResourceKey=Layout,ThemeName=MetropolisDark}">
      <!----> 
   </ControlTemplate>
   

3. Specify the required column header layout using panel elements (for example, StackPanel, DockPanel, Grid, etc.):

   XAML

   <ControlTemplate x:Key="{dxgt:GridColumnHeaderThemeKey ResourceKey=Layout, IsThemeIndependent=True}">
      <Grid>
         <!----> 
      </Grid> 
   </ControlTemplate>
   

4. Add the required elements to the specified layout. You can use predefined elements with the following names:

   • PART_Content - a column header content.
   • PART_Filter - a filter button.
   • PART_SortIndicator - a sort glyph.
   • PART_Thumb - a thumb that is used to resize columns.