Column header refers to the fixed row/s on the top of the grid which contains a caption string, sort glyph etc. In FlexGrid, by default, the top row with zero index is allocated for the column header.

Set column header and header text

WinUI FlexGrid control lets you set column header using the ColumnHeaders property of FlexGrid class. It helps to add column headers in unbound grid. Here, we have added 2 rows in column header and set text in cells of column header.

The code snippet below lets you specify the column header and set the header text:

// set unbound column headers
var ch = flexGrid1.ColumnHeaders;
ch.Rows.Clear();
ch.Rows.Add(new GridRow());
ch.Rows.Add(new GridRow());
for (int c = 0; c < ch.Columns.Count; c++)
// set column header text
{
    ch[0, c] = 2018 + c / 4; // year
    ch[1, c] = string.Format("Data for Quarter {0}", c % 4 + 1); // quarter
}

Merge column header

FlexGrid provides the AllowMerging property in GridRow class for Row object which specifies whether it is allowed to merge cells in a particular row (in this case, the header row) or not.

Use the code below to merge column headers in FlexGrid.

// allow merging
flexGrid1.AllowMerging = GridAllowMerging.All;
// allow merging of the first column header row
flexGrid1.ColumnHeaders.Rows[0].AllowMerging = true;

Wrap column header text

To wrap the text in column header, access the particular row and set its WordWrap property of GridRow class to true. Note that to view the wrapped text properly, you need to adjust the row height using the Height property of GridRow class.

Use the code below to wrap header text of the FlexGrid columns.

// Wrap column header text
flexGrid1.ColumnHeaders.Rows[1].WordWrap = true;
flexGrid1.ColumnHeaders.Rows[1].Height = new GridLength(80);

Style column header

To style the column header, you can access the ColumnHeaderBackground property of the FlexGrid class and set a solid color in the background using the SolidColorBrush method, and further, use the ColumnHeaderFontStyle to set a particular font style.

Some of other properties that can be used to style the column headers are ColumnHeaderFontFamily, ColumnHeaderFontSize, ColumnHeaderFontStyle, ColumnHeaderFontWeight, ColumnHeaderForeground etc.

Customize column header of the FlexGrid control using the code below.

// Style column header
SolidColorBrush colHeaderBrush = new SolidColorBrush(Windows.UI.Color.FromArgb(34, 124, 9, 9));
flexGrid1.ColumnHeaderBackground = colHeaderBrush;
flexGrid1.ColumnHeaderFontStyle = Windows.UI.Text.FontStyle.Italic;