Navigation View - Highlight of selected item when using subitems

[Philipp]

Hello

I have a question regarding highlighting of selected item in navigation view. I noted a behavior in context of subitems where I'm not sure if it behaves like designed or if it is a bug. With term "highlight" I mean the small colored block that appears at the selected item.

For demonstration I used from WPF Demos the "Sub Items" example. Attached there is a Windows steps recorder session (can be opened with e.g. Internet Explorer) that contains screenshots from every click and I can refer to the step numbers.

I can observe the behavior when navigation view is collapsed (shows only icons).

Short:

After a subitem was selected the highlight is not shown anymore when selecting the corresponing (main)item.

 

Long:

First I switch between different items with and without subitems. Everything is like expected, the selected item shows the highlight (Step 1 - Step 12).

Then I select a subitem. Still, highlight is shown at (main)item (Step 13- Step 14).

Next I click on another item that still behaves fine (Step 15)

Now, when I click again on the (main)item, where I selected the subitem before, the highlight is not shown anymore (Step 16)

I can click on the item several times. Just the subitems (dis)appear but no highlight (Step 17 - 19)

Only when I select a subitem the highlight appears (Step 20 - Step 21)

Again, click on (main)item, it is selected but no highlight (Step 22 - Step 24)

 

Is this behavior intended? If so, can someone explain me the idea behind it. For me it feels strange at the moment.

 

Thanks and regards

Philipp

 

[Martin Ivanov]

Hello Philipp,

Thank you for the detailed information. The reported behavior is an issue with the Fluent theme. This is not presented with the other Telerik themes.

I have logged a new report in the WPF feedback portal where you can track its status. You can also find your Telerik points updated.

In the meantime, you can work this around by extracting the ControlTemplate of RadNavigationViewItem and removing the ExitAction of the following MultiDataTrigger.

<MultiDataTrigger>
	<MultiDataTrigger.Conditions>
		<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsExpanded}" Value="False"/>
		<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=HasSelectedSubItem}" Value="True"/>
	</MultiDataTrigger.Conditions>
	<MultiDataTrigger.EnterActions>
		<BeginStoryboard>
			<Storyboard>
				<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RenderTransform.ScaleY" Storyboard.TargetName="SelectedVisual">
					<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
					<EasingDoubleKeyFrame KeyTime="0:0:0.15" Value="1">
						<EasingDoubleKeyFrame.EasingFunction>
							<SineEase EasingMode="EaseIn"/>
						</EasingDoubleKeyFrame.EasingFunction>
					</EasingDoubleKeyFrame>
				</DoubleAnimationUsingKeyFrames>
			</Storyboard>
		</BeginStoryboard>
	</MultiDataTrigger.EnterActions>
	<MultiDataTrigger.ExitActions>
		<BeginStoryboard>
			<Storyboard>
				<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="RenderTransform.ScaleY" Storyboard.TargetName="SelectedVisual">
					<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
					<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0">
						<EasingDoubleKeyFrame.EasingFunction>
							<SineEase EasingMode="EaseIn"/>
						</EasingDoubleKeyFrame.EasingFunction>
					</EasingDoubleKeyFrame>
				</DoubleAnimationUsingKeyFrames>
			</Storyboard>
		</BeginStoryboard>
	</MultiDataTrigger.ExitActions>
	<Setter TargetName="SelectedVisual" Property="Opacity" Value="1"/>
	<Setter TargetName="BackgroundVisual" Property="Background" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(mat:MaterialAssist.PressedBrush), Mode=OneWay}"/>
</MultiDataTrigger>

Then you can apply the modified template, using the ItemContainerStyle of RadNavigationView.

<telerik:RadNavigationView.ItemContainerStyle>
	<Style TargetType="telerik:RadNavigationViewItem">		
		<Setter Property="Template" Value="{StaticResource CustomNavigationViewItemControlTemplate}" />
	</Style>
</telerik:RadNavigationView.ItemContainerStyle>

Can you try this and let me know if it helps? 

Regards,
Martin Ivanov
Progress Telerik

[Philipp]

Hello Martin,

thanks for your support. 

At first glance the workaround works.

 

I attached a sample project (.Net Core) using it in case somebody is interested in.

 

Regards

Philipp

[Martin Ivanov]

Thank you for sharing your solution. I believe that this is going to be useful to anyone else who may hit the issue.