Skip to main content

DataViewBase.ColumnHeaderTemplate Property

Gets or sets the template that defines the presentation of column header content. This is a dependency property.

Namespace: DevExpress.Xpf.Grid

Assembly: DevExpress.Xpf.Grid.v22.2.Core.dll

NuGet Package: DevExpress.Wpf.Grid.Core

Declaration

public DataTemplate ColumnHeaderTemplate { get; set; }

Property Value

Type Description
DataTemplate

A DataTemplate object that defines the presentation of column header contents.

Remarks

The main part of a header’s content is a caption. You can change this caption and add different elements to a header content.

ColumnHeaderCustomizationContent

Customize Header Caption

The image below shows a grid column with a changed header caption:

ColumnHeaderCustomizationHeader

Specify the BaseColumn.Header property to change the column header’s caption. If the BaseColumn.Header property isn’t specified, a column header’s caption is specified by the ColumnBase.FieldName property. Camel-case field names are split with spaces, e.g., the header for the “CategoryName” field name is “Category Name”. The following code sample demonstrates how to use this property:

<dxg:GridColumn FieldName="CategoryName" Header="Category" HorizontalHeaderContentAlignment="Center"></dxg:GridColumn>

You can obtain the actual column header’s caption by using the BaseColumn.HeaderCaption property.

Tip

Use the BaseColumn.HorizontalHeaderContentAlignment property to specify the column header’s content alignment.

Specify Custom Content

The image below shows a grid column whose header contains a button:

ColumnHeaderCustomizationHeaderTemplate

Specify the BaseColumn.HeaderTemplate property to customize header content for an individual column. You can specify a common template applied to all columns displayed in the current GridControl’s view by using the ColumnHeaderTemplate. The data context (binding source) for these templates is the BaseColumn.HeaderCaption property.

The following code sample demonstrates how to change column header’s content:

<dxg:GridColumn FieldName="CategoryName">
   <dxg:GridColumn.HeaderTemplate>
      <DataTemplate>
         <StackPanel>
            <TextBlock Text="{Binding}"></TextBlock>
            <Button Content="Button" Margin="0,5,0,0"></Button>
         </StackPanel>
      </DataTemplate>
   </dxg:GridColumn.HeaderTemplate>
</dxg:GridColumn>

View Example: Display an Image within a Column Header

If you have more than one template that can be used to render header content, specify the BaseColumn.HeaderTemplateSelector property to implement custom logic for choosing the required template. Use the BaseColumn.ActualHeaderTemplateSelector property to obtain the actual template selector.

Specify Custom Content for Headers in the Column Chooser

This example adds the Click button to the Id column’s header when it is displayed in the Column Chooser.

Grid - Custom Content for the Column Chooser Header

<Window.Resources>
    <DataTemplate x:Key="columnChooserTemplate">
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="{Binding}"/>
            <Button Content="Click" Margin="5,0,0,0"/>
        </StackPanel>
    </DataTemplate>

    <local:HeaderTemplateSelector x:Key="headerTemplateSelector" 
                                  ColumnChooserTemplate="{StaticResource columnChooserTemplate}"/>
</Window.Resources>

<dxg:GridControl x:Name="grid" AutoGenerateColumns="AddNew">
    <dxg:GridControl.View>
        <dxg:TableView x:Name="view" ColumnHeaderTemplateSelector="{StaticResource headerTemplateSelector}"/>
    </dxg:GridControl.View>
</dxg:GridControl>
public class HeaderTemplateSelector : DataTemplateSelector {
    public DataTemplate ColumnChooserTemplate { get; set; }
    public override DataTemplate SelectTemplate(object item, DependencyObject container) {
        if (ColumnBase.GetHeaderPresenterType(container) == HeaderPresenterType.ColumnChooser && (string)item == nameof(Item.Id))
            return ColumnChooserTemplate;
        return base.SelectTemplate(item, container);
    }
}

Specify Header Content Style

The image below shows a grid column whose header caption is red and has an increased font size:

ColumnHeaderCustomizationContentStyle

Specify the ColumnBase.ColumnHeaderContentStyle property to change a column header content’s appearance. Use the DataViewBase.ColumnHeaderContentStyle property to specify a common column header content’s style applied to all columns displayed in the current GridControl’s view. The target element for these styles is ContentControl class.

The following code sample demonstrates how to change a header caption’s color and increase the font size:

<dxg:GridColumn FieldName="CategoryName">               
   <dxg:GridColumn.ColumnHeaderContentStyle>
      <Style TargetType="{x:Type ContentControl}">
         <Setter Property="FontSize" Value="15" />
         <Setter Property="Foreground" Value="Red" />                        
      </Style>
   </dxg:GridColumn.ColumnHeaderContentStyle>                
</dxg:GridColumn>

Use the ColumnBase.ActualColumnHeaderContentStyle property to obtain a column header content’s style which is currently used by a column.

The following code snippet (auto-collected from DevExpress Examples) contains a reference to the ColumnHeaderTemplate property.

Note

The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.

See Also