Articles in this section
Category / Section

How to remove the “Folder” icon in the DropDownMenu of the HierarchyNavigator?

1 min read

To remove the image of Folder icon, override the HierarchyNavigatorDropDownItem style and set collapse to Canvas that contains the Folder icon path.

Refer to the following code example.

XAML

<Style  TargetType="{x:Type syncfusion:HierarchyNavigatorDropDownItem}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type syncfusion:HierarchyNavigatorDropDownItem}">
                            <Grid x:Name="PART_Root" Background="Transparent"  Opacity="{TemplateBinding Opacity}" MinHeight="26">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0" Storyboard.TargetName="PART_MouseOverRoot" Storyboard.TargetProperty="Opacity" To="1"/>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Border x:Name="PART_MouseOverRoot" Opacity="0" BorderThickness="1" Background="{StaticResource HierarchyNavigatorMenuItemMouseOverBrushKey}" BorderBrush="{StaticResource HierarchyNavigatorMenuItemMouseOverBorderBrush}" CornerRadius="2" />
                                <Border x:Name="PART_BorderRoot" BorderThickness="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="2">
                                    <Grid x:Name="PART_LayoutRoot">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="30" />
                                            <ColumnDefinition />
                                        </Grid.ColumnDefinitions>
                                        <Canvas x:Name="PART_FolderIcon" Visibility="Collapsed" Margin="0,1" Width="14" Height="16" Canvas.Left="0" Canvas.Top="0">
                                        </Canvas>
                                        <ContentControl x:Name="PART_ContentControl" HorizontalAlignment="Left" VerticalAlignment="Center" Content="{TemplateBinding Content}" 
                                                FontWeight="{TemplateBinding HighLightSelectedItem}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="3,0,2,0" Grid.Column="1" 
                                                Foreground="{TemplateBinding Foreground}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" />
                                    </Grid>
                                </Border>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

XAML

<syncfusion:HierarchyNavigator  x:Name="hierarchyNavigator1" 
 ItemsSource="{Binding FileItems}" ItemTemplate="{StaticResource ItemGroupTemplate}" >
 </syncfusion:HierarchyNavigator>

The following screenshot displays the DropDownItem without any icon.

Figure 1: DropDownItem without any icon

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