How can I detect the clicking of a tab button in Xamarin.Forms?

Question

Here is the code that I have. I would like to know how I can detect when a user clicks a tab that is already selected as I want to toggle the icon for the aPage between play.png and pause.png plus I also want to call a method on APage.

public partial class MainPage : TabbedPage
{
    public MainPage()
    {
        InitializeComponent();

        var aPage = new NavigationPage(new APage())
        {
            Title = "Play",
            Icon = "play.png"
        };
        var bPage = new NavigationPage(new BPage())
        { 
            Title = "Settings",
            Icon = "b.png"
        };

        Children.Add(aPage);
        Children.Add(bPage);
    }
}

Note that if possible I would like to find a solution that does not involve custom renderers for both iOS and Android. I'm wondering can I redefine the TabbedPage and put the logic in that class?

Answer 1

I know you want to avoid using custom renderers, but this is only possible by using a Custom Renderer.

Code

Xamarin.Android Custom Renderer

using Android.Content;
using Android.Support.Design.Widget;

using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using Xamarin.Forms.Platform.Android.AppCompat;

[assembly: ExportRenderer(typeof(MainPage), typeof(MainPageRenderer))]
namespace YourNameSpace
{
    public class MainPageRenderer : TabbedPageRenderer, TabLayout.IOnTabSelectedListener
    {
        MainPage _page;

        public MainPageRenderer(Context context) : base(context) { }

        protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
                _page = e.NewElement as MainPage;
            else
                _page = e.OldElement as MainPage;
        }

        void TabLayout.IOnTabSelectedListener.OnTabReselected(TabLayout.Tab tab)
        {
            System.Diagnostics.Debug.WriteLine("Tab Reselected");
            //Handle Tab Reselected
        }
    }
}

Xamarin.iOS Custom Renderer

using System;
using System.Diagnostics;

using UIKit;

using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(MainPage), typeof(MainPageRenderer))]
namespace YourNameSpace
{
    public class MainPageRenderer : TabbedRenderer
    {
        MainPage _page;

        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
                _page = e.NewElement as MainPage;
            else
                _page = e.OldElement as MainPage;

            try
            {
                if (ViewController is UITabBarController tabBarController)
                    tabBarController.ViewControllerSelected += OnTabbarControllerItemSelected;
            }
            catch (Exception exception)
            {
                Debug.WriteLine(exception);
            }
        }

        void OnTabbarControllerItemSelected(object sender, UITabBarSelectionEventArgs eventArgs)
        {
            if (_page?.CurrentPage?.Navigation != null && _page.CurrentPage.Navigation.NavigationStack.Count > 0)
            {
                Debug.WriteLine("Tab Tapped");
                //Handle Tab Tapped
            }
        }
    }
}

Code credit: @Kyle https://stackoverflow.com/a/42909203/5953643

Answer 2

If you want to get selected tab then you need to use ItemSource and SelectedItem property like ListView.

Answer 3

You can do this easily in iOS, but in Android you need a custom renderer. Just check this blog http://motzcod.es/post/162985782667/dynamically-changing-xamarin-forms-tab-icons-when-select

Answer 4

You can't. TabbedPage interited from MultiPage that you can check the source from here. All select, deselect, update, template and logic is implemented here. You suppose to watch CurrentPage property but it has value check if already selected, so you cannot use.