Xamarin.forms Tabbedpage Event When Current Tab Is Tapped To Refresh The Page

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 fun

Solution 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))]
namespaceYourNameSpace
{
    publicclassMainPageRenderer : TabbedPageRenderer, TabLayout.IOnTabSelectedListener
    {
        private MainTabbedPage _page;
        protectedoverridevoidOnElementChanged(ElementChangedEventArgs<TabbedPage> e)
        {
            base.OnElementChanged(e);
            if (e.NewElement != null)
            {
                _page = (MainTabbedPage)e.NewElement;
            }
            else
            {
                _page = (MainTabbedPage)e.OldElement;
            }

        }
        asyncvoid 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))]
namespaceYourNameSpace
{
    publicclassMainPageRenderer : TabbedRenderer
    {
        private MainTabbedPage _page;
        protectedoverridevoidOnElementChanged(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);
            }
        }

        privateasyncvoidOnTabbarControllerItemSelected(object sender, UITabBarSelectionEventArgs eventArgs)
        {
            if (_page?.CurrentPage?.Navigation != null && _page.CurrentPage.Navigation.NavigationStack.Count > 0)
            {
                await _page.CurrentPage.Navigation.PopToRootAsync();
            }

        }
    }
}

Solution 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))]
namespaceXamarinTabbedPage_Demo.Droid
{
    publicclassMyTabPageRender : TabbedPageRenderer, TabLayout.IOnTabSelectedListener
    {
        protectedoverridevoidOnElementChanged(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;
                }
            }
        }
    }
}