.NET MAUI DataGrid Columns Width

This article describes how to set a width to the .NET MAUI DataGrid column using the SizeMode and Width properties.

• SizeMode(DataGridColumnSizeMode)—Defines the DataGridColumnSizeMode value that controls how the column and its associated cells are sized horizontally.
  • Fixed—The column has a fixed width as defined by its Width property.
  • Stretch—The column is stretched to the available width proportionally to its desired width.
  • Auto—The columns is sized to its desired width. That is the maximum desired width of all associated cells.
• Width(double)—Specifies the fixed width for the column. Applicable when the SizeMode property is set to DataGridColumnSizeMode.Fixed.

• MinimumWidth(double)—Specifies the minimum width of a column. This property is applicable when setting SizeMode column property to Fixed. When MinimumWidth is set, you can not reduce the width of the column to a value lower than the MinimumWidth.

• ActualWidth (double): Gets the actual width of the column.

Example

In this example, we are going to use the following business object:

public class Data
{
    public string Country { get; set; }

    public string Capital { get; set; }
}

After you have created your collection of custom objects, you should assign it to the ItemsSource property of the control:

this.grid.ItemsSource = new List<Data>
{
    new Data { Country = "Columbia", Capital = "Bogota" },
    new Data { Country = "Germany", Capital = "Berlin" },
    new Data { Country = "Italy", Capital = "Rome" },
    new Data { Country = "France", Capital = "Paris" },
    new Data { Country = "Bulgaria", Capital = "Sofia" },
};

First Scenario when SizeMode="Fixed":

<telerik:RadDataGrid x:Name="grid" AutoGenerateColumns="False">
    <telerik:RadDataGrid.Columns>
        <telerik:DataGridTextColumn PropertyName="Country" HeaderText="Country" Width="100" SizeMode="Fixed"/>
        <telerik:DataGridTextColumn PropertyName="Capital" HeaderText="Capital" Width="200" SizeMode="Fixed"/>
    </telerik:RadDataGrid.Columns>
</telerik:RadDataGrid>

Where the telerik namespace is the following:

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

The Width property of columns will apply only when SizeMode="Fixed".

The first and second columns have set widths of 100 and 200, respectively:

Second Scenario when SizeMode="Stretch":

<telerik:RadDataGrid x:Name="grid" AutoGenerateColumns="False">
    <telerik:RadDataGrid.Columns>
        <telerik:DataGridTextColumn PropertyName="Country" HeaderText="Country" Width="100" SizeMode="Stretch"/>
        <telerik:DataGridTextColumn PropertyName="Capital" HeaderText="Capital" Width="200" SizeMode="Stretch"/>
    </telerik:RadDataGrid.Columns>
</telerik:RadDataGrid>

Where the telerik namespace is the following:

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

The columns take all the available space proportionally. The Width property is ignored.

Third Scenario when SizeMode="Auto":

<telerik:RadDataGrid x:Name="grid" AutoGenerateColumns="False">
    <telerik:RadDataGrid.Columns>
        <telerik:DataGridTextColumn PropertyName="Country" HeaderText="Country" Width="100" SizeMode="Auto"/>
        <telerik:DataGridTextColumn PropertyName="Capital" HeaderText="Capital" Width="200" SizeMode="Auto"/>
    </telerik:RadDataGrid.Columns>
</telerik:RadDataGrid>

Where the telerik namespace is the following:

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

The columns take only as much space as they need. The Width property is ignored.

Fourth Scenario with different SizeMode values

Lastly, lets use three columns to fully clarify the SizeMode behavior:

<telerik:RadDataGrid x:Name="grid" AutoGenerateColumns="False">
    <telerik:RadDataGrid.Columns>
        <telerik:DataGridTextColumn PropertyName="Country" HeaderText="Country" Width="100" SizeMode="Fixed"/>
        <telerik:DataGridTextColumn PropertyName="Capital" HeaderText="Capital" Width="200" SizeMode="Auto"/>
        <telerik:DataGridTextColumn PropertyName="Country" HeaderText="Country" Width="200" SizeMode="Stretch"/>
    </telerik:RadDataGrid.Columns>
</telerik:RadDataGrid>

Where the telerik namespace is the following:

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

The first and the third columns each have a fixed size of 100 and the second column takes all the available space because of SizeMode="Stretch":

See Also

• Picker Column
• Template Column
• Text Column