Xamarin Forms Nested Tabs

Question

I've noticed it's possible to create a mobile app with nested tabs.

Is this possible in Xamarin Forms? Please see screen shot below:

I can create the bottom tabs on iOS using TabbedPage, but how do I create the nested tabs at the top of the page?

Thank you

Answer 1

The same way you would do on the native app. There are no native nested tabs, so Xamarin can't support it as such thing doesn't exist.

In the native app you have the control at the top (called SegmentedControl on iOS and on Android there is no such control out of the box) where you pick the value and then change the view below manually when it is clicked.

Answer 2

Is this possible in Xamarin Forms?

Yes,of course.You can use CustomRenderer to implement it.Refer to the following code.

in iOS Project . Create a pageRenderer

using System;

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

using app1;
using app1.iOS;

using UIKit;
using Foundation;
using CoreGraphics;
using ObjCRuntime;

[assembly:ExportRenderer(typeof(MyPage1),typeof(MyPageRenderer))]
namespace app1.iOS
{
  public class MyPageRenderer:PageRenderer
  {
    public MyPageRenderer()
    {
    }


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

        if (ViewController != null)
        {

           NSArray items = NSArray.FromStrings(new string[] { "Courses", "Favourite", "Recent" });

           UISegmentedControl segmentedControl = new UISegmentedControl(items)
           {
              Frame = new CGRect(50, 20, NativeView.Bounds.Width - 100, 35)
           };

           segmentedControl.SelectedSegment = 0;
           segmentedControl.TintColor = UIColor.Red;
           segmentedControl.ApportionsSegmentWidthsByContent = true; //Change the width of the segment based on the content of the segment

           segmentedControl.AddTarget(this, new Selector("ValueChanged:"), UIControlEvent.ValueChanged);

           NativeView.AddSubview(segmentedControl);
        }
    }


    [Export("ValueChanged:")]
    void ValueChanged(UISegmentedControl sender)
    {
       MessagingCenter.Send<Object, int>(this, "ClickSegmentedControl", (int)sender.SelectedSegment);

        // switch((int)sender.SelectedSegment){
        //  case 0:

        //      break;

        //  case 1:

        //      break;

        //  case 2:

        //      break;

        //  default:

        //      break;

        //}
     }

  }
}

in Forms ,you can subscribe the message .if you want to handle the event in forms when you click the segmented .

public MyPage1()
{
   //...

   MessagingCenter.Subscribe<Object, int>(this, "ClickSegmentedControl", (sender, arg) =>
   {
            Console.WriteLine(arg); //arg is num of the segment that you clicked.
   });


}