首页 > 解决方案 > Xamarin 表单嵌套选项卡

问题描述

我注意到可以创建带有嵌套选项卡的移动应用程序。

这在 Xamarin Forms 中可行吗?请看下面的屏幕截图:

带有嵌套选项卡的选项卡

我可以使用TabbedPage在 iOS 上创建底部选项卡,但是如何在页面顶部创建嵌套选项卡?

嵌套选项卡

谢谢

标签: c#xamarin.forms

解决方案


这在 Xamarin Forms 中可行吗?

是的,当然。你可以使用CustomRenderer来实现它。参考下面的代码。

在此处输入图像描述

在 iOS 项目中。创建页面渲染器

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;

        //}
     }

  }
}

在表单中,您可以订阅消息。如果您想在单击分段时处理表单中的事件。

public MyPage1()
{
   //...

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


} 

推荐阅读