Xamarin.Forms TabbedPage event when current tab is tapped to refresh the page

Question

I'm using Xamarin.Forms to build an iOS/Android app, and have a TabbedPage.

If a user is already on Tab 2, and Tab2 is clicked, and I want either the tab2 to refresh, or for a function of my own to run so I can refresh it myself.

Is there a way to do this within Xamarin.Forms or a way to do it with custom renderers?

Answer 1

Here is how I ended up solving the issue. My TabbedPage consisted of a NavigationPage for each tab, so if you are not using navigation pages your code will have to change a little bit but only slightly. You can put your "refresh" logic inside of OnTabbarControllerItemSelected for iOS and OnTabbarControllerItemSelected for Android. Check out the code below.

Android Renderer (courtesy of Mike Ma)

using Android.Support.Design.Widget;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using Xamarin.Forms.Platform.Android.AppCompat;
[assembly: ExportRenderer(typeof(MainTabbedPage), typeof(MainPageRenderer))]
namespace YourNameSpace
{
    public class MainPageRenderer : TabbedPageRenderer, TabLayout.IOnTabSelectedListener
    {
        private MainTabbedPage _page;
        protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
        {
            base.OnElementChanged(e);
            if (e.NewElement != null)
            {
                _page = (MainTabbedPage)e.NewElement;
            }
            else
            {
                _page = (MainTabbedPage)e.OldElement;
            }

        }
        async void TabLayout.IOnTabSelectedListener.OnTabReselected(TabLayout.Tab tab)
        {
            await _page.CurrentPage.Navigation.PopToRootAsync();
        }
    }
}

iOs Renderer:

using UIKit;
using System;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(MainTabbedPage), typeof(MainPageRenderer))]
namespace YourNameSpace
{
    public class MainPageRenderer : TabbedRenderer
    {
        private MainTabbedPage _page;
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
            {
                _page = (MainTabbedPage)e.NewElement;
            }
            else
            {
                _page = (MainTabbedPage)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 (_page?.CurrentPage?.Navigation != null && _page.CurrentPage.Navigation.NavigationStack.Count > 0)
            {
                await _page.CurrentPage.Navigation.PopToRootAsync();
            }

        }
    }
}

Answer 2

Do some research of Android Native TabLayout the click event call back function is OnTabReselected

And according to the TabbedPageRenderer source code. You can find OnTabReselected is not be implemented.

So I created a customer render for TabbedPage as following code and implement the OnTabReselected function to change the current page background :

[assembly: ExportRenderer(typeof(Page1), typeof(MyTabPageRender))]
namespace XamarinTabbedPage_Demo.Droid
{
    public class MyTabPageRender : TabbedPageRenderer, TabLayout.IOnTabSelectedListener
    {
        protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
        {
            base.OnElementChanged(e);
        }
        void TabLayout.IOnTabSelectedListener.OnTabReselected(TabLayout.Tab tab)
        {
            int selectedIndex = tab.Position;
            if (Element.Children.Count > selectedIndex && selectedIndex >= 0)
            {
                Element.CurrentPage = Element.Children[selectedIndex];

                if (selectedIndex == 0)
                {
                    Element.CurrentPage.BackgroundColor = Color.Black;
                }
            }
        }
    }
}