Navigating to another shell page outside AppShell in .Net MAUI

Question

Navigating to another shell page outside AppShell in .Net MAUI

GloryDiv 16

I have a project with 5 Bottomtabs. The first tab shows a CollectionView of items users have to select. After selecting an item i want the user to be navigated onto another page, shellPage, which has 3 top tabs. Navigating onto a single Contentpage works fine but another shell or even a TabbedPage is not working. Below are the errors or feedbacks i got solving the problem of navigating onto the other shellPage.

The efforts i made
I wrapped AppShell in a NavigationPage as MainPage =new NavigationPage( new AppShell());

using `App.Current.MainPage.Navigation.PushModalAsync(new anotherShellPage());' or Shell.Current.Navigation.PushAsync($"{typeof(anotherShellPage)}"); to
navigate.
error : System.InvalidCastException: 'Specified cast is not valid.'
using Navigation.PushAsync(new NavigationPage(new anotherShellPage())); or App.Current.MainPage.Navigation.PushModalAsync(new anotherShellPage());
error :Java.Lang.IllegalArgumentException: 'DrawerLayout must be measured with MeasureSpec.EXACTLY.'. Here the new AppShell was without new NavigationPage() wrap.

What seems to be working
3. Using ** App.Current.MainPage.Navigation.PushAsync(new anotherShellPage());** navigates alright. But when the backbutton is pressed to navigate back to the ShellApp i get this error :Java.Lang.IllegalArgumentException: 'No view found for id 0x3 (unknown) for fragment ShellSectionRenderer{cce9fa} (143e32bb-f7d2-4698-bfcd-2d94c8d7d6bc id=0x3)'

using App.Current.MainPage.Navigation.PushModalAsync(new anotherShellPage()); also navigates but before navigating the navigation bar of the AppShell pulls down before navigating and after pressing the back button app closes without moving back to the AppShell/root page.
I aslso tried to create <tab> ** 3 top pages here ** </tab> outside the main <TabBar> in the AppShell.xaml so i forget about the anotherShellPage. This also navigates alright but the back buttom closes the app.

I just want to be able to move from one shellPage to another shellPage or TabbedPage and back. In real world an app with navigation like Besoccer app. Thank you.

JessieZhang-MSFT 7,526 Reputation points

2022-04-29T02:16:16.183+00:00

Navigating onto a single Contentpage works fine but another shell or even a TabbedPage is not working.

I don't quite understand what you mean by words but another shell or even a TabbedPage is not working. What's wrong or not working? Can you explain that in detail? And how can we reproduce your problem? If it is convinient for you, could you please post a basic demo so that we can try to reproduce this problem on our side?

GloryDiv 16

@ JessieZhang-2116 hi. My whole problem is to navigate from one shell page onto another shell page with a button click

Codes from App.xaml.cs

public App()
 {
 InitializeComponent();
 MainPage = new NavigationPage(new AppShell()); // Without this experience is very bad
 }

Codes from AppShell.xaml.cs

 public AppShell()
    {
        InitializeComponent();
      //  Routing.RegisterRoute(nameof(AnotherShellPage), typeof(AnotherShellPage));               
        myTab.CurrentItem = mon;        
    }

Codes from AppShell.xaml

<TabBar x:Name="myTabBar" >
        <Tab x:Name="myTab"  Route="homeTab" >            
            <ShellContent x:Name="mon" Title="Tue" ContentTemplate="{DataTemplate days:MondayPage}" />
            <ShellContent Title="Wed" ContentTemplate="{DataTemplate days:TuesdayPage}" />            
        </Tab>
   <TabBar>

Codes from MondayPage.xaml.cs
Here MondayPage has just a button to navigate unto AnotherShellPage

private void Navigate_To_AnotherShellPage_Clicked(object sender, EventArgs e)
    {     /*What should be here to make navigation successfull unto AnotherShellPage and also smooth back button navigation unto AppShell.xaml*/
       // Shell.Current.GoToAsync($"{typeof(AnotherShellPage)}");
        Application.Current.MainPage.Navigation.PushModalAsync( new AnotherShellPage);  //This worsk but i will need the nav panel and there is back button problem      
    }

AnotherShellPage is a shell page with both button and top tabs for different activites. I've tried many ways a few are those i have commented.

JessieZhang-MSFT 7,526 Reputation points

2022-05-04T08:09:34.393+00:00

Do you mean you want to navigate to another app from current app ?If yes, you can use dependency injection to achieve this.
GloryDiv 16 Reputation points

2022-05-04T20:44:48.283+00:00

No not a different app. Am talking about same app
JessieZhang-MSFT 7,526 Reputation points

2022-05-06T07:02:20.45+00:00

Could you please share a demo?
GloryDiv 16 Reputation points

2022-05-06T21:35:55.197+00:00

That's same as the codes I have posted above.

JessieZhang-MSFT 7,526 Reputation points

2022-04-29T02:16:16.183+00:00

Navigating onto a single Contentpage works fine but another shell or even a TabbedPage is not working.

I don't quite understand what you mean by words but another shell or even a TabbedPage is not working. What's wrong or not working? Can you explain that in detail? And how can we reproduce your problem? If it is convinient for you, could you please post a basic demo so that we can try to reproduce this problem on our side?
GloryDiv 16 Reputation points

2022-04-29T07:55:01.107+00:00

@ JessieZhang-2116 hi. My whole problem is to navigate from one shell page onto another shell page with a button click

Codes from App.xaml.cs

public App() { InitializeComponent(); MainPage = new NavigationPage(new AppShell()); // Without this experience is very bad }

Codes from AppShell.xaml.cs

public AppShell() { InitializeComponent(); // Routing.RegisterRoute(nameof(AnotherShellPage), typeof(AnotherShellPage)); myTab.CurrentItem = mon; }

Codes from AppShell.xaml

<TabBar x:Name="myTabBar" > <Tab x:Name="myTab" Route="homeTab" > <ShellContent x:Name="mon" Title="Tue" ContentTemplate="{DataTemplate days:MondayPage}" /> <ShellContent Title="Wed" ContentTemplate="{DataTemplate days:TuesdayPage}" /> </Tab> <TabBar>

Codes from MondayPage.xaml.cs
Here MondayPage has just a button to navigate unto AnotherShellPage

private void Navigate_To_AnotherShellPage_Clicked(object sender, EventArgs e) { /*What should be here to make navigation successfull unto AnotherShellPage and also smooth back button navigation unto AppShell.xaml*/ // Shell.Current.GoToAsync($"{typeof(AnotherShellPage)}"); Application.Current.MainPage.Navigation.PushModalAsync( new AnotherShellPage); //This worsk but i will need the nav panel and there is back button problem }

AnotherShellPage is a shell page with both button and top tabs for different activites. I've tried many ways a few are those i have commented.
JessieZhang-MSFT 7,526 Reputation points

2022-05-04T08:09:34.393+00:00

Do you mean you want to navigate to another app from current app ?If yes, you can use dependency injection to achieve this.
GloryDiv 16 Reputation points

2022-05-04T20:44:48.283+00:00

No not a different app. Am talking about same app
JessieZhang-MSFT 7,526 Reputation points

2022-05-06T07:02:20.45+00:00

Could you please share a demo?
GloryDiv 16 Reputation points

2022-05-06T21:35:55.197+00:00

That's same as the codes I have posted above.

Answer 1

James Montemagno 1

You will want to use Shell navigation which is based on URI's https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/navigation

and also here is a video I did on it https://www.youtube.com/watch?v=8iYpLMKE_ws

GloryDiv 16 Reputation points

2022-04-25T08:30:41.987+00:00

@James Montemagno Thank you for your answer . Inside MyCofeeApp navigating unto AddMyCoffePage is perfect since it is a single page(ContentPage). Assuming AddMyCoffePage is another shellPage / TabbedPage thats where my problem comes. I just changed AddMyCoffePage to a Shell and i got this error.Java.Lang.IllegalArgumentException: 'DrawerLayout must be measured with MeasureSpec.EXACTLY.'. And under what i stated above as What seems to be working after navigating onto the second shell page the Navigation.NavigationStack value is 1 so u cant go back and a whole lot if you still work around that. Results from .Net Maui is different and better than that of Xamarin anyway.

Navigating to another shell page outside AppShell in .Net MAUI

1 answer

Activity