Mica material doesn't works in XAML Islands

[sylveon]

Describe the bug Mica material either renders as fully transparent or just plain white in XAML islands.

Steps to reproduce the bug

Steps to reproduce the behavior:

1. Create an XAML Islands app
2. Add muxc:BackdropMaterial.ApplyToRootOrPageBackground="True" to a page
3. Load that page

Expected behavior I expected to see the Mica brush.

Screenshots

Version Info

NuGet package version:

[Microsoft.UI.Xaml 2.6.0]

Windows app type:	UWP	Win32
	Yes

Windows 10 version	Saw the problem?
Insider Build (22000)	Yes
October 2020 Update (19042)
May 2020 Update (19041)
November 2019 Update (18363)
May 2019 Update (18362)
October 2018 Update (17763)
April 2018 Update (17134)
Fall Creators Update (16299)
Creators Update (15063)

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

Additional context I don't have a repro project due to the complexity of getting XAML Islands and WinUI set up together.

[StephenLPeters]

@jevansaks Is this expected?

[StephenLPeters]

@marb2000 FYI

[jevansaks]

@jevansaks Is this expected?

Yes, but we should use this issue to track making it work. The problem is that currently we only know how to get the current Window -- there's no way to get the DesktopWindowXamlSource from an element. We'll need an API for apps that want to do this to tell us what the DesktopWindowXamlSource is to set the mica brush in the right place.

[sylveon]

Is that not what XamlRoot is for?

[sylveon]

In any case, the DesktopWindowXamlSource is abstracted away from the XAML I host in Islands, so I'd love to not have to break that abstraction on my side.

[selastingeorge]

You can have mica material support in Windows 11 and Windows 10 using DWM Private API, The DWM Api has a private function called DwmpCreateSharedThumbnailVisual. This method can be used to acquire the live bitmap of any window into an IDCompositionVisual. use this function to capture the desktop hwnd (Progman). Once you get the Visual you can clip the Visual with window RECT using the Rectangle Clip or use Atlas Effect from Windows.UI.Composition and then using IDCompositionBlendEffectand IDCompositionGaussianBlurEffect can give you the Mica Effect. Since this issue is about XAML Islands. you need to convert IDCompositionVisual to Windows.UI.Composition.Visual and apply all effects., you can do it through Interop Compositor.

A sample demo of this is available Here. Change This line in the sample from

compositor->SetAcrylicEffect(hwnd, AcrylicCompositor::BACKDROP_SOURCE_HOSTBACKDROP, param);

To

compositor->SetAcrylicEffect(hwnd, AcrylicCompositor::BACKDROP_SOURCE_DESKTOP, param);

This will use the desktop Live bitmap as backdrop. Change the Tint Opacity and blur amount for desired effect. This might even be possible in windows 8 and above, because windows 8 and above also has these functions in dwmapi.dll.

I highly does not recommend using DWM private functions, since it can be changed or removed any time, but having something is better than having nothing😁

[sylveon]

Or we could just use acrylic on Windows 10 and manually use the Mica composition API on 11, until WinUI 2 ships a fix.

[selastingeorge]

Or we could just use acrylic on Windows 10 and manually use the Mica composition API on 11, until WinUI 2 ships a fix.

Ya its the better option than trusting private Api

[lhak]

I added some code implementing mica as a composition brush in the linked app window related issue.

[sylveon]

Unfortunately, this code does not help because I use C++

[ArtexJay]

This app which forces all win32 apps to get "mica effect" titlebar and even backdrop. Hopefully this can help. https://github.com/MicaForEveryone/MicaForEveryone/

[sylveon]

No, it does not help, as composition attributes are ignored by XAML islands.

[sylveon]

Any update on this? @StephenLPeters @jevansaks

It's been well over a year and I still cannot use Mica.

[sylveon]

Bump, still an issue

[DmitriyKomin]

Just wanted to add context for closure - this is in WinUI2-specific Mica implementation, and unfortunately we are unable to investigate most WinUI2-only issues due to the current focus on WinUI3 (more on the policy here). If this is a blocker, please consider migration to WinAppSDK where MicaBackdrop provides fully-featured support for this material.