New to Telerik UI for .NET MAUI? Start a free 30-day trial

.NET MAUI DataGrid Columns Styling

The DataGrid component provides styling mechanism for customizing the look of the columns and their cells.

The styling mechanism is represented by the following properties:

  • HeaderStyle (DataGridColumnHeaderStyle)—Sets the style to the columns' headers.
  • CellContentStyle (DataGridTextCellStyle)—Defines the appearance of each cell associated with the column.
  • CellDecorationStyle (DataGridBorderStyle)—Defines the style of the border of each cell associated with the column.
  • CellEditorStyle (Style with TargetType depending on the editor type)—Defines the style that will be applied to the cell editor.
  • FooterStyle (DataGridColumnFooterStyle)—Defines the appearance of the column footer.

Header Style

HeaderStyle defines the appearance of the column header. The DataGridColumnHeaderStyle exposes properties for styling its header, filter indicator, indicator, Options button, and sorting indicator.

Header Styling

To style the RadDataGridColumnHeader use the following properties:

  • TextColor and BackgroundColor—Define the colors of the text part/background respectively.
  • BorderColor and BorderThickness—Define the style of the border around the column header.
  • Font Options (TextFontAttributes, TextFontFamily, TextFontSize)—Define the font options to the text part of the ColumnHeader.
  • Text Alignment (TextMargin, HorizontalTextAlignment, VerticalTextAlignment)—Define the positioning for the text part of the ColumnHeader.
<telerik:DataGridTextColumn.HeaderStyle>
    <telerik:DataGridColumnHeaderStyle BackgroundColor="LightSkyBlue"
                                       TextColor="Black"
                                       BorderColor="Black"
                                       BorderThickness="2"/>
</telerik:DataGridTextColumn.HeaderStyle>

For more details how to hide the column headers from the DataGrid visualization, review the following article: How to Hide Column Headers in a DataGrid for MAUI.

SortIndicator Styling

The SortIndicator is shown once the RadDataGridColumnHeader is sorted (tapped/clicked on the ColumnHeader cell) and can be styled with the following properties:

  • SortIndicatorColor—Defines the color for the sort indicator part of the ColumnHeader.
  • SortIndicatorMargin—Defines the margin of the sort indicator part of the ColumnHeader.
  • SortIndicatorAscendingText—Defines the text of the sort indicator when the sorting is ascending.
  • SortIndicatorDescendingText—Defines the text of the sort indicator when the sorting is descending.

By default, the indicator is represented by a string symbol that can be changed by using the IndicatorText and IndicatorFontFamily properties. For more details, refer to the article on sorting the DataGrid.

Indicator Styling

Style the Indicator using the following properties:

  • IndicatorColor—Defines the color for the indicator part of the ColumnHeader.
  • IndicatorText—Defines the text for the indicator part of the ColumnHeader.
  • IndicatorMargin—Defines the margin of the option indicator part of the ColumnHeader.
  • Font Options(IndicatorFontAttributes, IndicatorFontFamily, IndicatorFontSize)—Define the font options to the option indicator text.

FilterIndicator Styling

Style the FilterIndicator using the following properties:

  • FilterIndicatorTextColor—Defines the color for the filter indicator part of the ColumnHeader.
  • FilterIndicatorText—Defines the text for the filter indicator part of the ColumnHeader. For the FilterIndicatorText to appear the FilterIndicatorFontFamily should be specified.
  • FilterIndicatorMargin—Defines the margin of the filter indicator part of the ColumnHeader.
  • Font Options(FilterIndicatorFontAttributes, FilterIndicatorFontFamily, FilterIndicatorFontSize)—Define the font options to the filter indicator text.

CellContentStyle

