Header Image Customization

• Dec 16, 2019

This topic describes how to specify a column header image. The following image shows a grid column with a header image:

Specify the BaseColumn.Image property to add an image to the column header. The following code sample demonstrates how to use this property:

XAML

<dxg:GridColumn FieldName="CategoryName" Image="Image.png"></dxg:GridColumn>

You can set the BaseColumn.ImageAlignment property to specify the header image position:

XAML

<dxg:GridColumn FieldName="CategoryName" Image="Image.png" ImageAlignment="Far">

Note

Set the TableView.AllowPrintColumnHeaderImage (or TreeListView.AllowPrintColumnHeaderImage) property to true to enable printing a column header’s image.

Header Image Style

You can change the header’s image properties. The image below shows a grid column whose header has an image with changed sizes and margins:

Specify the BaseColumn.HeaderImageStyle property to change the column header’s image properties. Use the DataViewBase.ColumnHeaderImageStyle property to specify a common style applied to all columns in the current GridControl’s view. The target element for this style is the Image class.

The following code demonstrates how to change the header’s image properties:

XAML

<dxg:GridColumn FieldName="CategoryName" Image="Image.png">
   <dxg:GridColumn.HeaderImageStyle>
      <Style TargetType="Image">
         <Setter Property="Width" Value="25"></Setter>
         <Setter Property="Margin" Value="5,5,15,5"></Setter>
      </Style>
   </dxg:GridColumn.HeaderImageStyle>
</dxg:GridColumn>