Freeze panes in MAUI DataGrid (SfDataGrid)

7 Jul 20269 minutes to read

Overview

Freezing panes allows you to keep specific rows and columns visible while scrolling through large datasets, similar to Excel. This is useful when you have headers or identifier columns that should remain visible during navigation. The .NET MAUI DataGrid (SfDataGrid) control supports freezing rows and columns independently at the top/bottom and left/right edges of the grid.

Freeze Panes Properties

You can freeze rows and columns by setting the following properties:

Property name Type Default Description
FrozenRowCount int 0 Sets the number of rows to freeze at the top of the DataGrid
FooterFrozenRowCount int 0 Sets the number of rows to freeze at the bottom of the DataGrid
FrozenColumnCount int 0 Sets the number of columns to freeze at the left side of the DataGrid
FooterFrozenColumnCount int 0 Sets the number of columns to freeze at the right side of the DataGrid

To get started quickly with freeze rows and columns in .NET MAUI DataGrid, watch this video tutorial (starts at the freeze panes section):

Freeze columns

You can freeze columns by setting the FrozenColumnCount property to a non-negative value. Frozen columns remain visible when scrolling horizontally and are useful for identifier columns that should always be visible.

Note: OrderInfoViewModel is a sample ViewModel class that provides an Orders collection. Replace it with your own data source ViewModel.

The following example shows how to freeze columns in the DataGrid:

<ContentPage.BindingContext>
    <local:OrderInfoViewModel />
</ContentPage.BindingContext>
<syncfusion:SfDataGrid x:Name = "dataGrid"
                       ItemsSource = "{Binding Orders}" 
                       FrozenColumnCount = "1" />
SfDataGrid dataGrid = new SfDataGrid();
OrderInfoViewModel viewModel = new OrderInfoViewModel();
dataGrid.ItemsSource = viewModel.Orders;
dataGrid.FrozenColumnCount = 1;
this.Content = dataGrid;

maui-datagrid-freeze-panes-columns

Limitations

  • The FrozenColumnCount value must be less than the total number of columns in the DataGrid
  • Frozen columns cannot exceed the available grid width on the current platform

You can freeze footer (rightmost) columns by setting the FooterFrozenColumnCount property to a non‑negative value. Footer frozen columns remain visible when scrolling horizontally and are useful for summary or action columns.

The following example shows how to freeze footer columns in the DataGrid:

<ContentPage.BindingContext>
    <local:OrderInfoViewModel />
</ContentPage.BindingContext>
<syncfusion:SfDataGrid x:Name = "dataGrid"
                       ItemsSource = "{Binding Orders}" 
                       FooterFrozenColumnCount = "1" />
SfDataGrid dataGrid = new SfDataGrid();
OrderInfoViewModel viewModel = new OrderInfoViewModel();
dataGrid.ItemsSource = viewModel.Orders;
dataGrid.FooterFrozenColumnCount = 1;
this.Content = dataGrid;

maui-datagrid-freeze-footer-rows

Freeze rows

You can freeze rows by setting the FrozenRowCount property to a non-negative value. Frozen rows remain visible when scrolling vertically and are useful for header rows that should always be visible.

The following example shows how to freeze rows in the DataGrid:

<ContentPage.BindingContext>
    <local:OrderInfoViewModel />
</ContentPage.BindingContext>
<syncfusion:SfDataGrid x:Name = "dataGrid"
                        ItemsSource = "{Binding Orders}" 
                        FrozenRowCount = "1" />
SfDataGrid dataGrid = new SfDataGrid();
OrderInfoViewModel viewModel = new OrderInfoViewModel();
dataGrid.ItemsSource = viewModel.Orders;
dataGrid.FrozenRowCount = 1;
this.Content = dataGrid;

maui-datagrid-freeze-panes-rows

Limitations

  • The FrozenRowCount value must be less than the total number of rows in the DataGrid
  • Frozen rows cannot exceed the available grid height on the current platform

