Articles in this section
Category / Section

How to customize the filtering and sorting icons in WPF DataGrid (SfDataGrid)?

3 mins read

You can customize the appearance of Filter and Sort icon of WPF DataGrid (SfDataGrid) by override the styles of FilterToggleButton and GridHeaderCellControl. And change the appearance of filter popup by override the style of GridFilterControl.

Customize the appearance of Sort icon

The appearance of sort indicator can be customized by override the style of GridHeaderCellControl. Under the PART_SortButtonPresenter, you can change its path value to specify expected customized appearance for both Ascending and Descending sort icons. Refer the below code, here the sort icon default color is changed from Gray to Red.

<!-- Customize the style of Sort icon -->
<syncfusion:SortDirectionToVisibilityConverter x:Key="sortDirectionToVisibilityConverter" />
<syncfusion:SortDirectionToWidthConverter x:Key="sortDirectionToWidthConverter" />
<Style TargetType="syncfusion:GridHeaderCellControl">           
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="syncfusion:GridHeaderCellControl">
                <Grid>
            <!--SortIcon part-->
                            <Grid x:Name="PART_SortButtonPresenter"
                            Grid.Column="1"
                            SnapsToDevicePixels="True">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="0" MinWidth="{Binding Path=SortDirection, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource sortDirectionToWidthConverter}}" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
 
                                <Path Width="8.938"
                                Height="8.138"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Data="F1M753.644,-13.0589L753.736,-12.9639 753.557,-12.7816 732.137,8.63641 732.137,29.7119 756.445,5.40851 764.094,-2.24384 764.275,-2.42352 771.834,5.1286 796.137,29.4372 796.137,8.36163 774.722,-13.0589 764.181,-23.5967 753.644,-13.0589z"
                                Fill="Red"
                                SnapsToDevicePixels="True"
                                Stretch="Fill"
                                Visibility="{Binding Path=SortDirection,
                                            RelativeSource={RelativeSource TemplatedParent},
                                            ConverterParameter=Ascending,
                                            Converter={StaticResource sortDirectionToVisibilityConverter}}">
                                    <Path.RenderTransform>
                                        <TransformGroup>
                                            <TransformGroup.Children>
                                                <RotateTransform Angle="0" />
                                                <ScaleTransform ScaleX="1" ScaleY="1" />
                                            </TransformGroup.Children>
                                        </TransformGroup>
                                    </Path.RenderTransform>
                                </Path>
                              <Path Width="8.938"
                                Height="8.138"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Data="F1M181.297,177.841L181.205,177.746 181.385,177.563 202.804,156.146 202.804,135.07 178.497,159.373 170.847,167.026 170.666,167.205 163.107,159.653 138.804,135.345 138.804,156.42 160.219,177.841 170.76,188.379 181.297,177.841z"
                                Fill="Red"
                                SnapsToDevicePixels="True"
                                Stretch="Fill"
                                Visibility="{Binding Path=SortDirection,
                                            RelativeSource={RelativeSource TemplatedParent},
                                            ConverterParameter=Decending,
                                            Converter={StaticResource sortDirectionToVisibilityConverter}}">
                                    <Path.RenderTransform>
                                        <TransformGroup>
                                            <TransformGroup.Children>
                                                <RotateTransform Angle="0" />
                                                <ScaleTransform ScaleX="1" ScaleY="1" />
                                            </TransformGroup.Children>
                                        </TransformGroup>
                                    </Path.RenderTransform>
                                </Path>
                                <TextBlock Grid.Column="1"
                                    Margin="0,-4,0,0"
                                    VerticalAlignment="Center"
                                    FontSize="10"
                                    Foreground="{TemplateBinding Foreground}"
                                    SnapsToDevicePixels="True"
                                    Text="{TemplateBinding SortNumber}"
                                    Visibility="{TemplateBinding SortNumberVisibility}" />
                            </Grid>
            <!--FilterToggleButton part-->
                            <syncfusion:FilterToggleButton x:Name="PART_FilterToggleButton"
                                                    Grid.Column="2"
                                                    HorizontalAlignment="Stretch"
                                                    VerticalAlignment="Stretch"
                                                    SnapsToDevicePixels="True"
                                                    Visibility="{TemplateBinding FilterIconVisiblity}" />
                        </Grid>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

 

Customize the appearance of Filter icon

The appearance of filter icon can be customized by override the FilterToggleButton style. Refer the below code, here the filter icon default color is changed from Gray to Red and the height of filter icon is changed the default value to 14.

<!-- Customize the style of Filter icon -->
<Style TargetType="syncfusion:FilterToggleButton">
    <Setter Property="Height" Value="14"/>
    <Setter Property="Width" Value="20" />
    <Setter Property="Foreground" Value="Red"/>
</Style>

 

The following screenshot displays the customized Filter and Sort icon of GridHeaderCellControl in SfDataGrid.

Display the filter and sort icon in WPF DataGrid

 

Customize the appearance of Filter-Popup

You can customize the appearance of filter popup by overriding the style of GridFilterControl. Under the PART_OkButton and PART_CancelButton, you can change the appearance for both buttons. Refer the below code, here the filter popup button default background color is changed from Transparent to LightBlue and Foreground color is changed from Gray to Red.

<Style  TargetType="syncfusion:GridFilterControl">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="syncfusion:GridFilterControl">
                . . . . 
                . . . .
                <StackPanel Margin="0,10,4,5"
                        HorizontalAlignment="Right"
                        Orientation="Horizontal">
                                            <Button x:Name="PART_OkButton"
                        Width="100"
                        Margin="5,0,0,0"
                        HorizontalAlignment="Stretch"
                        Background="LightBlue"
                        BorderBrush="{StaticResource FilterButtonNormalBorder}"
                        Content="{Binding Source={x:Static Member=syncfusion:GridResourceWrapper.OK}}"
                        Foreground="Red"
                        FontFamily="{TemplateBinding FontFamily}"
                        FontSize="{TemplateBinding FontSize}"        
                        FontStretch="{TemplateBinding FontWeight}"
                        FontStyle="{TemplateBinding FontStyle}"
                        FontWeight="{TemplateBinding FontWeight}"
                        IsEnabled="False"
                        Visibility="{Binding ImmediateUpdateColumnFilter,
                                                RelativeSource={RelativeSource TemplatedParent},
                                                Converter={StaticResource ResourceKey=boolToVisiblityConverter},
                                                ConverterParameter=InverseVisiblity}" />
                        <Button x:Name="PART_CancelButton"
                        Width="100"
                        Margin="5,0,0,0"
                        HorizontalAlignment="Stretch"
                        Background="LightBlue"
                        BorderBrush="{StaticResource FilterButtonNormalBorder}"
                        FontFamily="{TemplateBinding FontFamily}"
                        FontSize="{TemplateBinding FontSize}"        
                        FontStretch="{TemplateBinding FontWeight}"
                        FontStyle="{TemplateBinding FontStyle}"
                        FontWeight="{TemplateBinding FontWeight}"
                        Content="{Binding ImmediateUpdateColumnFilter,
                                            RelativeSource={RelativeSource TemplatedParent},
                                            Converter={StaticResource resourceNameConverter}}"
                        Foreground="Red" />
                </StackPanel>
                . . . . 
                . . . . 
                . . . .
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

 

Applying the filter in WPF DataGrid

View sample in GitHub.

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