WinUI | ComponentOne
Controls / FlexGrid / Column / Sizing
In This Topic
    In This Topic

    Set column width

    FlexGrid provides the DefaultSize property of GridRowColCollection class to set the default column width across the grid. You can also specify the width of a particular column by setting the Width property of GridColumn class.

    Use the code below to set the column width of all columns and a particular column of the FlexGrid.

    Copy Code
    // Set Column Width(all Columns)
    flexGrid1.Columns.DefaultSize = new GridLength(60);
    // Set Column Width(particular Column)
    flexGrid1.Columns[1].Width = new GridLength(80);

    Auto-adjust column width

    To adjust the column width according to the text length, FlexGrid provides the Width property of GridColumn class. To enable auto-adjust column width, set the GridLength struct to Auto. The GridLength struct is used to represent a measurement for control logic that explicitly supports **Star** (`*`) sizing and **Auto** sizing.

    Following code shows how you can auto adjust the column widths according to the text length in the FlexGrid.

    Copy Code
    // Auto - adjust Column Width
    flexGrid1.Columns[0].Width = GridLength.Auto;

    Set minimum or maximum column width

    FlexGrid allows you to set bounds to the column width by using the MinWidth and MaxWidth properties of GridColumn class. To restrict the widths from getting too narrow or too wide, you can set the MinWidth and MaxWidth properties.

    Specify the bounds of column width in the FlexGrid using the code below.

    Copy Code
    // Set Min Column Width
    flexGrid1.Columns[2].MinWidth = 150;
    // Set Max Column Width
    flexGrid1.Columns[2].MaxWidth = 250;

    Adaptive Layout (Star Sizing)

    Star sizing refers to proportional sizing of grid columns to occupy the available space, so that layout of grid remains same even on resizing. For instance, consider a grid with 5 columns whose star sizes are specified as "*", "3*", "2*", "*" and "*". In this case, first, fourth and fifth column always take the same width and grid allocates thrice the width of first column to the second and twice the width to third column.

    FlexGrid provides the Width property of GridColumn class to specify the star sizes of columns using the GridLength (double value, Microsoft.UI.Xaml.GridUnitType type) method. The GridUnitType enumeration describes the kind of value that a GridLength object is holding. For responsive star sizing, the GridUnitType is set to Star, that is the value, which is expressed as a weighted proportion of available space.

    Set star sizing or proportional sizing in the FlexGrid columns using the code below.

    Copy Code
    // Star Sizing
    flexGrid1.Columns[3].Width = new GridLength(1, GridUnitType.Star);