You can freeze footer (bottom) rows by setting the FooterFrozenRowCount property to a non‑negative value. Footer frozen rows remain visible when scrolling vertically and are useful for summary or total rows.

The following example shows how to freeze footer rows in the DataGrid:

<ContentPage.BindingContext>
    <local:OrderInfoViewModel />
</ContentPage.BindingContext>
<syncfusion:SfDataGrid x:Name = "dataGrid"
                       ItemsSource = "{Binding Orders}" 
                       FooterFrozenRowCount = "1" />
SfDataGrid dataGrid = new SfDataGrid();
OrderInfoViewModel viewModel = new OrderInfoViewModel();
dataGrid.ItemsSource = viewModel.Orders;
dataGrid.FooterFrozenRowCount = 1;
this.Content = dataGrid;

maui-datagrid-freeze-footer-rows

Appearance

You can customize the visual appearance of freeze panes using DataGridStyle. Apply this style through the SfDataGrid.DefaultStyle property.

Freeze pane line color

Customize the color of the line that divides frozen and non-frozen regions using the DataGridStyle.FreezePaneLineColor property.

<ContentPage.BindingContext>
    <local:OrderInfoViewModel />
</ContentPage.BindingContext>
<syncfusion:SfDataGrid x:Name = "dataGrid"
                       ItemsSource = "{Binding Orders}" 
                       FrozenColumnCount = "1" 
                       FrozenRowCount = "1">
    <syncfusion:SfDataGrid.DefaultStyle>
        <syncfusion:DataGridStyle FreezePaneLineColor="Orange" />
    </syncfusion:SfDataGrid.DefaultStyle>
</syncfusion:SfDataGrid>
SfDataGrid dataGrid = new SfDataGrid();
OrderInfoViewModel viewModel = new OrderInfoViewModel();
dataGrid.ItemsSource = viewModel.Orders;
dataGrid.FrozenColumnCount = 1;
dataGrid.FrozenRowCount = 1;
DataGridStyle dataGridStyle = new DataGridStyle();
dataGridStyle.FreezePaneLineColor = Colors.Orange;
dataGrid.DefaultStyle = dataGridStyle;
this.Content = dataGrid;

maui-datagrid-freeze-panes-appearance

Freeze pane line thickness

Customize the thickness of the freeze pane line using the DataGridStyle.FreezePaneLineStrokeThickness property. This affects all frozen rows and columns in both body and footer regions.

Default value: 1.0

<ContentPage.BindingContext>
    <local:OrderInfoViewModel />
</ContentPage.BindingContext>
<syncfusion:SfDataGrid x:Name = "dataGrid"
                       ItemsSource = "{Binding Orders}" 
                       FrozenColumnCount = "1" 
                       FrozenRowCount = "1">
    <syncfusion:SfDataGrid.DefaultStyle>
        <syncfusion:DataGridStyle FreezePaneLineStrokeThickness="5" />
    </syncfusion:SfDataGrid.DefaultStyle>
</syncfusion:SfDataGrid>
SfDataGrid dataGrid = new SfDataGrid();
OrderInfoViewModel viewModel = new OrderInfoViewModel();
dataGrid.ItemsSource = viewModel.Orders;
dataGrid.FrozenColumnCount = 1;
dataGrid.FrozenRowCount = 1;
DataGridStyle dataGridStyle = new DataGridStyle();
dataGridStyle.FreezePaneLineStrokeThickness = 5;
dataGrid.DefaultStyle = dataGridStyle;
this.Content = dataGrid;

maui-datagrid-freeze-panes-strokethickness

Platform Considerations

  • Responsive Design: Frozen pane counts should be adjusted based on available screen space for different device sizes
  • Cross-platform Behavior: Freeze pane functionality works consistently across Android, iOS, macOS, and Windows platforms

Interaction with Other Features

  • Frozen rows and columns work with sorting, filtering, and selection
  • Frozen content scrolls independently from non-frozen content