Navigate PopToRoot when Tab Reselected in .NET MAUI - Navigation.PopToRootAsync

Bhuwan 721 Reputation points
2024-09-05T13:33:01.1866667+00:00

In Xamarin.Forms, we use the following code for tab reselection, and it works there. I want to achieve the same functionality in .NET MAUI, where selecting a tab will navigate to the root of the navigation stack.

using Dev.Controls;
using Dev.Droid.Controls;
using Android.Content;
using System;
using System.Diagnostics;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
[assembly: ExportRenderer(typeof(CustomShell), typeof(CustomShellRenderer))]
namespace Dev.Droid.Controls
{
    public class CustomShellRenderer : ShellRenderer
    {
        /// <summary>
        /// CustomShellRenderer
        /// </summary>
        /// <param name="context"></param>
        public CustomShellRenderer(Context context) : base(context)
        {
        }
        /// <summary>
        /// IShellItemRenderer
        /// </summary>
        /// <param name="shellItem"></param>
        /// <returns></returns>
        protected override IShellItemRenderer CreateShellItemRenderer(ShellItem shellItem)
        {
            return new CustomShellItemRenderer(this);
        }
    }
    /// <summary>
    /// CustomShellItemRenderer
    /// </summary>
    public class CustomShellItemRenderer : ShellItemRenderer
    {
        /// <summary>
        /// TodoShellItemRenderer
        /// </summary>
        /// <param name="shellContext"></param>
        public CustomShellItemRenderer(IShellContext shellContext) : base(shellContext)
        {
        }
        /// <summary>
        /// Pops to root when the selected tab is pressed.
        /// </summary>
        /// <param name="shellSection"></param>
        protected override void OnTabReselected(Xamarin.Forms.ShellSection shellSection)
        {
            try
            {
                Xamarin.Forms.Device.BeginInvokeOnMainThread(async () =>
                {
                    await shellSection?.Navigation.PopToRootAsync();
                });
            }
            catch (Exception ex)
            {
                Debug.WriteLine(ex);
            }
        }
    }
}
.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,578 questions
0 comments
Accepted answer
  1. Leon Lu (Shanghai Wicresoft Co,.Ltd.) 76,391 Reputation points Microsoft Vendor
    2024-09-06T03:21:32.6033333+00:00

    Hello,

    want to achieve the same functionality in .NET MAUI, where selecting a tab will navigate to the root of the navigation stack

    You can do this by adding the shell custom code in the Platform/Android folder, remove [assembly: ExportRenderer(typeof(CustomShell), typeof(CustomShellRenderer))] and change Xamarin.Forms.Device.BeginInvokeOnMainThread to MainThread.InvokeOnMainThreadAsync like following code.

    namespace Dev.Platforms.Android
{
    public class CustomShellRenderer : ShellRenderer
    {
        /// <summary>
        /// CustomShellRenderer
        /// </summary>
        /// <param name="context"></param>
        public CustomShellRenderer(Context context) : base(context)
        {
        }
        /// <summary>
        /// IShellItemRenderer
        /// </summary>
        /// <param name="shellItem"></param>
        /// <returns></returns>
        protected override IShellItemRenderer CreateShellItemRenderer(ShellItem shellItem)
        {
            return new CustomShellItemRenderer(this);
        }
    }
    /// <summary>
    /// CustomShellItemRenderer
    /// </summary>
    public class CustomShellItemRenderer : ShellItemRenderer
    {
        /// <summary>
        /// TodoShellItemRenderer
        /// </summary>
        /// <param name="shellContext"></param>
        public CustomShellItemRenderer(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)
        {
            base.OnTabReselected(shellSection);
            try
            {
                MainThread.InvokeOnMainThreadAsync(async () => {
 
                    await shellSection?.Navigation.PopToRootAsync();
                });
            }
            catch (Exception ex)
            {
 
                Debug.WriteLine(ex);
            }
        }

    }
}

    Then register this custom renderer in the MauiProgram.cs

    
public static class MauiProgram
{
     public static MauiApp CreateMauiApp()
     {

...
//register it at here
  builder.ConfigureMauiHandlers(handlers =>
            {
#if ANDROID
                handlers.AddHandler<AppShell, Dev.Platforms.Android.CustomShellRenderer>();
#endif
            });

     }
}

    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.

    1 person found this answer helpful.

0 additional answers

Sort by: Most helpful
Most helpful Newest Oldest

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.