Question: Why does NavigationView enforce min width for custom content pane

[marcelwgn]

The NavigationView enforces a minwidth of 48px for custom pane content when in DisplayMode top:

microsoft-ui-xaml/dev/NavigationView/NavigationView.xaml

Line 236 in 1672b33

<ColumnDefinition Width="*" MinWidth="48"/>

However this can seem a bit strange in compact overlay which allows a very narrow window, which can result in content being pushed off the screen by essentially nothing as the 48px are always being enforced.

See this gif for an example of how it currently behaves:

---

Currently the only way to get rid of it, is to retemplate the control. Should we introduce a lightweight styling resource for this, to make it easier to customize this?

[StephenLPeters]

@YuliKl FYI

@chingucoding how are you getting the app window to be so narrow? isn't there a min window width?

[marcelwgn]

In compact overlay the minimum dimensions are 150x50 if I recall correctly.

[YuliKl]

To be honest, that feels like a bug. We usually forget to take compact overlay mode into account, assuming we have more horizontal space to work with in the min case. And while I can hypothesize some rationale of wanting to maintain a bit of whitespace between items and footer, the custom content area feels like a strange column to do this in.

I'm not clear whether removing that minWidth is likely to cause a breaking change for apps. @licanhua, any thoughts on this one?

[licanhua]

It's from designer.
For better user experience, it's app's responsibility to make sure that the settings and other button always be in the screen. If you start to see settings button is disappearing, that means nav view is going to be in minimal mode(user change the threhold). But because of string localization, it's hard to do that. so 48 is used to district overflow button with the right part. If min width is reached, the right side is pushed off the screen.

[marcelwgn]

I am not sure if we should remove it entirely, after all this is a niche case. However it's a bit annoying that I would need to retemplate the NavigationView in order to get rid of the 48px gap, which in compact overlay, can be almost a third of the available width when the app is in it's minimum dimensions.

Having a themeresource for the minimum size of the gap, or a property which disables the minimum size, would probably be a good compromise. Existing apps wouldn't change the behavior, yet if they need, they can remove that.

Also in the gif I shared, I used different visual states to hide items when the windows gets narrow to still be able to show a button to exist compact overlay. After all, you have to make sacrifices with such small sizes. Without the enforced gap, the button would still be visible with the narrow size of 150px.

[YuliKl]

I would support adding a resource for this with the same 48px default as today.

[marcelwgn]

Would it be fine if I make this change then @ranjeshj ?

[ranjeshj]

That sounds reasonable to avoid re-templating. @chingucoding go for it. Thanks!