Articles in this section
Category / Section

How to change the FilterToggleButton color while filtering in UWP DataGrid ?

4 mins read

In SfDataGrid, FilterToggleButton is present in the Column Header that is used to open the Filter Pop up window. The appearance of FilterToggleButton is customized by using FilterToggleButton control template that have two visual state: Filtered and UnFiltered respectively. When the Filter is applied then the Filtered visual state is applied to the FilterToggleButton else UnFiltered visual state is applied. The Default style is applied to the FilterToggleButton.

In this section, you can learn how to change the FilterToggleButton color after filtering and create the custom style for FilterToggleButton. PathFillColor is the SolidColorBrush applied to the FilterToggleButton. When the Filter is applied then the PathFillColor is changed to Red else PathFillColor is changed to Gray. Refer the following code example,

XAML

<Style TargetType="syncfusion:FilterToggleButton">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="syncfusion:FilterToggleButton">
                <Grid SnapsToDevicePixels="True">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="MouseOver" />
                            <VisualState x:Name="Pressed" />
                            <VisualState x:Name="Disabled" />
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FilterStates">
                            <VisualState x:Name="Filtered">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_FilterToggleButtonIndicator" Storyboard.TargetProperty="Data">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Geometry>M2.1299944,9.9798575L55.945994,9.9798575 35.197562,34.081179 35.197562,62.672859 23.428433,55.942383 23.428433,33.52121z M1.3001332,0L56.635813,0C57.355887,0,57.935946,0.5891428,57.935946,1.3080959L57.935946,2.8258877C57.935946,3.5448422,57.355887,4.133985,56.635813,4.133985L1.3001332,4.133985C0.58005941,4.133985,-2.3841858E-07,3.5448422,0,2.8258877L0,1.3080959C-2.3841858E-07,0.5891428,0.58005941,0,1.3001332,0z</Geometry>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ColorAnimation Storyboard.TargetName="PathFillColor" Storyboard.TargetProperty="Color"  To="Red" Duration="0:0:0:1"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="UnFiltered">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_FilterToggleButtonIndicator" Storyboard.TargetProperty="Data">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Geometry>F1M-2124.61,-1263.65L-2131.54,-1263.72 -2145.51,-1263.84 -2152.41,-1263.9C-2155.99,-1263.93,-2157.48,-1262.16,-2155.7,-1259.96L-2152.05,-1255.43C-2150.28,-1253.23,-2147.38,-1249.62,-2145.61,-1247.42L-2143.25,-1244.5 -2143.25,-1230.24C-2143.25,-1229.23,-2142.43,-1228.42,-2141.42,-1228.42L-2135.64,-1228.42C-2134.63,-1228.42,-2133.81,-1229.23,-2133.81,-1230.24L-2133.81,-1244.78 -2131.7,-1247.3C-2129.89,-1249.47,-2126.93,-1253.02,-2125.12,-1255.18L-2121.39,-1259.65C-2119.57,-1261.82,-2121.02,-1263.62,-2124.61,-1263.65z</Geometry>
                                                </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ColorAnimation Storyboard.TargetName="PathFillColor" Storyboard.TargetProperty="Color" To="Gray" Duration="0:0:0:1"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                    <Border Width="{TemplateBinding Width}"
                            Height="{TemplateBinding Height}"
                            Background="{TemplateBinding Background}"
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
                            <Path Name="PART_FilterToggleButtonIndicator"
                                Margin="3"
                                Data="F1M-2124.61,-1263.65L-2131.54,-1263.72 -2145.51,-1263.84 -2152.41,-1263.9C-2155.99,-1263.93,-2157.48,-1262.16,-2155.7,-1259.96L-2152.05,-1255.43C-2150.28,-1253.23,-2147.38,-1249.62,-2145.61,-1247.42L-2143.25,-1244.5 -2143.25,-1230.24C-2143.25,-1229.23,-2142.43,-1228.42,-2141.42,-1228.42L-2135.64,-1228.42C-2134.63,-1228.42,-2133.81,-1229.23,-2133.81,-1230.24L-2133.81,-1244.78 -2131.7,-1247.3C-2129.89,-1249.47,-2126.93,-1253.02,-2125.12,-1255.18L-2121.39,-1259.65C-2119.57,-1261.82,-2121.02,-1263.62,-2124.61,-1263.65z"
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                Stretch="Fill" >
                                    <Path.Fill>
                                        <SolidColorBrush x:Name="PathFillColor" Color="Gray"/>
                                    </Path.Fill>
                            </Path>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

 

C:\Users\labuser\Desktop\note.jpgNote: Refer the following code example for customize the FilterToggleButton Color in WinRT.

 

<Style TargetType="syncfusion:FilterToggleButton">            
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="syncfusion:FilterToggleButton">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="FilterStates">
                            <VisualState x:Name="Filtered">
                                <Storyboard BeginTime="0">
                                    <ObjectAnimationUsingKeyFrames BeginTime="0"
                                                                Duration="1"
                                                                Storyboard.TargetName="PART_FilterToggleButtonIndicator"
                                                                Storyboard.TargetProperty="Data">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="M2.1299944,9.9798575L55.945994,9.9798575 35.197562,34.081179 35.197562,62.672859 23.428433,55.942383 23.428433,33.52121z M1.3001332,0L56.635813,0C57.355887,0,57.935946,0.5891428,57.935946,1.3080959L57.935946,2.8258877C57.935946,3.5448422,57.355887,4.133985,56.635813,4.133985L1.3001332,4.133985C0.58005941,4.133985,-2.3841858E-07,3.5448422,0,2.8258877L0,1.3080959C-2.3841858E-07,0.5891428,0.58005941,0,1.3001332,0z" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ColorAnimation Storyboard.TargetName="PathFillColor" Storyboard.TargetProperty="Color"  To="Red" Duration="00:00:01" BeginTime="0"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="UnFiltered">
                                <Storyboard BeginTime="0">
                                    <ObjectAnimationUsingKeyFrames BeginTime="0"
                                                                Duration="1"
                                                                Storyboard.TargetName="PART_FilterToggleButtonIndicator"
                                                                Storyboard.TargetProperty="Data">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="M0,0 L118.49799,0 L72.811813,53.068943 L72.811813,116.02525 L46.897243,101.20534 L46.897243,51.835941 z" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ColorAnimation Storyboard.TargetName="PathFillColor" Storyboard.TargetProperty="Color"  To="Gray" Duration="00:00:01" BeginTime="0"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border Width="{TemplateBinding Width}"
                        Height="{TemplateBinding Height}"
                        Background="Transparent">
                        <Path Name="PART_FilterToggleButtonIndicator"
                            Margin="{TemplateBinding Margin}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            Data="M0,0 L118.49799,0 L72.811813,53.068943 L72.811813,116.02525 L46.897243,101.20534 L46.897243,51.835941 z"                                  
                            Stretch="Fill" >
                            <Path.Fill>
                                <SolidColorBrush x:Name="PathFillColor" Color="Gray"/>
                            </Path.Fill>
                        </Path>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

 

Note: The above code snippet is only applicable for WinRT. For other platforms refer respective samples.

Refer the following screenshot for change the FilterToggleButton color after Filtering,

In the above screenshot, Filter is applied to the Name column and the FilterToggleButton color in Name column is changed to Red.

Sample Links:

WPF

WRT

SilverLight

UWP


Conclusion

I hope you enjoyed learning about how to change the FilterToggleButton color while filtering in UWP DataGrid.

You can refer to our UWP DataGrid feature tourpage to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our UWP DataGrid example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

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