maui-403565-data-grid-net-maui-data-grid-appearance.md
You can customize the DataGridView appearance in the following ways:
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.
|
This example shows how to modify the appearance of the following grid elements:
Data CellsAssign the CellAppearance object with the specified settings to the DataGridView.CellAppearance property. Use the grid’s RowHeight property to specify the cell height.Column HeadersAssign the ColumnHeaderAppearance object with the specified settings to the DataGridView.ColumnHeaderAppearance property.Total Summary PanelAssign 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>
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
|
TemplateColumn.DisplayTemplate
TemplateColumn.EditTemplate
|
| |
Column Header
|
GridColumn.HeaderContentTemplate
DataGridView.ColumnHeaderContentTemplate
|
| |
Group Row
|
|
| |
Group Row Caption
|
GridColumn.GroupCaptionTemplate
DataGridView.GroupCaptionTemplate
|
| |
Group Summary
|
DataGridView.GroupSummaryTemplate
|
| |
Total Summary
|
GridColumn.TotalSummaryTemplate
DataGridView.TotalSummaryTemplate
|
| |
Swipe Item
|
GridSwipeItem.Template
DataGridView.SwipeItemTemplate
|
|
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>
View Example: Define a Column Header Template
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.
This example shows how to use the CustomCellAppearance event to customize the appearance of individual data cells within the grid.
<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");
}
}