Articles in this section
Category / Section

How to customize the styles for SummaryRows in the SfDataGrid in UWP ?

4 mins read

SfDataGrid contains different types of summary rows and their appearance can be easily customized in the UI. The different types of summary rows in the SfDataGrid are,

  • Caption Summary Row
  • Table Summary Row
  • Group Summary Row

The following screenshot illustrates the default appearance of the summary rows in the SfDataGrid.

Default appearance of summary rows in SfDataGrid

Figure 1: Default appearance of summary rows in SfDataGrid

The above summary rows can be styled by customizing its appropriate target type.

Style for CaptionSummaryRow:

SfDataGrid.CaptionSummaryRowStyle property allows you to customize the appearance and styles of the group caption row. The following code example shows the customized style for group caption summary row in the SfDataGrid.

XAML

<Application.Resources>
    <!--Style for CaptionSummaryRowControl-->
    <Style x:Key="CaptionSummaryRowStyle" TargetType="syncfusion:CaptionSummaryRowControl">
        <Setter Property="FontSize" Value="14" />
        <Setter Property="FontFamily" Value="Castellar" />
        <Setter Property="Foreground" Value="Red" />
    </Style>
</Application.Resources>

 

Style for GroupSummaryRow:

SfDataGrid.GroupSummaryRowStyle property allows you to customize the style of the group summary rows. The following code example shows how to customized style for the group summary rows in the SfDataGrid.

XAML

<Application.Resources>
    <!--Style for GroupSummaryRowControl-->   
    <Style x:Key="GroupSummaryRowStyle" TargetType="syncfusion:GroupSummaryRowControl">
        <Setter Property="FontSize" Value="16" />
        <Setter Property="FontFamily" Value="Algerian" />
        <Setter Property="Foreground" Value="Green" />
    </Style>
</Application.Resources>

 

Style for TableSummaryRow:

SfDataGrid.TableSummaryRowStyle property allows you to customize the style and appearance of the table summary rows in the SfDataGrid. The following code example illustrates how to apply the styles for table summary rows in the SfDataGrid.

XAML

<Application.Resources>
    <!--Style for TableSummaryRowControl-->    
    <Style x:Key="TableSummaryRowStyle" TargetType="syncfusion:TableSummaryRowControl">
        <Setter Property="FontSize" Value="18" />
        <Setter Property="FontFamily" Value="Cambria" />
        <Setter Property="Foreground" Value="Orange" />
    </Style>
</Application.Resources>

 

To apply the above customized style, you need to bind the keys CaptionSummaryRowStyle, TableSummaryRowStyle, and GroupSummaryRowStyle to the corresponding property in the SfDataGrid.

XAML

<syncfusion:SfDataGrid x:Name="grid"
                            AllowEditing="True"
                            AllowFiltering="True"
                            AllowGrouping="True"
                            AllowSorting="True"
                            AutoExpandGroups="True"
                            AutoGenerateColumns="False"
                            ColumnSizer="Auto"
                            CaptionSummaryRowStyle="{StaticResource CaptionSummaryRowStyle}"                               
                            GroupSummaryRowStyle="{StaticResource GroupSummaryRowStyle}"
                            TableSummaryRowStyle="{StaticResource TableSummaryRowStyle}"
                            ItemsSource="{Binding YearlySalesDetails}"
                            ShowGroupDropArea="True">

 

The above styles can be applied to the summary rows as shown in the following screenshot.

Customized appearance of summary rows

Figure 2: Customized appearance of summary rows

 

Sample Links:

 

WinRT

UWP

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied