Setting WebView2.DefaultBackgroundColor to Colors.Transparent leads to ApplicationPageBackgroundThemeBrush being set as Background instead of actual transparency

[WelterDevelopment]

Describe the bug

Setting WebView2.DefaultBackgroundColor to transparent results in a Background that seems to be equivalent to the color of ApplicationPageBackgroundThemeBrush (e.g. 32, 32, 32 in Dark theme). That is not what I want. And changing the RequestedTheme at runtime after CoreWebView2 has initialized has no effect on the background color. Moreover, changing the RequestedTheme has no effect at all, the WebView2 control seems to set the background based on the ApplicationTheme which cannot be changed at runtime.

Steps to reproduce the bug

XAML:

<Grid Background="Red">
  <WebView2 DefaultBackgroundColor="Transparent" Loading="WebView2loading"></WebView2>
</Grid>

C#:

private async void WebView2loading(FrameworkElement sender, object args)
{
  await ((WebView2)sender).EnsureCoreWebView2Async();
}

Expected behavior

The expected behavior is that setting the BackgroundColor to transparent should set the background color to transparent.

Screenshots

The Background should be red in the example.

NuGet package version

WinUI 3 - Windows App SDK 1.0 (If you're seeing your issue in older previews of WinUI 3, please try this release)

Windows app type

• UWP
• Win32

Device form factor

Desktop

Windows version

Insider Build (xxxxx)

Additional context

Testet on 21H2 (22000.376)

[Dixeran]

Same here using WinUI3 ver1.0 C++ Desktop.

[DexterLeung]

The issue still exists in WinUI 3 ver 1.1 C# Desktop

[krschau]

The WebView2.DefaultBackgroundColor is really exposing the CoreWebView2Controller.DefaultBackgroundColor property. When it is transparent, you see through to the color of the visual that's rendering the webview content, which is indeed set to the theme background color.

It's a valid complaint that that color can't be changed at runtime. The two possible solutions would be to sync it with the WebView2's ActualTheme, or sync it with the WebView2's Background color property. I'm curious if you have a preference.

Tracked internally with https://task.ms/37699008

[WelterDevelopment]

Thanks for your answer.
My preference is actual transparency. My complaint is not that the color can't be changed at runtime, but that the color can't be set to Colors.Transparent. Otherwise, effects lice Mica and Acrylic arent usable. And it's hard for me to believe that it is impossible, since stuff like this exists: https://marketplace.visualstudio.com/items?itemName=eyhn.vscode-vibrancy
So why can the Electron html wrapper (chromium-based) can have transparent background, but WebWiev2 (also chromium-based) can't?
From the two solutions you proposed, the second one is better because of the higher flexibility.

[Diegorro98]

The issue remains in WindowsAppSDK 1.2.220902.1-preview1
It would be great to have transparent background in order to get mica background at WebView from parent UIElements.

[agenne]

Hi,
we try to change our UWP app so that it now use the new WebView2.
Unfortunately there is no DefaultBackgroundColor available on the WebView2 which is very important for us.

First we found this post which stated that it will not be supported in winui3:
#2992

and this one:
#4378

After further research we found this post:
MicrosoftEdge/WebView2Feedback#1621

and this one:
MicrosoftEdge/WebView2Feedback#1604

Both suggest to set the DefaultBackgroundColor by setting a Environment Variable like so:
Environment.SetEnvironmentVariable("WEBVIEW2_DEFAULT_BACKGROUND_COLOR", "0");

We tried out and it worked well.

Now we would like to know, if this undocumented way to make this work is officially allowed, and if there are risks to do so.

Thank You in advance

[3d4m-volodymyr]

We also need this feature. It would be good to know if it will be officially allowed.

@agenne, what target SDK version do you use in your project? We also have a UWP project and same challenge.

[agenne]

The target version of our UWP App is 19041

Note that there is another issue:
MicrosoftEdge/WebView2Feedback#2917

Because of this one we can't go live for months

[franklbt]

This issue is also preventing using Mica or acrylic backdrop on MAUI on Windows for example dotnet/maui#16874