Log in
TL;DR: Customize the look and feel of your .NET MAUI DataGrid using resource keys and implicit styles. Learn how to style unbound rows, row headers, freeze pane indicators, search highlights, and drag indicators for rows and columns. This guide covers practical techniques to align your grid’s appearance with your app’s theme, resulting in a polished and professional UI.
Syncfusion .NET MAUI DataGrid fully supports light and dark themes, allowing you to seamlessly match your app’s design. Beyond the default look, the .NET MAUI DataGrid can be styled by adjusting visual elements such as text color, font style and size, headers, and gridlines. You can even apply custom styles to specific rows and cells for more explicit visual cues and an enhanced user experience.
In this post, we’ll show you how to customize the .NET MAUI DataGrid’s appearance using theme resource keys. These keys provide a flexible way to style individual components to fit your design requirements.
We’ll cover styling options for:
- UnboundRow
- RowHeader
- Freeze panes
- Search highlights
- Row and Column drag indicators
Unbound row customization
You can style UnboundRows in the .NET MAUI DataGrid using three approaches:
Method 1: Using DefaultStyle
This customization uses the DefaultStyle property to define visual attributes for the UnboundRow, including background color, font style, font family, font size, and text color, as shown below.
<syncfusion:SfDataGrid.DefaultStyle>
<syncfusion:DataGridStyle
UnboundRowBackground="Beige"
UnboundRowFontAttributes="Bold"
UnboundRowFontFamily="Congenial Black"
UnboundRowFontSize="18"
UnboundRowTextColor="Red" />
</syncfusion:SfDataGrid.DefaultStyle>
Method 2: Using implicit style
This method applies an implicit style targeting DataGridUnboundRowView, the container for unbound rows in the DataGrid. By setting the background color, you make these rows visually distinct from regular data rows, thereby improving clarity and the overall user experience.
<Style TargetType="syncfusion:DataGridUnboundRowView">
<Setter Property="Background" Value="Beige" />
</Style>
Method 3: Styling individual cells
Applying custom styles to DataGridUnboundRowCell allows you to present non-data-bound content in a visually compelling and meaningful way.
Each property in the style contributes to improving both visual distinction and user focus. Here’s a breakdown of the key customizations:
- Background color: Differentiates unbound rows from regular rows.
- Font attributes: Makes important values stand out.
- Font family: Aligns with your app’s branding.
- Font size: Improves readability across devices.
- Text color: Draws attention to key content.
<Style TargetType="syncfusion:DataGridUnboundRowCell">
<Setter Property="Background" Value="Beige" />
<Setter Property="FontAttributes" Value="Bold" />
<Setter Property="FontFamily" Value="Congenial Black" />
<Setter Property="FontSize" Value="16" />
<Setter Property="TextColor" Value="Red" />
</Style>
RowHeader customization
Row headers in a DataGrid provide context and control for individual rows, such as selection markers, indicators, or row numbers. To create a consistent look and feel, Syncfusion’s .NET MAUI DataGrid allows you to style row headers using implicit styles.
Applying a distinct background color helps visually separate headers from data cells, improving readability and layout clarity. These cells typically appear on the far-left side of each row and often display row numbers or selection markers.
<Style TargetType="syncfusion:DataGridRowHeaderCell">
<Setter Property="Background" Value="Beige" />
</Style>
Freeze panes customization
You can modify the default visual style of the Syncfusion SfDataGrid by changing the appearance of the freeze pane separator line using the FreezePaneLineColor property. This property belongs to the DataGridStyle class, which provides options for customizing the grid’s appearance. FreezePaneLineColor sets the color of the vertical or horizontal line that separates frozen rows or columns from the scrollable content, making the layout more visually clear.
<syncfusion:SfDataGrid.DefaultStyle>
<syncfusion:DataGridStyle
FreezePaneLineColor="Red" />
</syncfusion:SfDataGrid.DefaultStyle>
Search customization
Syncfusion’s .NET MAUI DataGrid supports built-in search functionality, allowing users to quickly locate text across the grid. To make search results more intuitive, you can customize the appearance of matched text and highlights using the DataGridStyle properties.
- SearchHighlightTextBackground: Sets the background color for the currently focused (active) match, making it easy to identify.
- SearchHighlightTextColor: Defines the text color for the active match.
- SearchTextBackground: Defines the background color for all other (inactive) search matches, providing a clear visual distinction from the active match.
- SearchTextColor: Sets the text color for inactive search matches, ensuring readability while keeping visual focus on the active match.
<syncfusion:SfDataGrid.DefaultStyle>
<syncfusion:DataGridStyle
SearchHighlightTextBackground="Red"
SearchHighlightTextColor="White"
SearchTextBackground="Yellow"
SearchTextColor="Red" />
</syncfusion:SfDataGrid.DefaultStyle>
Row and column drag indicator customization
Row indicator customization
Syncfusion’s .NET MAUI DataGrid supports intuitive row drag-and-drop functionality, allowing users to easily reorder rows. To enhance clarity during drag operations, you can customize the appearance of the drag indicator and drag preview using the DataGridStyle properties:
- RowDraggingIndicatorLineColor: Specifies the color of the indicator line shown at the potential drop position while dragging a row. This bold visual cue helps users clearly identify the target position.
- RowDragViewBackgroundColor: Defines the background color of the dragged row’s preview (also called the drag ghost or shadow). A contrasting color ensures the dragged row stands out against the grid.
Together, these settings create a more intuitive and visually distinct interaction model, especially in data-heavy UIs where row reordering is common.
<syncfusion:SfDataGrid.DefaultStyle>
<syncfusion:DataGridStyle
RowDraggingIndicatorLineColor="Red"
RowDragViewBackgroundColor="Beige" />
</syncfusion:SfDataGrid.DefaultStyle>
Column indicator customization
The SfDataGrid also supports column drag-and-drop functionality for reordering columns. To enhance usability during this operation, customize the visual indicators using these properties:
- ColumnDraggingIndicatorLineColor: Sets the color of the indicator line that appears at the potential drop position while dragging a column. This makes the drop target clearly visible, improving accuracy.
- ColumnDragViewBackgroundColor: Defines the background color of the drag preview for the column header. A neutral tone contrasts well with most grid themes, making the dragged column easy to distinguish.
<syncfusion:SfDataGrid.DefaultStyle>
<syncfusion:DataGridStyle
ColumnDraggingIndicatorLineColor="Red"
ColumnDragViewBackgroundColor="Beige" />
</syncfusion:SfDataGrid.DefaultStyle>
GitHub references
For more details, refer to the GitHub demo.
Conclusion
Thank you for reading! Customizing the visual styling of your .NET MAUI DataGrid is easier than you might think. With Syncfusion’s powerful XAML support, you can align your DataGrid with your app’s theme and ensure a polished, user-friendly experience across both light and dark modes. Try these styling techniques in your next project and explore even more options in our getting started with Syncfusion .NET MAUI documentation.
The latest version of Essential Studio is available from the license and downloads page for our customers. If you’re not a Syncfusion customer, you can start with our 30-day trial to evaluate the components.
If you have any questions or need assistance, feel free to reach out through the support forum, support portal, or feedback portal. We’re always happy to help!
