How to have a transparent background on BlazorWebView in Windows

Question

Is there a way to set the BlazorWebView's background color to be transparent on Windows in a MAUI Blazor Hybrid app?

I'm already using the handler to set the defaultBackgroundColor property to transparent, but it doesn't seem to work.

Answer 1

I have create a sample to try to set the background color as transparent with the following method:

1. Set the background color of the page and the BlazorWebView as transparent:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MauiApp26"
             x:Class="MauiApp26.MainPage"
             BackgroundColor="Transparent">

    <BlazorWebView x:Name="webview" HostPage="wwwroot/index.html" BackgroundColor="Transparent">
        <BlazorWebView.RootComponents>
            <RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
        </BlazorWebView.RootComponents>
    </BlazorWebView>

</ContentPage>

2. Set the razor's background color and the app.css's background as transparent:

<style>
    body{
        background-color: transparent
    }
</style>

app.css:

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color : transparent;
} 

3. Use the handler to set the defaultBackgroundColor:

#if WINDOWS
            System.Drawing.Color color = System.Drawing.Color.Transparent;
            Windows.UI.Color color1 = Windows.UI.Color.FromArgb(color.A, color.R, color.G, color.B);
       (blazorWebView.Handler.PlatformView as WebView2).DefaultBackgroundColor = color1;
#endif

But the background color is always white. So there must be a root control which is the parent of all the controls such as the webview and the page. Actually, the maui blazor run as a desktop app on the windows, so you can try to refer to this link to do what you want. But it seems a really hard work.