如何检测 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

如果要获取选定的选项卡，则需要使用ItemSource和SelectedItem属性，如 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.

Answer 5

如果您使用的是 shell 和 MAUI，这就是它的完成方式： https ://docs.microsoft.com/en-us/dotnet/maui/fundamentals/shell/navigation#navigation-deferral

Answer 6

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