如何在MAUI应用中将BlazorWebView设置为透明

要把BlazorWebView的背景改成透明，核心是针对不同平台的原生WebView控件设置透明属性，通过自定义Handler就能实现，具体步骤如下：

1. 注册自定义Handler #

在你的MAUI项目（BlazorWebView通常用在MAUI中）的MauiProgram.cs里，添加Handler注册逻辑：

builder.ConfigureMauiHandlers(handlers =>
{
#if ANDROID
    handlers.AddHandler<BlazorWebView, CustomBlazorWebViewHandlerAndroid>();
#elif IOS
    handlers.AddHandler<BlazorWebView, CustomBlazorWebViewHandlerIOS>();
#elif WINDOWS
    handlers.AddHandler<BlazorWebView, CustomBlazorWebViewHandlerWindows>();
#endif
});

2. 分平台实现自定义Handler #

Android平台 #

新建CustomBlazorWebViewHandlerAndroid.cs文件，代码如下：

using Microsoft.AspNetCore.Components.WebView.Maui;
using Microsoft.Maui.Handlers;

namespace 你的项目命名空间;

public class CustomBlazorWebViewHandlerAndroid : BlazorWebViewHandler
{
    protected override void ConnectHandler(Android.Webkit.WebView platformView)
    {
        base.ConnectHandler(platformView);
        // 设置WebView背景透明
        platformView.SetBackgroundColor(Android.Graphics.Color.Transparent);
        // 开启软件渲染层确保透明生效
        platformView.SetLayerType(Android.Views.LayerType.Software, null);
    }
}

iOS平台 #

新建CustomBlazorWebViewHandlerIOS.cs文件，代码如下：

using Microsoft.AspNetCore.Components.WebView.Maui;
using Microsoft.Maui.Handlers;

namespace 你的项目命名空间;

public class CustomBlazorWebViewHandlerIOS : BlazorWebViewHandler
{
    protected override void ConnectHandler(WebKit.WKWebView platformView)
    {
        base.ConnectHandler(platformView);
        // 设置WKWebView背景透明
        platformView.BackgroundColor = UIKit.UIColor.Clear;
        // 关闭不透明属性
        platformView.Opaque = false;
    }
}

Windows平台 #

新建CustomBlazorWebViewHandlerWindows.cs文件，代码如下：

using Microsoft.AspNetCore.Components.WebView.Maui;
using Microsoft.Maui.Handlers;
using Microsoft.Web.WebView2.Core;

namespace 你的项目命名空间;

public class CustomBlazorWebViewHandlerWindows : BlazorWebViewHandler
{
    protected override async void ConnectHandler(WebView2.WinForms.WebView2 platformView)
    {
        base.ConnectHandler(platformView);
        // 等待WebView2初始化完成
        await platformView.EnsureCoreWebView2Async();
        // 设置核心WebView2和控件本身的背景透明
        platformView.CoreWebView2.DefaultBackgroundColor = System.Drawing.Color.Transparent;
        platformView.BackColor = System.Drawing.Color.Transparent;
    }
}

3. Blazor页面层设置透明 #

最后别忘了修改Blazor端的样式，确保页面本身背景不是白色。打开wwwroot/css/app.css，添加或修改：

html, body {
    background-color: transparent !important;
}

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