Row header refers to the fixed row/s on the left hand side of the grid which may or may not contain the caption string. In FlexGrid, by default, the left most column with zero index is allocated for the row header.

Set row header

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

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

// バインドされていない行のヘッダを設定します
var rh = flexGrid1.RowHeaders;
rh.Columns.Clear();
rh.Columns.Add(new GridColumn());
rh.Columns.Add(new GridColumn());
for (int c = 0; c < rh.Columns.Count; c++)
{
    for (int r = 0; r < rh.Rows.Count; r++)
    // 行ヘッダーのテキストを設定します
    {
        rh[r, c] = string.Format("Header {0},{1}", c == 0 ? r / 2 : r, c);
        rh[r, 1] = string.Format("Row {0}", r + 1);
    }
    rh.Columns[c].Width = new GridLength(60);
}

Merge row header

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

Use the code below to merge row headers in FlexGrid.

// マージを許可します
flexGrid1.AllowMerging = GridAllowMerging.All;
// 最初の固定列をマージできるようにします
flexGrid1.RowHeaders.Columns[0].AllowMerging = true;

Wrap row header text

To wrap the text in column header, access the particular row and set its WordWrap property of GridColumn class to true.

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

// 行ヘッダのテキストを折り返します
flexGrid1.RowHeaders.Columns[0].WordWrap = true;

Style row header

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

Some of other properties that can be used to style the column headers are RowHeaderFontFamily, RowHeaderFontSize, RowHeaderFontStyle, RowHeaderFontWeight, RowHeaderForeground etc.

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

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