Acrylic backdrop does not seem to work in Xaml Islands / WindowsXamlHost is not transparent

[hansmbakker]

I'm submitting a...

• Bug report (I searched for similar issues and did not find one)

Usecase and Context

I am trying to achieve the following:

• application that is triggered from systray / notification area
• upon triggering, a "windowless" UWP XAML control is shown
• the control should use background acrylic
• it would be nice for the control to have rounded corners as in the referred video below

Example video of what I'm trying to achieve made by @niels9001 (source tweet)

Because of the systray / notification area I believe I'm required to use a win32 host application. I chose WPF because it allows for transparent / chromeless windows.
Because I want to use UWP XAML controls I believe I'm required to use XAML Islands.

Current behavior

I followed @azchohfi's steps in #159 . This made the UWP XAML controls show up with animations, but the Acrylic backdrop does not seem to work.

Even when I make the WPF host window and the UWP / XamlApplication controls transparent, they display as having a black background while the rest of the WPF host window is transparent.

I do not know whether the Acrylic does not work because the transparency does not work, or that these are two separate issues,

Expected behavior

Allow for transparency in XamlHost:WindowsXamlHost. Allow Acrylic backdrop to show the contents of the apps / desktop behind the win32 host app.

Minimal reproduction of the problem with instructions

I still need to make a repro project, but wanted to check with you first whether this is a supported scenario.

My basic steps are:

• wpf app with transparent window using WindowStyle="None" AllowsTransparency="True"
• UWP XamlApplication according to @azchohfi 's steps in Xaml Islands do not work when Microsoft.Toolkit.Uwp.UI.Animations is referenced by UWP Class Library #159
• UWP page background set to SystemControlAcrylicWindowBrush or Transparent

Environment

Nuget Package(s): Microsoft.Toolkit.Forms.UI.XamlHost

Package Version(s): 6.0-preview7

Windows 10 Build Number:
- [ ] Fall Creators Update (16299)
- [ ] April 2018 Update (17134)
- [ ] October 2018 Update (17763)
- [x] Insider Build (18362)

App min and target version:
- [ ] Fall Creators Update (16299)
- [ ] April 2018 Update (17134)
- [ ] October 2018 Update (17763)
- [x] Insider Build (18362)

Device form factor:
- [x] Desktop
- [ ] Mobile
- [ ] Xbox
- [ ] Surface Hub
- [ ] IoT

Visual Studio 
- [x] 2019 16.3 Preview 1

[hansmbakker]

Mentioning @ocalvo as a suggestion from @azchohfi in #159 (comment).

[hansmbakker]

@azchohfi you also mentioned trying a c++/win32 app. Does that support the usecase explained above? Why do you think that might be easier?

[verelpode]

Allow for transparency in XamlHost:WindowsXamlHost.

I'm unsure but if I understood things correctly, WindowsXamlHost will never support transparency with a transparent window in the manner you described. That's too difficult to support, isn't it? In addition to being too difficult, it's unnecessary / not worthwhile.
But as I said, I'm unsure about the details and possibly a Microsoft staff member will give a different answer.

A related issue is when you try to layer a WPF element over the top of a WindowsXamlHost or a WPF WebView. For example, if you make a WPF Grid containing first a WindowsXamlHost and then another other element, and they're both in the same cell of the Grid, then this means the second element should normally appear layered on top of the first element (WindowsXamlHost), BUT this scenario is unsupported in XAML Islands and/or WebView, I think.

[aquinn39]

I've had this issue as well, from what I can tell if you unfocus the window then focus it again (by clicking away and then back) the acrylic effect should work so it does work with XAML host but for some reason you need to unfocus then refocus the window for it to work (at least that is how it seems to be working in my experience) Also the WPF window does not need to be transparent for it to work, it seems the effect works regardless of the WPF window's transparency in my experience.

[hansmbakker]

Ok, interesting. That sounds like a bug to me though..

Anybody from Microsoft who can comment on this?

[sylveon]

If it's of any help, https://github.com/TranslucentTB/TranslucentTB/tree/develop is a C++ app which has that issue on Insider Build 18956. Note that you do need to do some fiddling with dependencies to get it building at the moment (spdlog normally is installed via vcpkg but I need the latest master, and vcpkg install spdlog --head results in an error, so that must be manually added to the project) and that due to C++/WinRT weirdery, you will encounter a build error during the first build which will go away during the second build and must launch the appx packaging project to get the app running correctly.

It's also using C++20 concepts so you need the latest VS 2019 preview.

[hansmbakker]

@ocalvo @marb2000 could you please have a look at this and explain whether it is possible at all to

• have a transparent WindowsXamlHost
• achieve Acrylic backdrop
  ?

[aquinn39]

Another thing I have noticed is that the acrylic blur effect does not seem to work at all when I have more than one XAML host within a window using acrylic blur, even if I unfocus then refocus the window.

[hansmbakker]

It turns out that I used a wrong BackgroundSource in the AcrylicBrush. I took this code as an example but that uses the app itself as a BackgroundSource.

It turns out that I had to use BackgroundSource="HostBackdrop". This way, I do not need to unfocus/focus.

[sylveon]

I'm using SystemControlAcrylicWindowBrush so I don't have control of the background source. (but AFAIK it is HostBackdrop)

[hansmbakker]

Since basic Acrylic works now for me, we can close that part of the issue.
I still have an issue, though, because the rounded corners around the acrylic stay black. I made a bug reproduction of that on github and created issue #168 for that.

@aquinn39 and @sylveon I reproduced the focus/unfocus bug you mentioned on build 18362.
I think it is a separate issue from this issue and I reported it as #170 including a reproduction repository.