如何在Windows的BlazorWebView上有一个透明的背景

Question

是否有办法在MAUI Blazor Hybrid应用程序中设置BlazorWebView的背景颜色在Windows上透明?

我已经使用处理程序将defaultBackgroundColor属性设置为transparent，但它似乎不起作用。

Answer 1

我创建了一个示例，尝试使用以下方法将背景色设置为透明:

1. 设置页面和BlazorWebView的背景色为透明:

<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. 设置剃须刀的背景色和app.css的背景为透明:

<style>
body{
background-color: transparent
}
</style>
app.css:
html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
background-color : transparent;
} 

3. 使用处理程序设置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

但是背景色总是白色。所以必须有一个根控件它是所有控件的父控件，比如webview和页面。实际上，maui blazor是作为桌面应用程序在windows上运行的，所以你可以尝试引用这个链接来做你想做的事情。但这似乎是一项艰巨的工作。