Unable to change background color of NavigationView when PaneDisplayMode is set to top

[Thomas1664]

Describe the bug
Overriding the default background color of the pane using NavigationViewExpandedPaneBackground and NavigationViewDefaultPaneBackground doesn't work if PaneDisplayMode is set to Top. Everything works fine if PaneDisplayMode is set to Left.

Steps to reproduce the bug
Inside an empty page:

<Page.Resources>
        <AcrylicBrush
            x:Key="NavigationViewExpandedPaneBackground"
            AlwaysUseFallback="False"
            BackgroundSource="HostBackdrop"
            FallbackColor="Black"
            TintColor="Black"
            TintOpacity="0.9"/>
        <AcrylicBrush
            x:Key="NavigationViewDefaultPaneBackground"
            AlwaysUseFallback="False"
            BackgroundSource="HostBackdrop"
            FallbackColor="Black"
            TintColor="Black"
            TintOpacity="0.9"/>
    </Page.Resources>
<Grid>
<muxc:NavigationView
            x:Name="NavigationView"
            PaneDisplayMode="Top"
            SelectionFollowsFocus="Enabled">
            
            <!--  Tabs  -->
            <muxc:NavigationView.MenuItems>
                <muxc:NavigationViewItem
                    Content="General">
                    <muxc:NavigationViewItem.Icon>
                        <FontIcon FontFamily="{StaticResource FluentUIGlyphs}" Glyph="&#xea00;" />
                    </muxc:NavigationViewItem.Icon>
                </muxc:NavigationViewItem>
            </muxc:NavigationView.MenuItems>
            <Frame x:Name="contentFrame" IsNavigationStackEnabled="False" />
        </muxc:NavigationView>
</Grid>

Expected behavior
Background color should change

Screenshots

Version Info

NuGet package version:
[Microsoft.UI.Xaml 2.4.3]

Windows 10 version	Saw the problem?
Insider Build (xxxxx)
May 2020 Update (19041)	Yes
November 2019 Update (18363)
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]

sounds like we may have missed a template binding.

[marcelwgn]

I would like to look into this issue.

[marcelwgn]

For DisplayMode top, NavigationView uses the "NavigationViewTopPaneBackground" resource to allow lightweight styling of the background of the background. I am not sure if changing the theme resource binding here is a good idea as this might break existing apps.

[Thomas1664]

@chingucoding using NavigationViewTopPaneBackground works for me. Nonetheless, in my opinion, using NavigationViewDefaultPaneBackground should work as well. What about keeping NavigationViewTopPaneBackground in case someone wants to use different background colours but also allowing NavigationViewDefaultPaneBackground to set the background colour of NavigationView when DisplayMode is set to Top?

[marcelwgn]

The big question is how you would achieve this. We can certainly not introduce an API to switch between the resources for the background DisplayMode.Top. You can't bind the background of a control to both resources.

We could make the NavigationViewTopPaneBackground reference the NavigationViewDefaultPaneBackground resource, not sure how good of a solution that is though.

[Felix-Dev]

We could make the NavigationViewTopPaneBackground reference the NavigationViewDefaultPaneBackground resource, not sure how good of a solution that is though.

Note that resource referencing is not working as expected right now: #2913

[marcelwgn]

Note that resource referencing is not working as expected right now: #2913

Oh right, guess that option is off the table then. Thanks for linking that issue @Felix-Dev !

[StephenLPeters]

Yes, was about to link the same issue, when #2913 is resolved this should be easy. In the mean time we don't really have a good way of doing the fallback color proposed.

[marcelwgn]

Is this a "needs-winui-3" issue then @StephenLPeters ?

[yoshiask]

Is there a reason why there isn't a TopPaneBackground property or something? I'm making a templated control that uses a NavigationView internally and I need to use a TemplateBinding on the background

[marcelwgn]

This is because that would be a property which would only be relevant in some scenarios but not in all scenarios. Such kind of API is not ideal and the API surface of NavigationView is already fairly complex, having a property for the TopPaneBackground does not make this easier. Also when this kind of property would be introduced, we would also need to introduce a new property for the left panebackground for completeness sake. That's one of the reasons why this is done through lightweight styling.

[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.