.NET MAUI Blazor Hybrid中从Razor页面导航至XAML页面的方法

DevOps 小满

2026-7-1

在MAUI Blazor中从Razor页面导航到XAML ContentPage的解决方案

核心问题分析

Blazor的NavigationManager仅负责Blazor路由体系内的页面跳转，无法直接导航到XAML页面
若App的MainPage未使用NavigationPage包裹，App.Current.MainPage.Navigation.PushAsync会因没有导航栈而失效

解决方案步骤

1. 重构App的主页面为NavigationPage

修改App.xaml.cs中的代码，将原Blazor主页面包裹在NavigationPage中：

public App()
{
    InitializeComponent();
    // 用NavigationPage包裹Blazor页面，构建导航栈
    MainPage = new NavigationPage(new YourBlazorMainPage());
}

注：YourBlazorMainPage是项目中包含BlazorWebView的页面（通常是默认生成的MainPage.xaml）

2. 在Razor组件中调用MAUI原生导航

在需要触发跳转的Razor页面中，编写异步导航方法，直接调用MAUI的导航栈：

<button @onclick="NavigateToScanPage">打开扫码页面</button>

@code {
    private async Task NavigateToScanPage()
    {
        // 验证MainPage类型后，推入XAML页面
        if (App.Current.MainPage is NavigationPage navPage)
        {
            await navPage.Navigation.PushAsync(new Sample.Wtf.LoyaltyApp.StoreApp.Components.Pages.Scan());
        }
    }
}

3. 完善XAML页面的相机生命周期管理

在Scan.xaml.cs中添加相机启停逻辑，避免资源泄漏：

using Camera.MAUI;

namespace Sample.Wtf.LoyaltyApp.StoreApp.Components.Pages;

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

    protected override async void OnAppearing()
    {
        base.OnAppearing();
        // 页面显示时启动相机（需提前配置平台相机权限）
        await _cameraView.StartCameraAsync();
    }

    protected override async void OnDisappearing()
    {
        base.OnDisappearing();
        // 页面隐藏时停止相机释放资源
        await _cameraView.StopCameraAsync();
    }
}