NavigationView: Selected visual state of parent item is not activated when child is selected in Fluent theme

Progress® Telerik® UI for WPF Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 19 Aug 2021 07:07 by ADMIN

Release LIB 2021.2.823 (23 Aug 2021)

Martin Ivanov

Created on: 16 Aug 2021 11:44

Category: NavigationView

Type: Bug Report

NavigationView: Selected visual state of parent item is not activated when child is selected in Fluent theme

The parent RadNavigationViewItem doesn't appear selected in case you select one of its sub items, then select another item from the root level and select the first item again.
This reproduces only in the Fluent theme.

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>