How to determine tab button click in Xamarin.Forms?

Question

Here is the code I have. I would like to know how I can detect when a user clicks on a tab that is already selected, because I want to switch the icon for aPage between play.png and pause.png, and also want to call the 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);
    }
}

Please note that if possible, I would like to find a solution that does not include personalized renderers for iOS and Android. I am wondering if I can override TabbedPage and put the logic in this class?

Answer 1

I know that you want to avoid using your own visualization tools, but this is only possible with 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

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
            }
        }
    }
}

: @Kyle fooobar.com/questions/1018703/...

Answer 2

, ItemSource SelectedItem, ListView.

Answer 3

iOS, Android . http://motzcod.es/post/162985782667/dynamically-changing-xamarin-forms-tab-icons-when-select

Answer 4

You can not. TabbedPagefrom which you can check the source from here . Here, all options are selected, deselecting, updating, template, and logic. You can look at a property CurrentPage, but it matters if it is already selected, so you cannot use it.

Answer 5

this.PropertyChanging += async (object sender, PropertyChangingEventArgs e) =>
        {
            if (e.PropertyName == "CurrentPage")
            {
                if (this.CurrentPage == null)
                    return;
            }
        };