Navigation

Question

Hi,

I have a bottom navbar,

One of those icon, navigates to a page with multiple child pages on it with multiple grandchildren pages within the child pages.

I want to know the best way that when I click on the icon in the navbar when I am in one of the child pages or grand child pages, it resets the navigation tree and returns to the parent page.

How can I achieve this?

Answer 1

Hello,

If CurrentPageChanged event is not working, we can do this by custom renderer handle the item click listener for iOS, Android platform separately. When detect the item click, you can popup to the root page.

For Android, I implement the IOnItemSelectedListener and IOnItemReselectedListener interface,

IOnItemSelectedListener will listen the item click event, IOnItemReselectedListener will listen the item re-click event. Both of them will pop up to the root page.

using Android.Content;
using Android.Views;
using Android.Widget;
using App6.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android.AppCompat;
using Xamarin.Forms.Platform.Android;
using Google.Android.Material.BottomNavigation;
using static Google.Android.Material.Navigation.NavigationBarView;

[assembly: ExportRenderer(typeof(TabbedPage), typeof(MyTabbedRenderer))]
namespace App6.Droid
{
    public class MyTabbedRenderer : TabbedPageRenderer, AdapterView.IOnItemSelectedListener, IOnItemReselectedListener
    {


       public MyTabbedRenderer(Context context) : base(context)
        {

       }

       private TabbedPage tabbed;
        protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
        {
            base.OnElementChanged(e);
           if (e.NewElement != null)
            {
                tabbed = (TabbedPage)e.NewElement;
            }
            else
            {
                tabbed = (TabbedPage)e.OldElement;
            }
            if (e.OldElement == null && e.NewElement != null)
            {
                for (int i = 0; i <= this.ViewGroup.ChildCount - 1; i++)
                {
                    var childView = this.ViewGroup.GetChildAt(i);
                    if (childView is ViewGroup viewGroup)
                    {
                        for (int j = 0; j <= viewGroup.ChildCount - 1; j++)
                        {
                            var childRelativeLayoutView = viewGroup.GetChildAt(j);
                            if (childRelativeLayoutView is BottomNavigationView)
                            {
                                ((BottomNavigationView)childRelativeLayoutView).SetOnItemReselectedListener(this);
                            }
                        }
                    }
                }
            }
       }

       public async void OnItemSelected(AdapterView parent, Android.Views.View view, int position, long id)
        {
            await tabbed.CurrentPage.Navigation.PopToRootAsync();
        }

       public  void OnNothingSelected(AdapterView parent)
        {
          
        }
        public async void OnNavigationItemReselected(IMenuItem p0)
        {
            await tabbed.CurrentPage.Navigation.PopToRootAsync();
        }
    }
}

For iOS, you can add OnTabbarControllerItemSelected directly, this event will get click and reclick event for your items in the buttonNavigationview.

using Foundation;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

namespace App6.iOS
{
    public class MyTabbedRenderer : TabbedRenderer
    {
        private TabbedPage tabbed;
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);
           if (e.NewElement != null)
            {
                tabbed = (TabbedPage)e.NewElement;
            }
            else
            {
                tabbed = (TabbedPage)e.OldElement;
            }

           try
            {
                var tabbarController = (UITabBarController)this.ViewController;
                if (null != tabbarController)
                {
                    tabbarController.ViewControllerSelected += OnTabbarControllerItemSelected;
                }
            }
            catch (Exception exception)
            {
                Console.WriteLine(exception);
            }
        }

       private async void OnTabbarControllerItemSelected(object sender, UITabBarSelectionEventArgs eventArgs)
        {
            if (tabbed?.CurrentPage?.Navigation != null && tabbed.CurrentPage.Navigation.NavigationStack.Count > 0)
            {
                await tabbed.CurrentPage.Navigation.PopToRootAsync();
            }
       }
    }
}

Best Regards,

Leon Lu

---

If the answer is the right solution, 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.