The CellContentStyle property defines the appearance of each cell associated with the column. CellContentStyle is of type DataGridTextCellStyle which provides the following properties for styling the cell text:

  • Font options (FontAttributes, FontFamily, FontSize)—Define the font of the cell text.
  • TextColor/SelectedTextColor—Define the color of the cells text. You can set a different value for the selected cell.
  • HoverTextColor—Sets the color of the cells text when the mouse hovers over it. Appicable only on Desktop.
  • TextMargin/ HorizontalTextAlignment/ VerticalTextAlignment)—Define the positioning of the text inside the cell.
  • SearchMatchTextColor—Defines the color that is used for the parts of the text that are search matches.

Here is an example how to set the CellContentStyle property:

<telerik:DataGridTextColumn.CellContentStyle>
    <telerik:DataGridTextCellStyle TextColor="DarkOliveGreen"
                                   FontSize="12"
                                   TextMargin="2"
                                   VerticalTextAlignment="Center" 
                                   HorizontalTextAlignment="Center"
                                   SelectedTextColor="Brown">
    </telerik:DataGridTextCellStyle>
</telerik:DataGridTextColumn.CellContentStyle>

CellDecorationStyle

To style the border of each cell associated with the column the CellDecorationStyle property is used. CellDecorationStyle is of type DataGridBorderStyle which provides the following properties—BackgroundColor, BorderColor, BorderTickness.

In addition, DataGridBorderStyle provides the SearchMatchBackgroundColor property used to apply a separate background color to the border when the cell contains a search-match.

Here is an example how to set those properties on a column:

<telerik:DataGridTextColumn.CellDecorationStyle>
    <telerik:DataGridBorderStyle BorderColor="DarkBlue"  
                                 BorderThickness="3" 
                                 BackgroundColor="LightBlue" />
</telerik:DataGridTextColumn.CellDecorationStyle>

CellEditorStyle

CellEditorStyle defines the style that will be applied to the cell editor.

Here is an example how to set this property:

<telerik:DataGridTextColumn.CellEditorStyle>
    <Style TargetType="Entry">
        <Setter Property="FontSize" Value="Large"/>
        <Setter Property="FontAttributes" Value="Bold"/>
    </Style>
</telerik:DataGridTextColumn.CellEditorStyle>

And this is how the column style looks when the properties for customizing the column are applied:

DataGrid Columns Styling

FooterStyle

FooterStyle defines the appearance of the column footer. The DataGridColumnFooterStyle exposes the following properties for styling:

  • TextColor and BackgroundColor—Define the colors of the text part/background respectively.
  • BorderColor and BorderThickness—Define the style of the border around the column footer.
  • Font Options (TextFontFamily, TextFontAttributes, TextFontSize)—Define the font options to the text part of the ColumnFooter.
  • Text Alignment (TextMargin, HorizontalTextAlignment, VerticalTextAlignment)—Define the positioning for the text part of the ColumnFooter.
<telerik:DataGridTextColumn.FooterStyle>
    <telerik:DataGridColumnFooterStyle BackgroundColor="BlueViolet"
                                       TextColor="White"
                                       TextFontSize="16"
                                       BorderColor="Blue"
                                       BorderThickness="2"/>
</telerik:DataGridTextColumn.FooterStyle>

DataGrid Column Footer

DataGrid Toggle Row Details Column Styling

CellContentStyle defines the appearance of the DataGridToggleRowDetailsColumn. The DataGridToggleRowDetailsCellStyle exposes the following properties for styling:

  • ButtonFontFamily—Defines the font family for the toggle symbol.
  • ExpandButtonText—Defines the text for the expanded state.
  • CollapseButtonText—Defines the text for the collapsed state.
  • ButtonTextColor—Defines the color for the toggle symbol.
  • SelectedButtonTextColor—Defines the color for the toggle symbol when the item is selected.
  • HoverButtonTextColor—Defines the color for the toggle symbol when the item is being hovered over.
  • ButtonFontSize—Defines the font size for the toggle symbol.
  • ButtonFontAttributes—Defines Microsoft.Maui.Controls.FontAttributes for the toggle symbol.
  • ButtonMargin(type Thickness)—Defines the margin for the toggle symbol.

See Also

In this article