Confused about Shell Navigation

Question

I have an app using Shell navigation. There are 4 menu options that appear in the flyout menu and along the bottom of the screen (tabs?).

I have: Home, Statement, Load and Devices

The navigation is working OK between those 4 pages.

From each of those pages (except Home), you can open further "detail" pages which I achieve in code using "GoToAsync". The "Detail" page opens and a "Back" navigation arrow at the top of the page is added, all of the tabs are still visible along the bottom (Home, Statement, Load, Devices). If I click on the "Back" arrow at the top, I return to the main page which is one of the list above, which is fine.

The problem is:

navigate to, say, Load and then onto a "detail" page, and then navigate to a main page (list above) and then back to Load ... the "Detail" page is shown, NOT the Load page.

How can I remove / close the "Detail" page if I navigate to somewhere else using the main menu along the bottom (while on the "Detail" page)?

If I touch Home, Statement, Load or Devices, I want to go to that exact page even if I had previously visited a "Detail" page and navigated away to Home, Statement, Load or Devices.

Sorry, I hope the above is clear enough to explain what is currently happening and what it is that I want to happen!!

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

Do you want to achieve that click whatever tabs, then navigate back to the root page?

If so, you can use custom renderer to achieve it in shell custom renderer. when click the tab, will execute Navigation.PopToRootAsync();

For Android:

   using Android.App;  
   using Android.Content;  
   using Android.OS;  
   using Android.Runtime;  
   using Android.Views;  
   using Android.Widget;  
   using AppShellNavitationDEmo.Droid;  
   using System;  
   using System.Collections.Generic;  
   using System.Linq;  
   using System.Text;  
   using Xamarin.Forms;  
   using Xamarin.Forms.Platform.Android;  
     
   [assembly: ExportRenderer(typeof(Shell), typeof(JknShellRenderer))]  
   namespace AppShellNavitationDEmo.Droid  
   {  
       class JknShellRenderer : ShellRenderer  
       {  
           public JknShellRenderer(Context context) : base(context)  
           {  
           }  
     
           protected override IShellItemRenderer CreateShellItemRenderer(ShellItem shellItem)  
           {  
               return new JknShellItemRenderer(this);  
           }  
       }  
       public class JknShellItemRenderer : ShellItemRenderer  
       {  
           public JknShellItemRenderer(IShellContext shellContext) : base(shellContext)  
           {  
           }  
     
           /// <summary>  
           /// Pops to root when the selected tab is pressed.  
           /// </summary>  
           /// <param name="shellSection"></param>  
           protected override void OnTabReselected(ShellSection shellSection)  
           {  
               Xamarin.Forms.Device.BeginInvokeOnMainThread(async () =>  
               {  
                   await shellSection?.Navigation.PopToRootAsync();  
               });  
           }  
       }  
   }  

For iOS.

   using AppShellNavitationDEmo.iOS;  
   using Foundation;  
   using System;  
   using System.Collections.Generic;  
   using System.Linq;  
   using System.Text;  
   using UIKit;  
   using Xamarin.Forms;  
   using Xamarin.Forms.Platform.iOS;  
     
   [assembly: ExportRenderer(typeof(Shell), typeof(MyShellRenderer))]  
   namespace AppShellNavitationDEmo.iOS  
   {  
       class MyShellRenderer:ShellRenderer  
       {  
           protected override IShellSectionRenderer CreateShellSectionRenderer(ShellSection shellSection)  
           {  
               var renderer = base.CreateShellSectionRenderer(shellSection);  
               if (renderer != null)  
               {  
                   var tabbarController = (renderer as ShellSectionRenderer).TabBarController; //.SetBackgroundImage(UIImage.FromFile("monkey.png"), UIBarMetrics.Default);  
     
                  if (null != tabbarController)  
                   {  
                       tabbarController.ViewControllerSelected+= async (o,e)=> {  
                          // await _page.CurrentPage.Navigation.PopToRootAsync();  
                           await shellSection?.Navigation.PopToRootAsync();  
     
                       };  
                   }  
               }  
               return renderer;  
           }  
     
           
       }  
   }  

Best Regards,

Leon Lu

---

If the response is helpful, please click "Accept Answer" and upvote it.

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.