Microsoft-ui-xaml: Question: How come NavigationView's collapsed pane width is 40px instead of 48px? 48px is width of start menu button.

Created on 15 Feb 2020  ·  8Comments  ·  Source: microsoft/microsoft-ui-xaml

NavigationView's default collapsed pane with is 40px. When you maximize your UWP app, here's how the collapsed pane aligns with the start menu:
image

I performed 3 changes to the style and the constants used by the navigation view to change this to 48px, and now it lines up well with the start button.
image

Note that changing the CollapsedPaneLength property is not a complete solution to this problem because the icons and the hamburger menu do not expand to use the new width.

Anyway, is there a reason 40px was selected? If it was an arbitrary decision, what's the possibility of changing this to 48px?

area-External question

Most helpful comment

No, they shouldn't need to be made aligned. 40px is the standard size of buttons used on the NavigationView and works well with both touch and mouse. On the Start Menu, the Start button is wider than the rest of the app icons which I believe are also 40px wide.

Note you could make all the buttons on the Start Menu smaller too. They are just not meant to be aligned with your app's side navigation control.

All 8 comments

No, they shouldn't need to be made aligned. 40px is the standard size of buttons used on the NavigationView and works well with both touch and mouse. On the Start Menu, the Start button is wider than the rest of the app icons which I believe are also 40px wide.

Note you could make all the buttons on the Start Menu smaller too. They are just not meant to be aligned with your app's side navigation control.

The NavigationView's pane shouldn't align with the Start Menu for many reasons, including the ones explained by Justin but I would add:

  • 8px is a lot (it's a 20% increase), especially when in Portrait (snap view or tablets), we shouldn't decrease the space available for the rest of the app for this reason.
  • Not align the start menu and this pane is probably a good idea in reality, it creates a clear separation between the app and the OS hosting the app, if you perfectly align your panels with the start menu, the search bar and other buttons in the taskbar, I'm afraid this will make your application harder to understand at first glance as everything (app and the OS) will be mixed up.

74594498-351a1780-4fec-11ea-8939-66583318f163
_Hard to see where is the limit between the content (the app) and the host (the OS)_

It should line up.
You can't have consistency without being consistent.

With that being said, it would be easier for the Shell team to make the start menu and buttons 40px.

It should line up.
You can't have consistency without being consistent.

With that being said, it would be easier for the Shell team to make the start menu and buttons 40px.

10X doesn't have the start button on the left by default, and not every app runs in full screen - so this is one of those areas where alignment only matters in a small case, but has lots of consequences.

Not only that, Windows10X doesn't have the same type of Start Menu. The issue probably won't come up.

@YuliKl can you route this issue to the appropriate folks ?

I appreciate the discussion. I wasn't proposing anything official. I was mostly wondering about the design decision. Closing ticket.

@dpaulino, NavigationView's design is not expected to align perfectly with Windows 10 Start button, for the reasons @JustinXinLiu, @rudyhuyn and @mdtauk described. I want to add that several releases back we had tightened up NavigationView's UX to address feedback that the 48px widths felt insufficiently dense.

Was this page helpful?
0 / 5 - 0 ratings