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