.NET MAUI开发Windows应用：网页跨多屏分区域渲染问题咨询

问题根源 #

你当前代码的核心bug是**OnHandlerChanged里的递归窗口创建**——每次MainPage的Handler初始化完成后，都会新建一个MainPage并打开新窗口，而新窗口的MainPage又会触发自己的OnHandlerChanged，无限循环创建窗口直接耗干系统资源，WebView根本没时间完成渲染。

分步解决方案 #

1. 把窗口创建逻辑移到全局，避免递归

把多窗口创建逻辑从MainPage移到App.xaml.cs的启动流程里，确保只根据物理屏幕数量创建对应窗口：

public partial class App : Application
{
    public App()
    {
        InitializeComponent();
        CreateMultiScreenWindows();
    }

    private void CreateMultiScreenWindows()
    {
        var allScreens = DeviceDisplay.Screens.All.ToList();
        int totalScreens = allScreens.Count;

        // 初始化第一个主窗口
        MainPage = new MainPage(0, totalScreens);

        // 为剩余屏幕创建绑定窗口
        for (int i = 1; i < totalScreens; i++)
        {
            var targetScreen = allScreens[i];
            var newWindow = new Window(new MainPage(i, totalScreens))
            {
                // 绑定到目标物理屏幕（Windows平台原生API）
                HandlerChanged += (s, e) =>
                {
#if WINDOWS
                    var nativeWin = (Microsoft.UI.Xaml.Window)((IWindowPlatformConfiguration)((Window)s).Handler.PlatformView).PlatformWindow;
                    nativeWin.AppWindow.MoveAndResize(new Windows.Graphics.RectInt32(
                        (int)targetScreen.Bounds.X,
                        (int)targetScreen.Bounds.Y,
                        (int)targetScreen.Bounds.Width,
                        (int)targetScreen.Bounds.Height));
#endif
                }
            };
            OpenWindow(newWindow);
        }
    }
}

2. 修改MainPage实现分区域渲染

给MainPage加构造参数，接收当前屏幕索引和总屏幕数，通过ScrollView控制WebView的可视区域：

MainPage.xaml.cs

public partial class MainPage : ContentPage
{
    private readonly int _screenIndex;
    private readonly int _totalScreens;

    public MainPage(int screenIndex, int totalScreens)
    {
        InitializeComponent();
        _screenIndex = screenIndex;
        _totalScreens = totalScreens;
        Loaded += OnMainPageLoaded;
    }

    private void OnMainPageLoaded(object sender, EventArgs e)
    {
        // 计算当前屏幕要显示的网页区域比例
        double startOffsetRatio = (double)_screenIndex / _totalScreens;
        double viewHeightRatio = 1.0 / _totalScreens;

        // 等待WebView加载完成后调整可视区域
        webView.Navigated += (s, args) =>
        {
            // 滚动到目标起始位置
            webView.ScrollToAsync(0, webView.Height * startOffsetRatio, false);
            // 限制容器高度为网页总高度的1/N
            webViewContainer.HeightRequest = webView.Height * viewHeightRatio;
        };
    }
}

MainPage.xaml

用ScrollView包裹WebView，隐藏滚动条并锁定可视区域：

<ScrollView x:Name="webViewContainer"
            VerticalOptions="FillAndExpand"
            HorizontalOptions="FillAndExpand"
            VerticalScrollBarVisibility="Never"
            HorizontalScrollBarVisibility="Never">
    <WebView x:Name="webView"
             Source="https://www.google.com/"
             VerticalOptions="FillAndExpand"
             HorizontalOptions="FillAndExpand"/>
</ScrollView>

关键注意事项 #

• 禁止递归创建页面：绝对不能在页面生命周期方法里实例化新的MainPage，否则必触发无限循环。
• 屏幕绑定必须用原生API：MAUI的跨平台窗口API不直接支持绑定物理屏幕，Windows平台需要调用AppWindow.MoveAndResize来定位窗口到指定屏幕。
• WebView裁剪的替代方案：如果ScrollView的偏移方式不够精确，可以自定义WebView的Windows原生渲染器，直接修改WebView2的可视区域裁剪参数。

调试建议 #

• 先注释多窗口创建代码，确认单个WebView能正常渲染后再逐步添加。
• 用Debug.WriteLine输出屏幕数量、窗口创建次数，排查是否出现循环创建。
• 查看任务管理器的资源占用，若CPU/内存飙升，大概率是递归创建窗口导致的。

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