CODEWITHSUNDEEP
c#.netxamlxamarinmaui
Toto
Toto

Reputation: 972

Navigating back to tabbed page from content page using shell in MAUI app

I am new to MAUI, using shell to handle the navigation, and struggle with this simple scenario: my main page is a tabbed page and has a button that redirects to another ContentPage (called AnotherPage in the included code) and which is not tabbed:

Shell.Current.GoToAsync("//AnotherPage");

My AppShell.xml looks like this:

<TabBar>
    <Tab>
        <ShellContent ContentTemplate="{DataTemplate local:MainPage}"/>
    </Tab>
    <Tab>
        <ShellContent ContentTemplate="{DataTemplate local:OtherTabbedPage}"/>
    </Tab>
</TabBar>
<ShellContent ContentTemplate="{DataTemplate local:AnotherPage}" Route="AnotherPage" />

That page has an exit button, and its expected behavior is to redirect to the main page, exactly as what happens when the app launches. To do so it has a command that binds to the following code:

Shell.Current.GoToAsync("MainPage");

But when executed I get the following exception:

Global routes currently cannot be the only page on the stack, so absolute routing to global routes is not supported.

My routes are registered like so, in the AppShell.xaml.cs file:

    Routing.RegisterRoute("MainPage", typeof(MainPage));
    Routing.RegisterRoute("OtherPage", typeof(OtherPage));
    Routing.RegisterRoute("AnotherPage", typeof(AnotherPage));

What am I doing wrong?

Thanks for any insight

Upvotes: 0

Views: 1316

Answers (2)

Toto
Toto

Reputation: 972

For anybody running into similar issues, as Liqun Shen-MSFT suggested, first I cleaned my route definitions and defined them only once in AppShell.xaml:

<TabBar Route="MainTabBar">
    <Tab>
        <ShellContent ContentTemplate="{DataTemplate local:MainPage}"/>
    </Tab>
    <Tab>
        <ShellContent ContentTemplate="{DataTemplate local:OtherPage}"/>
    </Tab>
</TabBar>
<ShellContent ContentTemplate="{DataTemplate local:AnotherPage}" Route="AnotherPage" />

What I was lacking here is the Route="MainTabBar" information, that not allows me, from AnotherPage, to navigate to MainPage, with the bottom tab bar and no return button as when the app launches, like so

Shell.Current.GoToAsync("//MainTabBar");

Upvotes: 1

Liqun Shen-MSFT
Liqun Shen-MSFT

Reputation: 8290

You may register the route in ShellContent objects

<TabBar Route="MainTabBar">
    <Tab Title="page1" >
        <ShellContent ContentTemplate="{DataTemplate local:MainPage}" Route="MainPage"/>
    </Tab>
    <Tab Title="page2"> 
        <ShellContent ContentTemplate="{DataTemplate local:OtherTabbedPage}" Route="OtherTabbedPage"/>
    </Tab>
</TabBar>
<ShellContent ContentTemplate="{DataTemplate local:AnotherPage}" Route="AnotherPage" />

And no need to register them in code-behind again.

Then perform navigation:

Shell.Current.GoToAsync("//AnotherPage");

or

Shell.Current.GoToAsync("//MainTabBar");

For more info, you may refer to Register routes and Perform navigation

Hope it helps!

Upvotes: 3

Related Questions