如何移除MAUI Blazor应用启动时的白色闪屏？

要消除MAUI Blazor启动过程中的白色闪屏，需要覆盖原生窗口初始化、Web引擎加载两个关键阶段的背景设置，以下是具体方案：

1. 修改原生平台窗口背景 #

MAUI在Web引擎启动前，原生窗口的默认背景可能为白色，需针对各平台单独配置：

Windows平台 #

编辑Platforms/Windows/App.xaml，设置窗口背景为黑色：

<maui:MauiWindow
    x:Class="YourAppName.WinUI.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:maui="using:Microsoft.Maui"
    xmlns:local="using:YourAppName.WinUI"
    Background="Black"> <!-- 此处设置黑色背景 -->
</maui:MauiWindow>

Android平台 #

编辑Platforms/Android/MainActivity.cs，在OnCreate方法中设置窗口背景：

protected override void OnCreate(Bundle savedInstanceState)
{
    base.OnCreate(savedInstanceState);
    // 将窗口背景设为黑色
    Window.SetBackgroundDrawable(new ColorDrawable(Android.Graphics.Color.Black));
}

iOS/MacCatalyst平台 #

编辑Platforms/iOS/AppDelegate.cs（或MacCatalyst对应文件），修改主窗口背景：

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
    var window = new UIWindow(UIScreen.MainScreen.Bounds);
    window.BackgroundColor = UIColor.Black; // 设置黑色背景
    // 保留原有初始化代码
    return base.FinishedLaunching(app, options);
}

2. 强化Web垫片加载阶段的背景控制 #

在wwwroot/index.html中进一步优化样式，确保Web引擎初始化全程保持黑色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>YourAppName</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="YourAppName.styles.css" rel="stylesheet" />
    <style>
        html, body {
            background-color: black;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        /* 可选：添加加载提示，避免纯黑单调 */
        #loading-indicator {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div id="loading-indicator">加载中...</div>
    <div id="app"></div>

    <script src="_framework/blazor.webview.js"></script>
    <script>
        // Blazor初始化完成后隐藏加载提示
        document.addEventListener('DOMContentLoaded', () => {
            document.getElementById('loading-indicator')?.remove();
        });
    </script>
</body>
</html>

3. 调整默认闪屏设置 #

若项目启用了MAUI默认闪屏，需修改其背景色：
编辑项目的.csproj文件，添加闪屏背景配置：

<PropertyGroup>
    <!-- 将闪屏背景设为黑色 -->
    <SplashScreenBackgroundColor>#000000</SplashScreenBackgroundColor>
</PropertyGroup>

以上方案结合后，可覆盖MAUI Blazor启动的全流程，彻底消除白色闪屏。

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