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:

// バインドされていない列のヘッダを設定します
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++)
// 列ヘッダのテキストを設定します
{
    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.

// マージを許可します。
flexGrid1.AllowMerging = GridAllowMerging.All;
// 最初の列ヘッダの行のマージを許可します
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.

// 列ヘッダのテキストを折り返します
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.

// 列ヘッダのスタイルを設定します
SolidColorBrush colHeaderBrush = new SolidColorBrush(Windows.UI.Color.FromArgb(34, 124, 9, 9));
flexGrid1.ColumnHeaderBackground = colHeaderBrush;
flexGrid1.ColumnHeaderFontStyle = Windows.UI.Text.FontStyle.Italic;