Articles in this section
Category / Section

How to change the expander icon in WPF TreeGrid?

8 mins read

The default symbol of expander is +/- in WPF TreeGrid (SfTreeGrid). You can be able to change the tree grid expander by customizing the TreeGridExpander style.

<Window.Resources>
    <Style TargetType="syncfusion:TreeGridExpander">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="syncfusion:TreeGridExpander">
                    <Grid Background="{TemplateBinding Background}"
                          SnapsToDevicePixels="True">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="ExpansionStates">
                                <VisualState x:Name="Collapsed" />
                                <VisualState x:Name="Expanded">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames 
                                            BeginTime="00:00:00"
                                            Duration="00:00:00"
                                            Storyboard.TargetName="PART_GridExpanderCellPath"
                                            Storyboard.TargetProperty="RenderTransform">
                                            <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <RotateTransform Angle="0" />
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Path x:Name="PART_GridExpanderCellPath"
                              Width="10"
                              Height="10"
                              Margin="2,0,0,0"
                              HorizontalAlignment="Center"
                              VerticalAlignment="Center"
                              Fill="{TemplateBinding Foreground}"
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"
                              SnapsToDevicePixels="True"
                              Stretch="Fill"
                              Stroke="{TemplateBinding Foreground}"
                              UseLayoutRounding="False">
                            <Path.RenderTransform>
                                <TransformGroup>
                                    <TransformGroup.Children>
                                        <RotateTransform Angle="270" 
                                                        CenterX="4" 
                                                        CenterY="4" />
                                    </TransformGroup.Children>
                                </TransformGroup>
                            </Path.RenderTransform>
                        </Path>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

SfTreeGrid Expander Icon customization


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  to leave a comment
Access denied
Access denied