NavigationView display bug when use a transparent color as pane color

[yanshouwang]

Describe the bug NavigationView displays another color on the left or right side of the pane when use a transparent color as pane color

Steps to reproduce the bug

1. Add a new NavigationView
2. Custom Pane Color in the App.Xaml like this:

   <SolidColorBrush x:Key="NavigationViewDefaultPaneBackground" Color="#CF000000"/>
   <SolidColorBrush x:Key="NavigationViewExpandedPaneBackground" Color="#CF000000"/>

3. Run the application

Expected behavior NavigationView should dispaly the pane with a single color as we set.

Screenshots

Version Info

NuGet package version: Microsoft.UI.Xaml 2.2.190917002

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

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

Additional context

[YuliKl]

@yanshouwang what you're seeing is actually expected behavior. Depending on NavigationView's mode (Minimal, Compact) the layers underneath the Pane vary. In Compact mode, the Content panel is pushed to the right because the Pane panel will always take up some amount of width, whether the Pane is open or closed. The same is not true in Minimal mode because, in that case, the closed Pane takes up no space. Because you've set the alpha of the Pane's background color to be transparent, some of this underlying structure becomes visible.

Can you tell me more about the scenario you're trying to accomplish? The widths in your screenshots are not what I expected to see - are you overwriting some of the control's properties?

By changing the value of NavigationViewExpandedPaneBackground you're removing the acrylic that draws by default. Is that intentional?

[yanshouwang]

@YuliKl I only set "IsTitleBarAutoPaddingEnabled" and "IsBackButtonVisible" and override the Pane's background. My scenrario is that actually I want to set the pane's background with an acrylic brush and set a transparent color as it's fallback color, so when the window is inactive, the pane will show the fallback color. So if this is a expected behavior I think maybe the Docs should write something to clear that not to use a color with alpha as the arcylic brush's fallback color when using it as NavView's PaneBackground :)

[YuliKl]

Thank you for the explanation. Agreed that we should make this information clear in our documentation, so reactivating this issue to track a doc update.

[github-actions[bot]]

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.