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

Question

我在我的应用程序中使用了分段控制。我不知道如何将两个内容页面添加到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

Answer 1

只是一些建议和解释。

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

内容查看

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

测试