.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:

c#

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:

C#

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":

XAML

<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:

XAML

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

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

Second Scenario when SizeMode="Stretch":

XAML

<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:

XAML

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

Third Scenario when SizeMode="Auto":

XAML

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

Where the telerik namespace is the following:

XAML

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

Fourth Scenario with different SizeMode values

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

XAML

<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:

XAML

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

See Also

• Picker Column
• Template Column
• Text Column