Query 1:
So, I want to change filtertogglebutton's icon in my project. How can I do that? I think If I can change the path of this button, it will solve my problem but I don't know how to do that.
Your requirement to change the filter toggle button's icon
in SfDataGrid can be achieved by changing the Path in the Filtered and
UnFiltered visual states in FilterToggleButton. Refer to the below code
snippet,
<!-- Customize the style of Filter icon --> <Style TargetType="{x:Type syncfusion:FilterToggleButton}"> ....……………….. …………………. …………………. <VisualStateGroup x:Name="FilterStates"> <VisualState x:Name="Filtered"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_FilterToggleButtonIndicator" Storyboard.TargetProperty="Data"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Geometry>F1M1464.78,374.21C1466.31,374.21,1466.94,375.538,1466.17,376.861L1435.89,429.439C1435.12,430.759,1433.87,430.823,1433.11,429.5L1402.82,376.827C1402.06,375.507,1402.69,374.21,1404.21,374.21L1464.78,374.21</Geometry> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="UnFiltered"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_FilterToggleButtonIndicator" Storyboard.TargetProperty="Data"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Geometry>F1M1464.78,374.21C1466.31,374.21,1466.94,375.538,1466.17,376.861L1435.89,429.439C1435.12,430.759,1433.87,430.823,1433.11,429.5L1402.82,376.827C1402.06,375.507,1402.69,374.21,1404.21,374.21L1464.78,374.21</Geometry> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </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="F1M1464.78,374.21C1466.31,374.21,1466.94,375.538,1466.17,376.861L1435.89,429.439C1435.12,430.759,1433.87,430.823,1433.11,429.5L1402.82,376.827C1402.06,375.507,1402.69,374.21,1404.21,374.21L1464.78,374.21" Fill="{TemplateBinding Foreground}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Stretch="Fill" /> </Border> ....……………….. …………………. …………………. </Style> |
Find the sample in the attachment.
If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.