如何在Windows端MAUI Blazor Hybrid应用中设置BlazorWebView透明背景

可以实现BlazorWebView背景透明，但仅设置DefaultBackgroundColor并不足够，因为Windows平台下的BlazorWebView底层依赖WebView2控件，需要同时处理原生控件的透明配置。以下是完整的解决步骤：

1. 配置Blazor组件与Web页面的透明背景 #

• 在Blazor根布局（如MainLayout.razor）中设置根元素背景为透明：

@inherits LayoutComponentBase

<div style="background-color: transparent; min-height: 100vh;">
    @Body
</div>

• 修改wwwroot/index.html的body样式，移除默认背景色：

<body style="margin: 0; background-color: transparent;">
    <div id="app"></div>
    <script src="_framework/blazor.webview.js"></script>
</body>

2. 自定义Windows平台的BlazorWebView处理器 #

创建自定义处理器，同时配置WebView2原生控件的透明属性：

using Microsoft.Maui.Platform;
using Microsoft.Web.WebView2.WinForms;

namespace YourAppName.Platforms.Windows;

public class TransparentBlazorWebViewHandler : BlazorWebViewHandler
{
    protected override void ConnectHandler(WebView2 platformView)
    {
        base.ConnectHandler(platformView);
        // 启用WebView2透明并设置背景色为透明
        platformView.AllowTransparency = true;
        platformView.BackColor = System.Drawing.Color.Transparent;
        // 同步MAUI层面的背景设置
        VirtualView.DefaultBackgroundColor = Colors.Transparent;
    }
}

3. 注册自定义处理器 #

在MauiProgram.cs中注册Windows平台的自定义处理器：

builder.ConfigureMauiHandlers(handlers =>
{
#if WINDOWS
    handlers.AddHandler<BlazorWebView, Platforms.Windows.TransparentBlazorWebViewHandler>();
#endif
});

4. 设置MAUI页面的透明背景 #

在包含BlazorWebView的页面（如MainPage.xaml）中，设置页面和BlazorWebView的背景为透明：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:blazor="clr-namespace:Microsoft.AspNetCore.Components.WebView.Maui;assembly=Microsoft.AspNetCore.Components.WebView.Maui"
             x:Class="YourAppName.MainPage"
             BackgroundColor="Transparent">

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

以上步骤覆盖了MAUI层面、Blazor组件层面以及WebView2原生控件层面的透明配置，确保在Windows平台下BlazorWebView的背景完全透明。

内容的提问来源于stack exchange，提问作者Hackmodford