.NET MAUI Data Grid Appearance
- 5 minutes to read
You can customize the DataGridView appearance in the following ways:
- Modify appearance objects that store appearance settings of grid elements.
- Define templates for grid elements.
- Handle the DataGridView.CustomCellAppearance event to specify the appearance of individual data cells according to the specified conditions.
Data Grid Appearance Properties and Classes
DataGridView has a set of properties that you can use to customize the appearance of grid elements (for example, cells, column headers, summaries):
Property | Description |
|---|---|
Gets or sets the grid border color. This is a bindable property. | |
Gets or sets the grid border thickness. This is a bindable property. | |
Gets or sets the color of the load-more (iOS and Android) and pull-to-refresh (iOS only) indicators. This is a bindable property. | |
Gets or sets the appearance settings that are applied to the current DataGridView‘s cells. This is a bindable property. | |
Gets or sets the appearance settings that are applied to the current DataGridView‘s group row. This is a bindable property. | |
Gets or sets the appearance settings that are applied to the current DataGridView‘s column headers. This is a bindable property. | |
Gets or sets the appearance settings that are applied to the current DataGridView‘s total summary items. This is a bindable property. | |
Gets or sets the appearance settings that are applied to the current DataGridView‘s swipe items. This is a bindable property. |
The DataGridView also includes the following classes that contain the element’s appearance settings:
Class | Description |
|---|---|
An object that contains a Data Grid cell’s apperance properties. | |
An object that contains a DataGridView column header’s apperance properties. | |
An object that contains a DataGridView group row’s apperance properties. | |
An object class that contains a DataGridView total summary’s apperance properties. | |
An object that contains a DataGridView swipe item’s apperance properties. |
Example
This example shows how to modify the appearance of the following grid elements:
- Data Cells
- Assign the CellAppearance object with the specified settings to the DataGridView.CellAppearance property. Use the grid’s RowHeight property to specify the cell height.
- Column Headers
- Assign the ColumnHeaderAppearance object with the specified settings to the DataGridView.ColumnHeaderAppearance property.
- Total Summary Panel
- Assign the TotalSummaryAppearance object with the specified settings to the DataGridView.TotalSummaryAppearance property. Use the grid’s TotalSummaryHeight property to change the height of the total summary panel displayed at the bottom of the grid.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:dxg="clr-namespace:DevExpress.Maui.DataGrid;assembly=DevExpress.Maui.DataGrid"
xmlns:local="clr-namespace:DataGrid_CustomAppearance"
x:Class="DataGrid_CustomAppearance.MainPage">
<ContentPage.BindingContext>
<local:TestOrderRepository/>
</ContentPage.BindingContext>
<dxg:DataGridView ItemsSource="{Binding Orders}"
RowHeight="40" TotalSummaryHeight="40">
<!-- Specify grid columns and total summaries here. -->
<!--Customize the appearance of grid cells.-->
<dxg:DataGridView.CellAppearance>
<dxg:CellAppearance Padding="5" BackgroundColor="#333333" BorderColor="#515151"
FontSize="14" FontColor="White"
SelectionColor="#f78a09" SelectionFontColor="Black"/>
</dxg:DataGridView.CellAppearance>
<!--Customize the appearance of column headers.-->
<dxg:DataGridView.ColumnHeaderAppearance>
<dxg:ColumnHeaderAppearance BackgroundColor="#333333" BorderColor="#515151"
FontSize="16" FontColor="#929292" FontAttributes="Bold"
HorizontalLineThickness="2"/>
</dxg:DataGridView.ColumnHeaderAppearance>
<!--Customize the appearance of the total summary panel.-->
<dxg:DataGridView.TotalSummaryAppearance>
<dxg:TotalSummaryAppearance Padding="2,10" BackgroundColor="#666666" BorderColor="#515151"
FontSize="14" FontColor="#f78a09"/>
</dxg:DataGridView.TotalSummaryAppearance>
</dxg:DataGridView>
</ContentPage>
Templates for Data Grid Elements
The following properties of a DataGridView object allow you to define how grid elements are displayed based on templates:
Visual Element | Property | Binding Context |
|---|---|---|
Data Cell | ||
Column Header | GridColumn.HeaderContentTemplate | |
Group Row | ||
Group Row Caption | GridColumn.GroupCaptionTemplate | |
Group Summary | ||
Total Summary | GridColumn.TotalSummaryTemplate | |
Swipe Item |
Example
This example shows how to specify templates for grid column headers. To do this, assign a DataTemplate object to a column’s HeaderContentTemplate property.
<dxg:DataGridView ItemsSource="{Binding Employees}" RowHeight="120">
<dxg:DataGridView.Columns>
<dxg:ImageColumn FieldName="Photo">
<dxg:ImageColumn.HeaderContentTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal" HorizontalOptions="Center">
<Image Source="photo.png" VerticalOptions="Center"/>
<Label Text="{Binding FieldName}" VerticalOptions="Center"/>
</StackLayout>
</DataTemplate>
</dxg:ImageColumn.HeaderContentTemplate>
</dxg:ImageColumn>
<dxg:TextColumn FieldName="Name">
<dxg:TextColumn.HeaderContentTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal">
<Image Source="full_name.png" VerticalOptions="Center"/>
<Label Text="Full Name" VerticalOptions="Center"/>
</StackLayout>
</DataTemplate>
</dxg:TextColumn.HeaderContentTemplate>
</dxg:TextColumn>
<dxg:TextColumn FieldName="Position">
<dxg:TextColumn.HeaderContentTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal">
<Image Source="job_title.png" VerticalOptions="Center"/>
<Label Text="Job Title" VerticalOptions="Center"/>
</StackLayout>
</DataTemplate>
</dxg:TextColumn.HeaderContentTemplate>
</dxg:TextColumn>
<dxg:TextColumn FieldName="Phone">
<dxg:TextColumn.HeaderContentTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal">
<Image Source="phone.png" VerticalOptions="Center"/>
<Label Text="{Binding FieldName}" VerticalOptions="Center"/>
</StackLayout>
</DataTemplate>
</dxg:TextColumn.HeaderContentTemplate>
</dxg:TextColumn>
<dxg:DateColumn FieldName="HireDate">
<dxg:DateColumn.HeaderContentTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal">
<Image Source="hire_date.png" VerticalOptions="Center"/>
<Label Text="Hire Date" VerticalOptions="Center"/>
</StackLayout>
</DataTemplate>
</dxg:DateColumn.HeaderContentTemplate>
</dxg:DateColumn>
</dxg:DataGridView.Columns>
</dxg:DataGridView>
Custom Appearance of Individual Data Cells
DataGridView allows you to customize the appearance of each cell individually. To do this, handle the DataGridView.CustomCellAppearance event. Use the FieldName and RowHandle parameters to identify the column and row to which the cell belongs, BackgroundColor/FontColor to specify cell colors, and FontSize/FontFamily/FontAttributes to configure cell font settings.
Example
This example shows how to use the CustomCellAppearance event to customize the appearance of individual data cells within the grid.
- Set different background colors for even and odd rows.
- Change the font color for cells in the specified columns depending on their values.
<dxg:DataGridView x:Name="dataGridView" ItemsSource="{Binding}"
CustomCellAppearance="DataGridView_CustomCellAppearance">
<!-- ... -->
</dxg:DataGridView>
using Microsoft.Maui.Graphics;
using DevExpress.Maui.DataGrid;
// ...
void DataGridView_CustomCellAppearance(object sender, CustomCellAppearanceEventArgs e) {
if (e.RowHandle % 2 == 0)
e.BackgroundColor = Color.FromArgb("#F7F7F7");
e.FontColor = Color.FromArgb("#55575C");
if (e.FieldName == "ActualSales" || e.FieldName == "TargetSales") {
double value = (double)dataGridView.GetCellValue(e.RowHandle, e.FieldName);
if (value > 7000000)
e.FontColor = Color.FromArgb("#00AE00");
else if (value < 4000000)
e.FontColor = Color.FromArgb("#FF5458");
}
}