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

Question

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 gi

Answer 1

Just some suggestions and explanations.

1. We can't put a ContentPage inside another ContentPage

   It's better to use ContentView instead of ContentPage

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

3. Use ValueChanged event to change the view dynamically.

Code :

Page

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

To set default value on segmentedControl , modify code in SegmentedControlRenderers

protected override void OnElementChanged(ElementChangedEventArgs 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);
}

Test