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

【问题标题】：How to Add Content Page to Segment Control in IOS Xamarin.Forms如何在 IOS Xamarin.Forms 中将内容页面添加到段控制
【发布时间】：2018-05-17 19:02:02
【问题描述】：

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

【问题讨论】：

将相关代码直接包含在您的问题中，而不是作为外部链接。
感谢您的建议

标签： xamarin xamarin.ios xamarin.forms uisegmentedcontrol

【解决方案1】：

只是一些建议和解释。

我们不能将ContentPage 放在另一个ContentPage 中

最好使用ContentView 而不是ContentPage
Grid 在这种情况下更推荐使用，因为它会填满整个屏幕。
使用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);
}

测试

【讨论】：

嗨，在出现 View1 和 View2 的页面上工作正常。但我从“二”中单击“一”，View2 和 View1 文本被覆盖。我现在附上了屏幕截图。
您是否完全复制了我的代码？检查这一行：grid.Children.Remove(view2);
我已经完全复制了代码。但我仍然无法弄清楚我的错误。
对不起，我的错误，我已经更改了方法SegControl_ValueChanged中的代码，请检查..