Is it possible to stack SwapChainPanels on top of each other, achieving transparent background?

[TommiGustafsson-HMP]

According to this article, it should be possible to stack SwapChainPanels on top of each other for transparency purposes:

The only things that can be behind external content are other external content and the window background.

So, in theory, you could achieve transparent background for stacked SwapChainPanels (aka external content). Is there a way to do it in practice?

[castorix]

I'm not sure what you mean by transparent background...
For example, If I put a SwapChainPanel (just a blue circle on yellow background for test) with Opacity="0.5"
over a black Grid with a WebView control, it is transparent :

[castorix]

Without changing opacity, it is behind XAML controls (SwapChainPanel with backgound transparent color, blue circle opaque, Button with Red background)
But the background of SwapChainPanel is not transparent because if I put it as child to fill the grid (ColumnSpan, RowSpan), the transparent color background will cover all other child controls

[TommiGustafsson-HMP]

Yes, that's the limitation, but I think it would be possible to implement the transparent background color for SwapChainPanel so that other external content would show behind SwapChainPanel's content. It's not ideal, since some people need it to show all elements behind it, but I think for our needs just showing other external content would be enough, which would be achievable with the current system without any major rewrites to the code.

[DarranRowe]

The limiting factor here is never going to be the swap chain.
The Visual Layer, either the built in Windows version or the version that WinUI 3 uses, is based upon DirectComposition. DirectComposition is able to have a completely transparent view. Kenny Kerr demonstrated this all the way back in 2014 in the MSDN magazine. Setting the swap chain to accept alpha and drawing to the swap chain with the alpha channel enabled will have transparency. Stacked swap chains will compose with each other too.
The problem will always be with how WinUI 3 handles the external content.

[castorix]

I had tested with DirectComposition and I could draw the blue circle above other controls like WebView2... but as I put the SwapChain at the top of the Visual Tree, I lose access to all controls below 🤔 (not the case in a C++/Win32 app with standard Win32 controls which remain accessible)
I probably missed something...

[castorix]

Thanks for testing it out. I don't exactly mean opacity but can you like have that blue circle on top of the webview2 so that the blue circle is fully opaque and everything else fully transparent?

To draw over XAML with transparency, I also made a test without SwapChain with a Microsoft.UI.Composition.CompositionDrawingSurface : WinUI3_Direct2D_Composition

[brabebhin]

Yes, you can put swapchains on top of each other, and if the panel with higher z index has a transparent frame, then the panel underneath it will be visible.

Done and tested it.

The limitations you are trying to work around are just poor design. The tech is clearly capable of stacking as much transparency as you want, they just didn't think this through too much. I am still not sure why they can't simply fix it.

[TommiGustafsson-HMP]

Do you have example code?

[brabebhin]

Sure.
This is the XMAL files where the swap chains are overlayed

https://github.com/brabebhin/MayazucMediaPlayer/blob/main/source/MayazucMediaPlayer/Controls/MediaPlayerRenderingElement2.xaml

There is swap chain onto which video frames are rendered, and on top of it with a higher zindex is the one where subtitles are rendered.

The C++ files
for video: https://github.com/brabebhin/MayazucMediaPlayer/blob/main/source/MayazucNativeFramework/FrameServerRenderer.cpp

for subtitles: https://github.com/brabebhin/MayazucMediaPlayer/blob/main/source/MayazucNativeFramework/SubtitleRenderer.cpp

The drawing sessions used for subtitles are always initialized as transparent, like so (win2D)

renderSurfaceDrawingSession.Clear(winrt::Microsoft::UI::Colors::Transparent());

And anywhere background color is required, Transparent is used.

The swap chain transparency limitation seems to be confined to only XAML elements under the swap chain. Apparently, swap chains can be combined in any way and transparency will work.

Do not that I have no tested partial transparency.