Acrylic Brush doesn't work in combobox

[WinStack]

Describe the bug

I defined a ComboBox and saw that acrylic brush doesn't work in the Popup list of the ComboBox.

Steps to reproduce the bug

1. Define a ComboBox
2. See that Acrylic Brush doesn't work in Popup of Items

Expected behavior

No response

Screenshots

No response

NuGet package version

WinUI 3 - Windows App SDK 1.5.1: 1.5.240311000

Windows version

Windows 11 (22H2): Build 22621, Windows 11 (21H2): Build 22000

Additional context

No response

[github-actions[bot]]

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one. Thank you!

Open similar issues:

• WinUI3 in app acrylic will not work as expected if already enabled window acrylic through DesktopAcrylicController (#8118), similarity score: 0.73

Closed similar issues:

• Acrylic blur does not work if Window use MicaBackdrop (#7578), similarity score: 0.78
• Acrylic does not work if mica is enabled (#7200), similarity score: 0.77
• ComboBox popup of items to select is translucent in 1.1.0 p3 (#7176), similarity score: 0.77
• AcrylicInAppFillColorDefaultBrush does not work when above WebView2 (#8267), similarity score: 0.75

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

[codendone]

This comes from Composition differences in WinAppSDK. AcrylicBrush is only able to blur other content drawn by WinAppSDK in the same window. For windowed popups (those with ShouldConstrainToRootBounds="false"), which ComboBox uses, the AcrylicBrush can only blur content below it in that popup window. Using Popup.SystemBackdrop can enable acrylic across the window boundary.

It looks Combobox styles attempt to set an acrylic background by using AcrylicBrush (via the ComboBoxDropDownBackground resource). It needs to change to use SystemBackdrop for this to work.

[shatyuka]

@codendone If I use SystemBackdrop in ComboBox style, it will show a transparent background. Any idea?

<StaticResource x:Key="ComboBoxDropDownBackground" ResourceKey="DesktopAcrylicTransparentBrush" />

<Popup x:Name="Popup"
       SystemBackdrop="{StaticResource AcrylicBackgroundFillColorDefaultBackdrop}"
       Grid.Row="0"
       Grid.Column="0">

[gegao18]

@shatyuka You'll need to specify ShouldConstrainToRootBounds="False" on that popup as well. That will allow the popup to escape the bounds of its island (e.g. the ComboBox dropdown can go outside the window bounds), and lets the SystemBackdrop render desktop acrylic.