如何在IOS Xamarin.Forms中将内容页面添加到细分控件 [英] How to Add Content Page to Segment Control in IOS Xamarin.Forms

问题描述

我在我的应用程序中使用了分段控制.我不知道如何像选项卡式页面一样将两个内容页面添加到Segment控件中.我已经附上了样本文件.请给出任何建议示例应用程序链接

I have used Segmented Control in my application. I don't know how to add two content pages to Segment control like a tabbed page. I have attached the sample file. Please give any suggestion 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

推荐答案

仅是一些建议和解释.

1. 我们不能在另一个ContentPage

最好使用ContentView代替ContentPage

Grid，因为它充满了整个屏幕.

Grid is more recommended in this scenario , since it fills with the whole Screen.

使用ValueChanged事件动态更改视图.

Use ValueChanged event to change the view dynamically.

代码:

页面

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

测试

这篇关于如何在IOS Xamarin.Forms中将内容页面添加到细分控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！