'How can I navigate from Blazor Page to Xaml page in .net Maui Blazor hybrid?

as the title says . if I have a .razor page and a xaml page and I want to navigate from razor to xaml and vice versa.



Solution 1:[1]

Using BlazorWebView to Navigate to .razor pages is too slow and not feel native... Using MainPage.Current.Navigation is good and feel smooth.

//Current Page
MainPage.Current.Navigation.PushAsync(new HighLightsXamlPage());

//SecondPage
public partial class HighLightsXamlPage : ContentPage
{ 
    public HighLightsXamlPage()
    {
        InitializeComponent();
        Current = this;
    }
    public static HighLightsXamlPage Current { get; private set; }
    public async void GoBack()
    {
        await Navigation.PopAsync();
    }
}

HighLightsXamlPage Content

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="Bible.Maui.Blazor.HighLightsXamlPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:b="clr-namespace:Microsoft.AspNetCore.Components.WebView.Maui;assembly=Microsoft.AspNetCore.Components.WebView.Maui"
    xmlns:local="clr-namespace:Bible.Maui.Blazor.Pages.Highlights"
    Title="HighLightsXamlPage">
    <Grid>
        <b:BlazorWebView x:Name="rzor" HostPage="wwwroot/index.html">

            <b:BlazorWebView.RootComponents>
                <b:RootComponent ComponentType="{x:Type local:HighLightsPage}" Selector="#app" />
            </b:BlazorWebView.RootComponents>
        </b:BlazorWebView>
    </Grid>
</ContentPage>

Solution 2:[2]

This worked for me: on the blazor page:

@code{
private void GoTo()
{
    App.Current.MainPage.Navigation.PushModalAsync(new FileManagerPage());
}}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 user18763174
Solution 2 user1282441