microsoft / microsoft/microsoft-ui-xaml

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

Open
#10,682 0 comments 1 reaction 0 assignees View on GitHub
area-Navigation area-NavigationView
Dominant language
C++
Stars
8.4k
Forks
942
Avg merge
2d 7h
Merged PRs (30d)
105

Description

### 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:

``
``

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

Image
Image

### 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
``
(starting around line 17814), inside the
``
, 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>

```

Contributor guide

Open the contributing guide

Research direction

Open the generic.xaml NavigationViewItem ControlTemplate around the FlyoutPresenter style described in the issue. Check how the flyout background is sourced and compare it with the NavigationViewItemBackground theme brush. Done means the collapsed-item flyout background follows the overridden brush; validate the result with the reproduction steps.

Written by the indexing model from the issue text.

Assessment

Tech stack
cpp
Domain
desktop
Issue type
Bug
Difficulty
1/5
Estimated time
Under an hour
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.