Acrylic does not appear in drop-down menus

[FJduFou]

Acrylic does not appear in drop-down menus

Screenshots

Version Info
NuGet package version: Microsoft.UI.Xaml 2.3.191129002
Windows version: Windows 10 v.1909

Windows 10 version	Saw the problem?
Insider Build (xxxxx)	Yes/No?
May 2019 Update (18362)	Yes
October 2018 Update (17763)	Yes
April 2018 Update (17134)	Yes
Fall Creators Update (16299)	Yes
Creators Update (15063)	Yes

Device form factor	Saw the problem?
Desktop	Yes
Mobile	Yes/No?
Xbox	Yes/No?
Surface Hub	Yes/No?
IoT	Yes/No?

[kmelmon]

Thanks for reporting this. @FJduFou can you answer a couple questions:
-Exactly what type of control is being used in this scenario?
-Is this reproing on both dark and light theme? It looks like you have the dark theme in the screenshot.

[FJduFou]

Thanks for reply @kmelmon

It's a MenuBar

(light theme)

(light theme)

[kmelmon]

@FJduFou thanks for the screenshot! Interestingly, I am not having this issue with the latest version of the XAML Controls Gallery (https://www.microsoft.com/store/productId/9MSVH128X2ZT), in the MenuBar page. The acrylic is very subtle though. I think this is expected. What I think may be happening is that because you're using "desktop acrylic" for the background of your window, the drop-down menu may not be picking this up, or the effect may be too subtle to notice. I'm asking around here if this is expected. In the meantime as an experiment, can you try changing your background to a very bright color and see if the acrylic starts working?

[yaira2]

@kmelmon It looks like the behavior is the same in the XAML Controls Gallery.

[FJduFou]

@kmelmon

(ok for this)

(but no for this)

(ok but require a little boost for the transparency)

(no)

[kmelmon]

@DmitriyKomin please investigate.

[DmitriyKomin]

RE: Acrylic Needs a Boost in Transparency

I believe it’s due to AcrylilcBrush.TintLuminosityOpacity property/feature we added in 19H1 to support Shadow (where caster’s Acrylic gets muddied by shadow sampled by BackdropBrush). Subtle changes to acrylic appearance are expected from this, so I would consider the changes observed here 'By Design'.

From Acrylic.cpp:

// a Luminosity effect. Without this a ThemeShadow cast by an Acrylic surface was visible through it 
// as a dark blur, resulting in a muddied appearance that did not match the Acrylic expectations.
// A Luminosity effect is now used to reduce contrast in the Acrylic source and minimize the 
// shadow's contribution to Acrylic output. See comment on Luminosity in recipe description below for details.

//              <BlendEffect (Luminosity)>               <!-- Luminosity:  The luminosity blend effect takes the color (Hue and Saturation) values from our blurred
//                                                            backdrop, but gets the lightness (Luminosity) value from a solid color layer. The color
//                                                            we use is made up of the RGB values of the Tint color, and the A value is set to "luminosity opacity".
//                                                            The purpose is to reduce contrast - allowing colors to come through, but blocking sharp differences
//                                                            in brightness (such as those caused by shadows).                    
//                                                            More on luminosity blend here:
//                                                            https://www.photoshopessentials.com/photo-editing/layer-blend-modes/luminosity/ -->
//                  <ColorSourceEffect />   <!-- Luminosity color -->

There is an auto-computed default value for TintLuminosity based TintOpacity + TintColor, and typically that’s what used. For greater control, TintLuminosityOpacity can be set directly.

Attached video shows effect of TintLuminosityOpacity in several cases (In-App acrylic over either a Desktop acrylic or solid color BG):
MUXControlsTestApp 2019-12-16 15-49-35.zip

1. Border w/ AcrylicBrush fill
2. (windowless) Popup w/ Border w/ AcrylicBrush fill + no shadow
3. (windowless) Popup w/ Border w/ AcrylicBrush fill + shadow
4. The app also has a windowed popup variation of A few problems with the new NavigationView control on winui library #3, but (perhaps not surprisingly) it didn’t get captured by the GameBar capture app… It looks exactly like A few problems with the new NavigationView control on winui library #3.

Observations

• Acrylic is clearly present in each case, but the shadow in A few problems with the new NavigationView control on winui library #3 generally makes it darker – it is also more dramatically affected by adjusting the TintLuminosityOpacity knob. When shadow is present it does seem to make the acrylic “more subtle”.

• We also see in-app Acrylic works fine over Desktop Acrylic (below the window is the default blue windows wallpaper.

• Changing the shared AcrylicBrush to HostBackdrop (towards end of video) is expected to make the border contents effectively transparent in all cases, but that only works for Programmatically adding new NavigationViewItems to an existing NavigationView.MenuItems collection results in the added items rendering inside a generated NavigationViewItem node #1.

  • There appears to be a bug in (windowless, no shadow) Popup + HostBackdropBrush leading to still further different (though still Acrylic) rendering. I don't think it affects the screenshots in this bug though; I'll open a separate bug.

RE: Acrylic Doesn't show up at all

I haven't seen this in my repro sample. Can you share a repro? What control is being used there? How is the AcrylicBrush it used for the BG configured (values of TintOpacity/TintColor/TintLuminosityOpacity and BackgroundSource)?