.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
withTargetType
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
andBackgroundColor
—Define the colors of the text part/background respectively. -
BorderColor
andBorderThickness
—Define the style of the border around the column header. -
Font Options
(TextFontAttributes
,TextFontFamily
,TextFontSize
)—Define the font options to the text part of theColumnHeader
. -
Text Alignment
(TextMargin
,HorizontalTextAlignment
,VerticalTextAlignment
)—Define the positioning for the text part of theColumnHeader
.
<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 theColumnHeader
.
-
SortIndicatorMargin
—Defines the margin of the sort indicator part of theColumnHeader
. -
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
andIndicatorFontFamily
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 theColumnHeader
. -
IndicatorText
—Defines the text for the indicator part of theColumnHeader
.
-
IndicatorMargin
—Defines the margin of the option indicator part of theColumnHeader
. -
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 theColumnHeader
.
-
FilterIndicatorText
—Defines the text for the filter indicator part of theColumnHeader
. For theFilterIndicatorText
to appear theFilterIndicatorFontFamily
should be specified. -
FilterIndicatorMargin
—Defines the margin of the filter indicator part of theColumnHeader
. -
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:
FooterStyle
FooterStyle
defines the appearance of the column footer. The DataGridColumnFooterStyle
exposes the following properties for styling:
-
TextColor
andBackgroundColor
—Define the colors of the text part/background respectively. -
BorderColor
andBorderThickness
—Define the style of the border around the column footer. -
Font Options
(TextFontFamily
,TextFontAttributes
,TextFontSize
)—Define the font options to the text part of theColumnFooter
. -
Text Alignment
(TextMargin
,HorizontalTextAlignment
,VerticalTextAlignment
)—Define the positioning for the text part of theColumnFooter
.
<telerik:DataGridTextColumn.FooterStyle>
<telerik:DataGridColumnFooterStyle BackgroundColor="BlueViolet"
TextColor="White"
TextFontSize="16"
BorderColor="Blue"
BorderThickness="2"/>
</telerik:DataGridTextColumn.FooterStyle>
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
—DefinesMicrosoft.Maui.Controls.FontAttributes
for the toggle symbol. -
ButtonMargin
(typeThickness
)—Defines the margin for the toggle symbol.