.NET MAUI DataGrid Aggregates Styling
The .NET MAUI DataGrid provides a styling functionality for its group footer, header, and column footer aggregates.
Styling the Group Header
The DataGrid provides the GroupHeaderStyle
(DataGridGroupHeaderStyle
) configuration which defines the style of the GroupHeader
and the aggregates inside the header.
To visualize the
GroupHeader
, set theShowGroupHeaderAggregates
toTrue
. The property is a property inside theRadDataGrid
instance.
Styling the Group Footer
The DataGrid provides the following options for styling its group footer:
-
GroupFooterStyle
(DataGridGroupFooterStyle
)—Defines the style of theGroupFooter
and the aggregates inside the footer. -
GroupFooterStyleSelector
(DataGridStyleSelector
)—Defines the style of the selected GroupFooter by passing theGroupFooterContext
in the selector. -
FooterStyle
(DataGridColumnFooterStyle
)—Defines the style of the Column Footer and the aggregates inside the Column Footer.
To visualize the
GroupFooter
, set theShowGroupFooters
property toTrue
. The property is a property inside theRadDataGrid
instance.
The following example shows how to define the GroupFooterStyle
in XAML:
<telerik:DataGridGroupFooterStyle x:Key="GroupFooterStyle"
BorderThickness="0, 1"
BorderColor="BlueViolet"
TextColor="BlueViolet"
TextFontFamily="Italic" />
The following example shows how to use the GroupFooterStyleSelector
property:
1. Define the class to which the GroupFooterContext
will be passed.
class CustomGroupFooterStyleSelector : DataGridStyleSelector
{
public DataGridGroupFooterStyle CustomStyle { get; set; }
public override DataGridStyle SelectStyle(object item, BindableObject container)
{
if (item is GroupFooterContext footerContext
&& footerContext.Group.Key.ToString() == "Video Card"
&& footerContext.Column is DataGridTypedColumn column
&& column.PropertyName == "Quantity")
{
return this.CustomStyle;
}
return null;
}
}
2. Define the style selector which will passed to the DataGrid in XAML.
<local:CustomGroupFooterStyleSelector x:Key="GroupFooterStyleSelectorResource">
<local:CustomGroupFooterStyleSelector.CustomStyle>
<telerik:DataGridGroupFooterStyle TextFontAttributes="Bold"
BorderColor="BlueViolet"
HorizontalTextAlignment="Start"
VerticalTextAlignment="End"
BorderThickness="0, 1"/>
</local:CustomGroupFooterStyleSelector.CustomStyle>
</local:CustomGroupFooterStyleSelector>
Customizing the Group Footer Appearance
Customizing the footer in the DataGrid also changes the appearance of the aggregates inside the component.
The following example demonstrates how to change the style of the column footer aggregates:
1. Define the footer style in XAML.
<telerik:DataGridColumnFooterStyle x:Key="FooterStyle"
BorderThickness="0, 1"
BorderColor="PaleVioletRed"
TextColor="PaleVioletRed"
TextFontFamily="Italic" />
2. Add the styling to the DataGrid.
<telerik:RadDataGrid x:Name="dataGrid"
AutoGenerateColumns="False"
ShowGroupFooters="True"
ShowColumnFooters="True"
GroupFooterStyleSelector="{StaticResource GroupFooterStyleSelectorResource}"
UserGroupMode="Disabled"
GroupFooterStyle="{StaticResource GroupFooterStyle}"
UserEditMode="Cell">
<telerik:RadDataGrid.Columns>
<telerik:DataGridTextColumn PropertyName="Name"
FooterStyle="{StaticResource FooterStyle}">
<telerik:DataGridTextColumn.AggregateDescriptors>
<telerik:PropertyAggregateDescriptor PropertyName="Name"
Function="Count"
Caption="Total count: " />
</telerik:DataGridTextColumn.AggregateDescriptors>
</telerik:DataGridTextColumn>
<telerik:DataGridNumericalColumn PropertyName="Price"
FooterStyle="{StaticResource FooterStyle}"
CellContentFormat="{}{0:C}">
<telerik:DataGridNumericalColumn.AggregateDescriptors>
<telerik:PropertyAggregateDescriptor PropertyName="Price"
Function="Min"
Format="C"
Caption="Cheapest item: " />
<telerik:PropertyAggregateDescriptor PropertyName="Price"
Function="Max"
Format="C"
Caption="Priciest item: " />
</telerik:DataGridNumericalColumn.AggregateDescriptors>
</telerik:DataGridNumericalColumn>
<telerik:DataGridNumericalColumn PropertyName="DeliveryPrice"
FooterStyle="{StaticResource FooterStyle}"
HeaderText="Delivery Price"
CellContentFormat="{}{0:C}">
<telerik:DataGridNumericalColumn.AggregateDescriptors>
<telerik:PropertyAggregateDescriptor PropertyName="DeliveryPrice"
Function="Average"
Format="C"
Caption="Average: " />
</telerik:DataGridNumericalColumn.AggregateDescriptors>
</telerik:DataGridNumericalColumn>
<telerik:DataGridNumericalColumn PropertyName="Quantity"
FooterStyle="{StaticResource FooterStyle}">
<telerik:DataGridNumericalColumn.AggregateDescriptors>
<telerik:PropertyAggregateDescriptor PropertyName="Quantity"
Function="Sum"
Caption="Total amount: " />
</telerik:DataGridNumericalColumn.AggregateDescriptors>
</telerik:DataGridNumericalColumn>
</telerik:RadDataGrid.Columns>
</telerik:RadDataGrid>
The footer style is added per column.
The following image shows the end result.