MAUI Blazor page transition (via MAUI routing not Blazor routing) - Always load whole app with &quot-CodePudding

I want to have MAUI page transition so it feels more native. When I create CounterPage.xaml for "Counter" page and I register it as singleton and then try to navigate with await App.Current.MainPage.Navigation.PushModalAsync(new CounterPage()); it always load whole app with quick flash "Loading..." (like WASM). What am I doing wrong? Is it because of "new CounterPage()"?

Index.razor

@page "/"

<h1>Index</h1>

<button  @onclick="NavigateToCounterPage">MAUI navigation Counter</button>

@code {
    async void NavigateToCounterPage()
    {
        await App.Current.MainPage.Navigation.PushModalAsync(new CounterPage());
    }
}

CounterPage.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:pages="clr-namespace:MAUIBlazorMAUIPageTransition.Pages"
             x:Class="MAUIBlazorMAUIPageTransition.CounterPage"
             Title="CounterPage">
    <BlazorWebView HostPage="wwwroot/index.html">
        <BlazorWebView.RootComponents>
            <RootComponent Selector="#app" ComponentType="{x:Type pages:Counter}" />
        </BlazorWebView.RootComponents>
    </BlazorWebView>
</ContentPage>

CounterPage.xaml.cs

namespace MAUIBlazorMAUIPageTransition;

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

MauiProgram.cs

builder.Services.AddSingleton<CounterPage>();

I tried everything I could think of. Thank you.

CodePudding user response：

First, any call with Modal in the name is used to show something that later you will return from. You want to go forward, then be able to go forward again later.

Don't use that call; probably use GoToAsync.

Second, as you suspect, new CounterPage isn't what you want; it constructs a new page, which means it constructs a new BlazorWebView, which (I assume) results in what you see.

You've done half of what is needed to re-use CounterPage:

builder.Services.AddSingleton<CounterPage>();

The other half is to ask for that again.

I'm not finding doc that explains how to get at Maui's ServiceProvider; if someone can explain how to do that, then you can do this:

var serviceProvider = ???;   // <-- TBD: What code goes here?
var page = serviceProvider.GetRequiredService<CounterPage>();
await App.Current.MainPage.Navigation.GoToAsync(page);