Shell Navigation Breaks When Navigating Back to Top-Level Tab Bar ContentPage

Question

I have a Shell navigation structure defined like this:

    Items.Add( new TabBar()  
    {  
    	Items =  
    	{  
    		new ShellContent  
    		{  
    			Icon = ImageSource.FromResource( "HomeIcon" ),  
    			ContentTemplate = new DataTemplate( typeof(HomeView) ),  
    			Route = "Home",  
    		},  
    		new ShellContent  
    		{  
    			Icon = ImageSource.FromResource( "SettingsIcon" ),  
    			ContentTemplate = new DataTemplate( typeof(SettingsView) ),  
    			Route = "Settings"  
    		},  
    		new ShellContent  
    		{  
    			Icon = ImageSource.FromResource( "ProgressIcon" ),  
    			ContentTemplate = new DataTemplate( typeof(ProgressView) ),  
    			Route = "Progress"  
    		}  
    	}  
    });  
  
Routing.RegisterRoute( "A", typeof(AView) );  
Routing.RegisterRoute( "B", typeof(BView) );  

The attached diagram shows the conceptual navigation hierarchy.

If, from Home, I perform the following navigation actions...

GotoAsync( "A" );  
GotoAsync( "B" );  
GotoAsync( "//" + "Progress" );  

I do indeed go back to the top-level Progress screen.

If I now tap on the tab-bar and go to Settings, this too is displayed as expected.

If I now tap on the tab-bar to return to the Home screen, my application blows up because the OnAppearing() event for B is called again. It is as if the navigation system has replaced the top-level screen in the tab-bar. Surely this should not happen. Even if it did, the documentation says that navigating to a route beginning "//" replaces the current navigation stack, so my screen A and B should be gone, and I would hope subject to garbage collection.

Does anyone have any idea what may be happening here and more importantly what I can do to fix this or work around it?

PS - I have now posted several bugs about Shell but response time seems to have slowed almost to a stop. I guess Xamarin guys are being pulled onto MAUI, which would be fine if Xamarin were completely stable, but it contains a lot of relatively new stuff that still seems to need spit and polish.

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

If the 'Home' route is top level of page A and page B, 'Home' route should be a Tab instead of a ShellContent. I create a basic demo about the function, it works as expected. Here is the sample code, you could refer to it.

   public class CustomAppShell : Shell  
   {  
       public CustomAppShell()  
       {  
           Items.Add(new TabBar()  
           {  
               Items =  
                   {  
                       new Tab()  
                       {  
                           Title = "Home",  
                           Route = "Home",  
                           Icon = "home.png",  
                           Items =  
                           {  
                               new ShellContent  
                               {  
                                   Title = "PageA",  
                                   Icon = "pageA",  
                                   Route = "PageA",  
                                   ContentTemplate = new DataTemplate(typeof(PageA)),  
                               },  
                               new ShellContent  
                               {  
                                   Title = "PageB",  
                                   Icon = "pageB",  
                                   Route = "PageB",  
                                   ContentTemplate = new DataTemplate(typeof(PageB)),  
                               },  
                           }  
                       },  
                       new Tab()  
                       {  
                           Title = "SettingPage",  
                           Route = "Setting",  
                           Icon = "setting.png",  
                           Items =  
                           {  
                               new ShellContent  
                               {  
                                   ContentTemplate = new DataTemplate(typeof(SettingPage)),  
                               }  
                           }  
                       },  
                       new Tab()  
                       {  
                           Title = "ProgressPage",  
                           Route = "Progress",  
                           Icon = "progress.png",  
                           Items =  
                           {  
                               new ShellContent  
                               {  
                                   ContentTemplate = new DataTemplate(typeof(ProgressPage)),  
                               }  
                           }  
                       }  
                   }  
           });  
       }  
   }  

Here is the code about navigation:

   public partial class PageA : ContentPage  
   {  
       public PageA()  
       {  
           InitializeComponent();  
       }  
     
       private void NavToProgress_Clicked(object sender, EventArgs e)  
       {  
           Shell.Current.GoToAsync("//Progress");  
       }  
     
       private void NavToSetting_Clicked(object sender, EventArgs e)  
       {  
           Shell.Current.GoToAsync("//Setting");  
       }  
     
       private void NavToPageB_Clicked(object sender, EventArgs e)  
       {  
           Shell.Current.GoToAsync("//Home/PageB");  
       }  
   }  

Here is the related doc, you could refer to: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/navigation#routes

Best Regards,

Jarvan Zhang

---

If the response is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.