NavigationViewItem template should respect CompactPaneLength

Describe the bug The NavigationViewItem are partially hidden by the MenuItemsHost’s scrollbar when `NavigationView.PaneDisplayMode=“LeftCompact”.

Steps to reproduce the bug

1. Create a new app with a NavigationView containing a lot of NavigationViewItems

<mux:NavigationView PaneDisplayMode="LeftCompact">
    <mux:NavigationView.MenuItems>
        <mux:NavigationViewItem Content="Item 1">
            <mux:NavigationViewItem.Icon>
                <SymbolIcon Symbol="Add" />
            </mux:NavigationViewItem.Icon>
        </mux:NavigationViewItem>
[…]
        <mux:NavigationViewItem Content="Item 9">
            <mux:NavigationViewItem.Icon>
                <SymbolIcon Symbol="UnPin" />
            </mux:NavigationViewItem.Icon>
        </mux:NavigationViewItem>
    </mux:NavigationView.MenuItems>
</mux:NavigationView>

1. Run the application
2. Resize the window to force the MenuItemsHost to show its scrollbar

Expected behavior The scrollbar is displayed on the edge and not covering the icons.

Screenshots Actual bevavior

Notice that the icons are half hidden making it hard to determine what is each entry.

Expected bevahior The screenshots come from Groove Music. Notice that the scrollbar is not hiding the icons:

Additional context NavigationView has a CompactPaneLength property that seems to be useful to get what we need but it doesn’t give the expected result at all: The label of the NavigationViewItem are shown and the hamburger and back icons are no longer centered.

Comparing the sample app and Groove, we can see that Groove is using a wider compact bar to have enough room for the scrollbar.

It would be great to have the same behavior in NavigationView to let the users properly see all the navigation icons when in compact mode;

NavViewScrollBar.zip

Proposed fix [Edited by @YuliKl ] Update NavigationViewItem template to respect CompactPaneLength as the width of its first column. Also recenter the back and hamburger buttons when NavigationView is not in Top mode.

[YuliKl]

@YuliKl , are you suggesting that the icons be centered in now a little wider pane? I think it is problematic because that would shift the icons off from the side of the app as well as you would need to make it even wider because the scrollbar will still cover the portion of the UI?

I am suggesting this, yes. This is the Groove Music behavior that @vgromfeld noted. The decision to widen the sliver will be entirely up to the app, we won’t change the control’s default 40px width.

I believe today the icons are centered inside inside the template’s first column. Keeping them centered within a 40px strip while allowing the column’s width to be changed feels unnecessarily complex.

[marbaa]

We’re hesitant to change the design here. This is the behavior of scrollviewer and the scrollbar overlapping content in this case is the intended design.

I think there’s an argument for the scenario where the system setting is turned on to “never hide scrollbars” where the scrollbar would overlap all the time. But the only really good option we have is for the compact NavigationView mode to be bigger. And then we’re taking away space from the app in a scenario they probably have never tested and don’t even know to test.

CompactPaneLength would probably work but you’d need to retemplate the NavigationViewItems to handle the width change correctly.

We could re-purpose this item to track the issue where CompactPaneLength isn’t applying to the layout of the NavigationViewItems by default if you want?

So, you invented design of control with only one option in mind and that is “Automatically hide scrollbars” in Windows Settings. You didn’t care how the control will behave with “Always enabled scrollbars” and basically it is impossible to fix now. That’s funny.

I really don’t understand obsession making basic window controls smaller/hidden/removed where vast majority of displays are > 1080p since Win10 was released and saving 10 more pixels but sacrifying usability.

Automatically hide scrollbars, who wants to wait until they show up…