microsoft / microsoft/microsoft-ui-xaml
NavigationView: Flyout background color for collapsed items doesn't respect theme brush overrides.
- 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.
### 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
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