.NET MAUI DataGrid Styling

The DataGrid control provides the following Style properties for customizing its look & feel:

• RowBackgroundStyle—Defines the style of each row.
• AlternateRowBackgroundStyle—Defines the appearance style of an alternated row.
• GroupHeaderStyle—Defines the appearance style of the group header once the DataGrid is grouped.
• SelectionStyle—Defines the appearance settings applied to the selected DataGrid row.
• CurrentCellStyle—Defines the style applied to the current cell.
• HoverTextColor—Defines the text color of the hovered cell.

Styling Properties

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

Example how to set the RowBackgroundStyle property:

<telerik:RadDataGrid.RowBackgroundStyle>
    <telerik:DataGridBorderStyle BackgroundColor="CadetBlue" 
                                 BorderColor="DarkOrchid" 
                                 BorderThickness="1"/>
</telerik:RadDataGrid.RowBackgroundStyle>

Example how to set the AlternateRowBackgroundStyle is shown below:

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

The SelectionStyle property can be set as shown below:

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

The CurrentCellStyle property can be set as shown below:

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

The HoverTextColor property can be set as shown below:

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

The GoupHeaderStyle property is applied once the DataGrid is grouped.

The following properties can be used for customizing the grouped DataGrid:

• 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.
• Button Font Options (ButtonFontAttributes, ButtonFontFamily, ButtonFontSize)—Define the font options of the GroupedHeader expand/collapse symbol.
• ButtonMargin—Defines the margin of the expand/collapse symbol of the GroupHeader.
• ButtonTextColor—Defines the text color of the expand/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.
• Text alignment options (TextMargin, VerticalTextAlignment, HorizontalTextAlignment)—Define the positioning for the text part of the GroupHeader.
• TextFont options (TextFontattributes, TextFontFamily, TextFontSize)—Define the font options of the GroupHeaders text part.

Note that once the group is applied to the DataGrid, the GroupHeader will appear. Also, by default, the Button of the GroupHeader uses an internal symbol font family. To show text when the button is expanded or collapsed, instead of a symbol set a font family to the ButtonFontFamily property and define text to the ExpandButtonText and CollapseButtonText properties. For more details, refer to the group feature of the DataGrid.

Example how to apply the GoupHeaderStyle property to the DataGrid control:

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

Here is how the DataGrid looks:

See Also

• Columns Styling
• Style Selectors