NavigationView: Flyout background color for collapsed items doesn't respect theme brush overrides.

[shikita-mai]

Describe the bug

In a NavigationView with the pane collapsed (e.g., in LeftCompact display mode), the background color of the flyout menu that appears when a top-level icon is clicked cannot be changed by overriding theme brushes.

Steps to reproduce the bug

Override the "NavigationViewItemBackground" and "NavigationViewExpandedPaneBackground" theme brushes in a
ThemeDictionary or other resource dictionary.

For example, set them to GreenYellow:

<SolidColorBrush x:Key="NavigationViewItemBackground" Color="GreenYellow" />
<SolidColorBrush x:Key="NavigationViewExpandedPaneBackground" Color="GreenYellow" />

Expected behavior

The background color of the flyout menu that appears upon clicking an icon in the collapsed pane should be updated to the specified color (e.g., GreenYellow).

Screenshots

Only the background color of the flyout menu remains unchanged, sticking to the default color. Other elements correctly use the overridden brush.

NuGet package version

WinUI 3 - Windows App SDK 1.7.3: 1.7.250606001

Windows version

Windows 11 (24H2): Build 26100

Additional context

This issue can be resolved by modifying the "generic.xaml" file from the Windows App SDK (version 1.7.250606001). Within the
<ControlTemplate TargetType= controls:NavigationViewItem>
(starting around line 17814), inside the
<Style TargetType= FlyoutPresenter>
, the issue was fixed by adding the following Setter property:
<Setter Property= Background Value= {ThemeResource NavigationViewItemBackground} />

Here is a snippet of the relevant XAML code:

<Style TargetType="FlyoutPresenter">
          <Setter Property="Padding" Value="{ThemeResource NavigationViewItemChildrenMenuFlyoutPadding}" />
           <!-- Set negative top margin to make the flyout align exactly with the button -->
           <Setter Property="Margin" Value="0,-4,0,0" />
           <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto" />
           <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
           <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
           <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
           <Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
           <Setter Property="CornerRadius" Value="{ThemeResource OverlayCornerRadius}" />
           <Setter Property="Template">
           <Setter.Value>
               <ControlTemplate TargetType="FlyoutPresenter">
                       <ScrollViewer x:Name="ScrollViewer"
                ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"
                HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                AutomationProperties.AccessibilityView="Raw">
                        <ContentPresenter x:Name="ContentPresenter" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Padding="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" CornerRadius="{TemplateBinding CornerRadius}" />
                             </ScrollViewer>
               </ControlTemplate>
              </Setter.Value>
     </Setter>
</Style>