.NET MAUI DataGrid Styling

The .NET MAUI DataGrid control enables you to customize its look and feel through the available Style configuration options. Also, you can modify the appearance of its splitter element, which divides the frozen columns from the rest of the data.

Border Brush and Thickness

Style supports the following properties for styling the border brush and thickness of the DataGrid:

• BorderBrush—Defines the brush of the border placed around the DataGrid control.
• BorderThickness—Defines the thickness of the border around the DataGrid control.

The following snippet shows how to set the BorderBrush and BorderThickness properties of the DataGrid control:

 <telerik:RadDataGrid x:Name="DataGrid"
                      BorderBrush="#8660C5"
                      BorderThickness="4"/>

The next image shows the end result.

Cells and Rows

Style supports the following properties for styling the cells and rows of the DataGrid:

• RowBackgroundStyle—Defines the style of each row.
• AlternateRowBackgroundStyle—Defines the appearance style of an alternated row.
• SelectionStyle—Defines the appearance settings applied to the selected DataGrid row.
• CurrentCellStyle—Defines the style applied to the current cell.
• MouseHoverStyle—Specifies the style applied to the cells and rows when the mouse is over them. The style is applicable for Desktop (MacCatalyst and WinUI).

The RowBackgroundStyle, AlternateRowBackgroundStyle, SelectionStyle, CurrentCellStyle, and MouseHoverStyle styling options are of type DataGridBorderStyle. DataGridBorderStyle defines the appearance settings applied to a BorderPaintable instance and exposes the BackgroundColor, BorderColor, and BorderTickness properties.

The following example shows how to set the RowBackgroundStyle property:

<telerik:RadDataGrid.RowBackgroundStyle>
    <Style TargetType="telerik:DataGridRowBackgroundAppearance">
        <Setter Property="BackgroundColor" Value="#E0F2F1" />
    </Style>
</telerik:RadDataGrid.RowBackgroundStyle>

The next example demonstrates how to set the AlternateRowBackgroundStyle property:

<telerik:RadDataGrid.AlternateRowBackgroundStyle>
    <Style TargetType="telerik:DataGridAlternateRowBackgroundAppearance">
        <Setter Property="BackgroundColor" Value="#F2FAF9" />
    </Style>
</telerik:RadDataGrid.AlternateRowBackgroundStyle>

The following snippet shows how to set the SelectionStyle property:

<telerik:RadDataGrid.SelectionStyle>
    <Style TargetType="telerik:DataGridSelectionAppearance">
        <Setter Property="BackgroundColor" Value="#B2DFDB" />
        <Setter Property="BorderColor" Value="#198679" />
        <Setter Property="BorderThickness" Value="{OnIdiom Default=0, Phone=1}" />
    </Style>
</telerik:RadDataGrid.SelectionStyle>

For styling the CurrentCell by using the CurrentCellStyle property, review the Cells article.

Text on Hover

Style supports the HoverTextColor property which defines the text color of the hovered cell, as demonstrated in the following example.

<telerik:DataGridTextColumn PropertyName="Name"
                            HeaderText="Name">
    <telerik:DataGridTextColumn.CellContentStyle>
        <telerik:DataGridTextCellStyle TextColor="Green"
                                        HoverTextColor="Red"
                                        FontSize="15"
                                        SelectedTextColor="Orange"  />   
    </telerik:DataGridTextColumn.CellContentStyle>
</telerik:DataGridTextColumn>

Lines

Style supports the following properties for configuring the DataGrid lines:

• GridLinesVisibility(Telerik.Maui.Controls.DataGrid.GridLinesVisibility)—Defines which DataGrid lines are currently visible (displayed). The property accepts the Both, Horizontal, None, and Vertical values.
• GridLinesColor—Defines the appearance of the horizontal and vertical DataGrid lines.
• GridLinesThickness—Defines the width of the vertical and the height of the horizontal DataGrid lines.

You can set the GridLinesVisibility property in the following way:

 <telerik:RadDataGrid GridLinesVisibility="Both"
                             Grid.Row="2"
                             Grid.ColumnSpan="3"
                             ItemsSource="{Binding GridSource}"
                             GridLinesColor="Red"
                             GridLinesThickness="5" />

Frozen Columns

Style supports the FrozenColumnsSplitterStyle (Telerik.Maui.Controls.DataGrid.DataGridFrozenColumnsSplitterStyle) property which allows you to style the UI of the splitter dividing the frozen (locked) from the unfrozen (unlocked) columns.

Splitter UI

To style the appearance of the splitter, which appears when the user freezes (locks) DataGrid columns, use the Width, BackgroundColor, BorderColor, and BorderThickness properties.

<telerik:RadDataGrid.FrozenColumnsSplitterStyle>
    <telerik:DataGridFrozenColumnsSplitterStyle Width="20"
                                                BorderColor="Gray"
                                                BorderThickness="2"
                                                BackgroundColor="LightBlue"/>
</telerik:RadDataGrid.FrozenColumnsSplitterStyle>

See Also

• Styling the .NET MAUI DataGrid Columns
• Available DataGrid Style Selectors