The underline for NavigationViewItems in horizontal mode is too small (new UI)

[harvinders]

Describe the bug

Steps to reproduce the bug

Steps to reproduce the behavior:

1. Create NavigationView with couple of items and set the mode to Horizontal
2. The selected item is underlined
3. The underline is too small and easy to miss

Expected behavior
Selected underline should cover the whole text

Version Info

NuGet package version:
[Microsoft.UI.Xaml.2.6.0-prerelease.210405001]

Windows app type:

UWP	Win32
Yes

Windows 10 version	Saw the problem?
Insider Build (xxxxx)
October 2020 Update (19042)
May 2020 Update (19041)
November 2019 Update (18363)	Yes
May 2019 Update (18362)
October 2018 Update (17763)
April 2018 Update (17134)
Fall Creators Update (16299)
Creators Update (15063)

Device form factor	Saw the problem?
Desktop	Yes
Xbox
Surface Hub
IoT

Additional context

[StephenLPeters]

@chigy FYI

[StephenLPeters]

@karenbtlai FYI as well

[karkarl]

This is a design bug that I can definitely bring up with the design team.

[Shomnipotence]

@karenbtlai FYI as well

Amazing Design~~~~

[harvinders]

While it is looked at, maybe designers should also consider if it makes sense to have the underline beneath the icon too.

…

On Fri, 23 Apr 2021, 22:04 Shomnipotence, ***@***.***> wrote: [image: image] <https://user-images.githubusercontent.com/7758786/115796042-edc4af00-a385-11eb-80fe-95bda480882d.png> @karenbtlai <https://github.com/karenbtlai> FYI as well Amazing Design~~~~ — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#4873 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACBJD5S2SEJGJQMVMZNPVULTKFO5FANCNFSM43KJ5VPA> .

[rcohn]

Hi -

What is the status of this bug? I see the same short line (truncated line) behavior with the Microsoft.WindowsAppSDK 1.0 when trying to create a WinUI3 destop app using C++/Winrt. Is there a fix or workaround?

Here is the xaml:

<Window
    x:Class="DesktopCpp.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:DesktopCpp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

	<Grid>
		<Grid.RowDefinitions>
			<RowDefinition x:Name="navBarRow" Height="50"/>
			<RowDefinition x:Name="midRow" Height="*"/>
			<RowDefinition x:Name="quickBarHelpRow" Height="30"/>
		</Grid.RowDefinitions>

		<Grid.ColumnDefinitions>
			<ColumnDefinition x:Name="sideBarColumn" Width="200"/>
			<ColumnDefinition x:Name="mainContentAreaColumn" Width="*"/>
		</Grid.ColumnDefinitions>

		<NavigationView x:Name="navBarNavigationView" 
					Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
					IsBackButtonVisible="Collapsed"
					IsBackEnabled="False"
					IsSettingsVisible="False"
					PaneDisplayMode="Top"
					VerticalAlignment="Center">
			<NavigationView.MenuItems>
				<NavigationViewItem Tag="TestPage1" Content="Test Page 1"></NavigationViewItem>
				<NavigationViewItem Tag="TestPage2" Content="Test Page 2"></NavigationViewItem>
				<NavigationViewItem Tag="TestPage3" Content="Test Page 3"></NavigationViewItem>
			</NavigationView.MenuItems>
		</NavigationView>
	</Grid>
</Window>

I am at the point where I am seriously considering not using NavigationView in a desktop app. Trying to configure this control and stay current with Microsoft.WindowsAppSDK is not working.

Hopefully you can provide some guidance.

Thank you.

[chigy]

@harvinders , @rcohn ,
This is currently intended design. Our design team is aware of this feedback however is not something we are looking to modifying today.

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 5 days.