Category / Section
How to restrict the item selection by clicking the item in the Hierarchy Navigator control?
1 min read
To restrict the item selection while clicking the item, IsHitTestVisible property is set to ‘False’ for content control in style file. This allows to select the item only from Popup. In the following HierarchyNavigatorBarContent style file, IsHitTestVisible property is set to ‘False’ for content control and this restricts the selection by clicking the item.
XAML
<Style x:Key="navigatorstyle" TargetType="{x:Type syncfusion:HierarchyNavigatorBarContent}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type syncfusion:HierarchyNavigatorBarContent}">
<Grid x:Name="PART_Root" Background="Transparent" Opacity="{TemplateBinding Opacity}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
</Storyboard>
</VisualState>
<VisualState x:Name="Open">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_NavigationButton" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource HierarchyNavigatorSelectedBorderBrushKey}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_OuterBorder" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource HierarchyNavigatorSelectedBrushKey}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="PART_LeftLine" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="PART_FirstLine" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="PART_RightLine" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Close">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PART_PopUpBorder" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PART_PopUpBorder" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_NavigationButton" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource HierarchyNavigatorMouseOverBackgroundBrushKey}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_OuterBorder" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource HierarchyNavigatorMouseOverBackgroundBrushKey}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="PART_LeftLine" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="PART_FirstLine" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="PART_RightLine" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="NavigationButtonMouseOver">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="PART_MouseOverNavigationButton" Storyboard.TargetProperty="Opacity" To="1"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_OuterBorder" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ContentMouseOverBackgroundBrushKey}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PART_path" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="90"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_NavigationButton" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource HierarchyNavigatorSelectedBorderBrushKey}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_OuterBorder" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource HierarchyNavigatorSelectedBrushKey}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="PART_LeftLine" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="PART_FirstLine" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="PART_RightLine" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Released">
<Storyboard>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="PART_OuterBorder" BorderThickness="0" Padding="0" Margin="0,1,0,0">
<Grid x:Name="PART_LayoutRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="0" />
</Grid.RowDefinitions>
<Line x:Name="PART_FirstLine" Y2="1" Stretch="UniformToFill" Stroke="{StaticResource HierarchyNavigatorMouseOverBorderBrushKey}" StrokeThickness="0.5" Fill="{StaticResource HierarchyNavigatorMouseOverBorderBrushKey}" VerticalAlignment="Stretch" HorizontalAlignment="Left" Grid.Column="0" Margin="0,0,0,0" Grid.RowSpan="2" Visibility="Collapsed" />
<ContentControl Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" x:Name="PART_ContentControl"
HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalAlignment="Center" VerticalContentAlignment="Center"
Foreground="{Binding Foreground}" IsHitTestVisible="False" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" FontWeight="{TemplateBinding FontWeight}" />
<ToggleButton Style="{StaticResource HNDropDownButtonTemplate}" Grid.Column="1" Width="20" x:Name="PART_NavigationButton" Background="Transparent" BorderBrush="Transparent" Grid.RowSpan="2" VerticalAlignment="Stretch" Visibility="{TemplateBinding NextButtonVisibility}" SnapsToDevicePixels="True" BorderThickness="1,0,1,0" Margin="-1,0,-1,0">
<Grid>
<Border Width="20" VerticalAlignment="Stretch" Opacity="0" x:Name="PART_MouseOverNavigationButton" Background="{StaticResource HierarchyNavigatorMouseOverBackgroundBrushKey}" BorderBrush="Transparent" Visibility="{TemplateBinding NextButtonVisibility}"/>
<Path x:Name="PART_path" Fill="{StaticResource GlyphBrushKey}" Stretch="Fill" Height="7" HorizontalAlignment="Center" VerticalAlignment="Center" Width="3.8" Data="M 0,0 L 4,3.5 L 0,7 Z" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
<Line x:Name="PART_LeftLine" Y2="1" Stretch="UniformToFill" Stroke="{StaticResource HierarchyNavigatorMouseOverBorderBrushKey}" StrokeThickness="0.5" Fill="{StaticResource HierarchyNavigatorMouseOverBorderBrushKey}" VerticalAlignment="Stretch" HorizontalAlignment="Left" Margin="0,0,0,0" Visibility="Collapsed" />
</Grid>
</ToggleButton>
<Line x:Name="PART_RightLine" Y2="1" Stretch="UniformToFill" Stroke="{StaticResource HierarchyNavigatorMouseOverBorderBrushKey}" StrokeThickness="0.5" Fill="{StaticResource HierarchyNavigatorMouseOverBorderBrushKey}" VerticalAlignment="Stretch" HorizontalAlignment="Right" Grid.Column="1" Grid.RowSpan="2" Visibility="Collapsed" />
<Popup x:Name="PART_HierarchyNavigatorDropDownPopup" StaysOpen="False" AllowsTransparency="True" IsOpen="{TemplateBinding IsPopupOpen}" Grid.Column="1" Placement="Right" VerticalOffset="{TemplateBinding ActualHeight}" Grid.Row="1" HorizontalOffset="-30">
<Border x:Name="PART_PopUpBorder" Opacity="{TemplateBinding Opacity}" BorderBrush="{StaticResource HierarchyNavigatorDropDownBorderBrushKey}" Background="{StaticResource HierarchyNavigatorDropDownBackgroundBrushKey}" BorderThickness="1" MinWidth="220" Margin="0,0.2,0,0">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="0" ScaleY="0"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
<Grid x:Name="PART_Container">
<Rectangle Fill="{StaticResource HierarchyNavigatorPopupLeftBackgroundBrushKey}"
x:Name="PART_LeftBar" HorizontalAlignment="Left" Width="28" RadiusX="2" RadiusY="2"/>
<Rectangle HorizontalAlignment="Left"
Width="1" StrokeThickness="0.5" Margin="27,0,0,0" x:Name="PART_ItemSeparatorFill" Stroke="{StaticResource HierarchyNavigatorMenuItemSeparatorFillKey}"/>
<Rectangle HorizontalAlignment="Left"
Width="1" Margin="28,0,0,0" StrokeThickness="0.5" x:Name="PART_ItemSeparatorStroke" Stroke="{StaticResource HierarchyNavigatorMenuItemSeparatorStrokeKey}"/>
<ScrollViewer x:Name="PART_ScrollViewerRoot" VerticalScrollBarVisibility="Auto" MaxHeight="212" Padding="2" BorderThickness="0" HorizontalScrollBarVisibility="Auto">
<ItemsPresenter x:Name="PART_ItemsPresenter" />
</ScrollViewer>
</Grid>
</Border>
</Popup>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
XAML
<syncfusion:HierarchyNavigator Loaded="hierarchyNavigator1_Loaded" x:Name="hierarchyNavigator1" HierarchyNavigatorSelectedItemChanged="hierarchyNavigator1_HierarchyNavigatorSelectedItemChanged"
ItemsSource="{Binding FileItems}" ItemTemplate="{StaticResource ItemGroupTemplate}">
</syncfusion:HierarchyNavigator>
C#
private void hierarchyNavigator1_HierarchyNavigatorSelectedItemChanged(object sender, HierarchyNavigatorSelectedItemChangedEventArgs e)
{
HierarchyNavigatorItemsControl control = (hierarchyNavigator1.Template.FindName("PART_HierarchyNavigatorItemsControl", hierarchyNavigator1) as HierarchyNavigatorItemsControl);
if (control != null)
control.ItemContainerStyle = this.Resources["navigatorstyle"] as Style;
}
private void hierarchyNavigator1_Loaded(object sender, RoutedEventArgs e)
{
HierarchyNavigatorItemsControl control = (hierarchyNavigator1.Template.FindName("PART_HierarchyNavigatorItemsControl", hierarchyNavigator1) as HierarchyNavigatorItemsControl);
if (control != null)
control.ItemContainerStyle = this.Resources["navigatorstyle"] as Style;
}
The above code example is used to select the item from popup and the screenshot is as follows.
Figure 1: Selecting the item from popup
