如何在 IOS Xamarin.Forms 中将内容页添加到段控件

How to Add Content Page to Segment Control in IOS Xamarin.Forms

我在我的应用程序中使用了分段控件。我不知道如何像标签页一样将两个内容页添加到 Segment 控件中。我附上了示例文件。有什么建议请给Link for Sample Application

示例代码:

public partial class SamplePage : ContentPage
{

    SegmentedControl segControl;
    SegmentedControlOption optionOne;
    SegmentedControlOption optionTwo;

    public SamplePage()
    {
        segControl = new SegmentedControl();
        optionOne = new SegmentedControlOption();
        optionTwo = new SegmentedControlOption();            

        optionOne.Text = "One";
        optionTwo.Text = "Two";                  

        segControl.Children.Add(optionOne);
        segControl.Children.Add(optionTwo);

        var stack = new StackLayout()
        {
            VerticalOptions = LayoutOptions.StartAndExpand,
            HorizontalOptions = LayoutOptions.CenterAndExpand,
            Children = { segControl }
        };

        this.Content = stack;

    }       
}

ScreenShot Attached

只是一些建议和解释。

  1. 我们不能将 ContentPage 放入另一个 ContentPage

    最好用ContentView代替ContentPage

  2. Grid在这种情况下更推荐,因为它会填满整个屏幕。

  3. 使用ValueChanged事件动态改变视图。

代码:

页数

public partial class SegmentedAppPage : ContentPage
{
    SegmentedControl segControl;      
    SegmentedControlOption scOptionOne;
    SegmentedControlOption scOptionTwo;

    Grid grid;

    View1 view1 = new View1();
    View2 view2 = new View2();

    public SegmentedAppPage()
    {
        InitializeComponent();

        segControl = new SegmentedControl();
        segControl.SelectedValue = "One";
        scOptionOne = new SegmentedControlOption();
        scOptionTwo = new SegmentedControlOption();            

        scOptionOne.Text = "One";
        scOptionTwo.Text = "Two";

        segControl.Children.Add(scOptionOne);
        segControl.Children.Add(scOptionTwo);

        grid = new Grid();
        grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Auto) });
        grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });

        grid.Children.Add(segControl, 0, 0);
        grid.Children.Add(view1, 0, 1);

        this.Content = grid;

        segControl.ValueChanged += SegControl_ValueChanged;
    }

    private void SegControl_ValueChanged(object sender, EventArgs e)
    {
        SegmentedControl control = sender as SegmentedControl;
        if(control.SelectedValue is "One")
        {
            grid.Children.Remove(view2);
            grid.Children.Add(view1,0,1);  //This line 
        }
        else if (control.SelectedValue is "Two")
        {
            grid.Children.Remove(view1);
            grid.Children.Add(view2, 0, 1); //This line 
        }
        this.Content = grid;
    }
}

ContentView

public class View1 : ContentView
{
    public View1()
    {
        Content = new StackLayout
        {
            BackgroundColor = Color.Green,
            Children = {
                new Label { Text = "View1" }
            }
        };
    }
}

要在 segmentedControl 上设置默认值,请修改 SegmentedControlRenderers

中的代码
protected override void OnElementChanged(ElementChangedEventArgs<SegmentedControl> e)
{
    base.OnElementChanged(e);

    var segmentedControl = new UISegmentedControl();

    for (var i = 0; i < e.NewElement.Children.Count; i++)
    {
        segmentedControl.InsertSegment(e.NewElement.Children[i].Text, i, false);
    }

    segmentedControl.ValueChanged += (sender, eventArgs) => {
        e.NewElement.SelectedValue = segmentedControl.TitleAt(segmentedControl.SelectedSegment);
    };
    segmentedControl.SelectedSegment = 0; // add this line
    SetNativeControl(segmentedControl);
}

测试