.NET MAUI DataGrid Styling

The DataGrid 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>
    <telerik:DataGridBorderStyle BackgroundColor="CadetBlue" 
                                 BorderColor="DarkOrchid" 
                                 BorderThickness="1"/>
</telerik:RadDataGrid.RowBackgroundStyle>

The next example demonstrates how to set the AlternateRowBackgroundStyle property:

<telerik:RadDataGrid.AlternateRowBackgroundStyle>
    <telerik:DataGridBorderStyle BackgroundColor="LightBlue" 
                                 BorderThickness="1"
                                 BorderColor="BlanchedAlmond"/>
</telerik:RadDataGrid.AlternateRowBackgroundStyle>

The following snippet shows how to set the SelectionStyle property:

<telerik:RadDataGrid.SelectionStyle>
    <telerik:DataGridBorderStyle BackgroundColor="SeaGreen" 
                                 BorderColor="Wheat" 
                                 BorderThickness="2"/>
</telerik:RadDataGrid.SelectionStyle>

The next example demonstrates how to set the CurrentCellStyle property:

<telerik:DataGridBorderStyle x:Key="CurrentCellStyle"
                             BorderColor="Black"
                             BackgroundColor="LightGray"
                             BorderThickness="2"/>

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.Compatibility.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.Compatibility.DataGrid.DataGridFrozenColumnsSplitterStyle) property which allows you to style the UI of the splitter dividing the frozen (locked) from the unfrozen (unlocked) columns.

Group Header

Style supports the GroupHeaderStyle property which defines the appearance of the group DataGrid header. GoupHeaderStyle is applied once the user groups the component.

To further modify the appearance of the grouped DataGrid header, use the following properties:

• BackgroundColor—Defines the color that fills the area within the header of the DataGrid GroupHeader.
• BorderColor—Defines the color that fills the border region of the GroupHeader.
• BorderThickness—Defines the thickness of the border.

• ButtonFontAttributes, ButtonFontFamily, and ButtonFontSize options—Define the font options of the expand and collapse GroupedHeader symbol.

  By default, the Button of the GroupHeader uses an internal symbol font family. To render text when the button is expanded or collapsed, instead of a symbol, set a font family to the ButtonFontFamily property and add the text to the ExpandButtonText and CollapseButtonText properties. For more details, refer to the group feature of the Telerik UI for .NET MAUI DataGrid.

• ButtonMargin—Defines the margin of the expand and collapse symbol of the GroupHeader.

• ButtonTextColor—Defines the text color of the expand and collapse symbol of the GroupHeader.
• CollapseButtonText—Defines the text for the collapse state of the GroupHeader.
• ExpandButtonText—Defines the text for the expand state of the GroupHeader.
• TextMargin, VerticalTextAlignment, and HorizontalTextAlignment text alignment options—Define the positioning of the text that is part of the GroupHeader.
• TextFontattributes, TextFontFamily, and TextFontSize text font options—Define the font options of the GroupHeaders text part.

The following example shows how to apply the GoupHeaderStyle property to the DataGrid:

<telerik:RadDataGrid.GroupHeaderStyle>
    <telerik:DataGridGroupHeaderStyle BorderThickness="1"
                                      TextColor="DarkTurquoise"
                                      BorderColor="Brown"/>
</telerik:RadDataGrid.GroupHeaderStyle>

The next image shows the end result.

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