MAUI Blazor应用中如何用Razor组件打开新窗口？遇类型转换错误

错误原因 #

你遇到的CS1503错误是因为Counter是Blazor组件（继承自ComponentBase），而MAUI的Window构造函数要求传入Microsoft.Maui.Controls.Page类型的实例，两者类型不兼容，无法直接转换。

解决方法 #

MAUI Blazor中打开新窗口需要用BlazorWebView承载Blazor组件，再将BlazorWebView放入MAUI的ContentPage中，最后用这个ContentPage创建窗口。下面提供两种实现方式：

方式1：通过XAML创建承载页面 #

1. 新建一个MAUI ContentPage（例如CounterWindowPage.xaml）：

<?xml version="1.0" encoding="utf-8" ?>
<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"
             xmlns:local="clr-namespace:ProjectName.Pages" <!-- 替换为你的Counter组件所在命名空间 -->
             x:Class="ProjectName.Pages.CounterWindowPage">
    <blazor:BlazorWebView HostPage="wwwroot/index.html">
        <blazor:BlazorWebView.RootComponents>
            <!-- 指定加载Counter组件，Selector对应index.html中的#app容器 -->
            <blazor:RootComponent Selector="#app" ComponentType="{x:Type local:Counter}" />
        </blazor:BlazorWebView.RootComponents>
    </blazor:BlazorWebView>
</ContentPage>

2. 对应后台代码CounterWindowPage.xaml.cs：

using Microsoft.Maui.Controls;

namespace ProjectName.Pages;

public partial class CounterWindowPage : ContentPage
{
    public CounterWindowPage()
    {
        InitializeComponent();
    }
}

3. 修改原有的打开窗口方法：

@code {
    private void openNewWindow()
    {
        var counterPage = new CounterWindowPage();
        var secondWindow = new Window(counterPage);
        Application.Current.OpenWindow(secondWindow);
    }
}

方式2：纯代码构建承载页面 #

如果不想新建XAML文件，也可以直接在代码中构建页面：

@using Microsoft.AspNetCore.Components.WebView.Maui
@using ProjectName.Pages <!-- 替换为你的Counter组件所在命名空间 -->

@code {
    private void openNewWindow()
    {
        // 创建BlazorWebView并配置加载Counter组件
        var blazorWebView = new BlazorWebView
        {
            HostPage = "wwwroot/index.html",
            RootComponents =
            {
                new RootComponent("#app", typeof(Counter))
            }
        };

        // 将BlazorWebView放入ContentPage
        var contentPage = new ContentPage
        {
            Content = blazorWebView
        };

        // 创建并打开新窗口
        var secondWindow = new Window(contentPage);
        Application.Current.OpenWindow(secondWindow);
    }
}

注意事项 #

• 确保已正确引用Microsoft.AspNetCore.Components.WebView.Maui命名空间
• 替换代码中的ProjectName.Pages为你实际的Counter组件所在命名空间
• HostPage指定的wwwroot/index.html是MAUI Blazor项目默认的宿主页面，需确保该文件存在

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