Allow to replace the whole navigation stack during the navigation

[egvijayanand]

At the outset, would like to appreciate the effort that's being made to make this AppModel alive by adding features to it.

And while trying the preview NuGet package (0.9.2-preview), came across this issue.

This is being generic Shell definition used across many projects with both Flyout items and Tab (meant to be hidden from the flyout menu and invoked on demand like the Login page).

But when such is definition is used with this Blazor Bindings model, navigating to the Tab defined page opens up with the Flyout menu still open and that page is pushed onto the Navigation stack as a back button is still present. Need a way to define Attached Properties to make this a Modal page.

And the next part of the issue is while moving from the Tab page to any other page, behaves like a usual regular Navigation page. pushed onto the stack. The intended behavior is to replace the entire Navigation stack and start afresh.

This feature needs to be added in this AppModel on how to start navigation afresh (maybe with additional parameters to the NavigateToAsync method as the underlying Native Shell implementation does support that feature with route address ///home).

Screenshots:

Tab page with Flyout menu still open:

Tab page with back button:

[Dreamescaper]

Could you submit a small sample? I'm a bit confused :)

[egvijayanand]

Could you submit a small sample? I'm a bit confused :)

Sure, will commit the code in a sample repo and share the link.

[egvijayanand]

Here's the link to simulate this issue. Do let me know if you need any further details on this.

https://github.com/egvijayanand/maui-blazor-bindings-66

[Dreamescaper]

I'll probably need to support this navigation case anyway (especially after #44 ).

But personally I use smth like this when dealing with LoginPage:

<Shell>
     @if(!_isLoggedIn){
    	<LoginPage />
     }
     @else {
		<FlyoutItem Title="Home" Icon="homeIcon">
			<HomePage />
		</FlyoutItem>
         ...other pages...
     }
</Shell>


@code {
    bool _isLoggedIn;

	void OnLogoutClicked() => _isLoggedIn = false;
}

(but _isLoggedIn probably should be a value in some State storage, not just a field)

A more Blazor-native way would be to use Blazor AuthorizeView. But you'll need to implement your AuthenticationStateProvider, and register it in DI.

<CascadingAuthenticationState>
    <Shell>
        <AuthorizeView>

            <Authorized>
                <TabBar>
					<Tab Icon="Icons.Home">
					    <HomePage />
					</Tab>
					<Tab Icon="Icons.Person">
					    <ProfilePage />
					</Tab>
                </TabBar>
            </Authorized>

            <NotAuthorized>
                <TabBar>
                    <Mobile.Pages.LoginPage />
                </TabBar>
            </NotAuthorized>

        </AuthorizeView>
    </Shell>
</CascadingAuthenticationState>

I'll probably need to create some samples with Auth approaches.

[Dreamescaper]

Btw, most of the Shell attached properties are supported (with no IntelliSense though), you can take a look here for an example.

I hope to improve that experience in scope of this item.

[egvijayanand]

Adding a Login page as another Flyout item and its visibility controlled by a property is definitely a good idea. Have made use of this approach in XAML but with Shell routing. Will try this way.

Thanks for the sample page for making use of the Attached properties. Have tried with Native control property, but not much progress.