1

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.

ToolmakerSteve
  • 18,547
  • 14
  • 94
  • 196
Hackmodford
  • 3,901
  • 4
  • 35
  • 78
  • Why the WinUI3 tag? – Simon Mourier Nov 16 '22 at 19:22
  • 1
    @SimonMourier Because .NET MAUI uses WinUI 3 when running on Windows. https://learn.microsoft.com/en-us/dotnet/maui/what-is-maui?view=net-maui-7.0 – Hackmodford Nov 16 '22 at 19:31
  • *"doesn't work"*: do you get some solid color background? What do you have underneath, on the Maui page that the view is within? If you change the Maui page's background color, does that affect what is seen? – ToolmakerSteve Nov 16 '22 at 20:49
  • 1
    @ToolmakerSteve I've set the maui page's background to red. When I set the platform webview's defaultBackgroundColor to transparent it causes the webview to be rendered as all white. Like, I don't even see anything at all. If I set it to some non transparent color with alpha 255 I can see that color. But transparent is not transparent and is using some other source for the color. – Hackmodford Nov 16 '22 at 21:56
  • Chromium is meant to support transparent page backgrounds when rendering - at least in OpenGL contexts (e.g. [this thread from 2012](https://groups.google.com/a/chromium.org/g/chromium-dev/c/w0NANZgsakI) such as when used in embedded applications - like gaudy Vegas slot machines with those fancy curved transparent LCD displays) - but I don't know if `BlazorWebView` - or `WebView2` supports it though. – Dai Nov 17 '22 at 05:20

1 Answers1

0

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>
  1. 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;
}
  1. 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.

Liyun Zhang - MSFT
  • 8,271
  • 1
  • 2
  • 14
  • This is my experience as well. – Hackmodford Nov 17 '22 at 12:21
  • And the sad part is I don’t need the window to be transparent, I’m trying to layer a skia canvas behind the BlazorWebView in order to render a camera feed faster. – Hackmodford Nov 17 '22 at 12:22
  • I also tried to set the contentpage and the blazorwebview's background color as red. But I can't see any red when I run it. It seems there is a view between the Blazor UI and the maui UI. – Liyun Zhang - MSFT Nov 18 '22 at 09:31