How to add content view in segment control in xamarin forms

Question

I have to implement a content view in segment control. This is the UI I have to implement

As you can see there is two content view that is VENDOR NAME and PRODUCT/SERVICE. I followed this example and implemented it in iOS but in android, it's just a blank app. This is my XAML code.

  <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:SegmentedApp" x:Class="SegmentedApp.SegmentedAppPage" >

    </ContentPage>

This is the code behind
 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;
        }
    }

This is my view1

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

I didn't find a custom renderer for this. I don't know how should I implement the custom renderer for this segment control. This is the link for my project.

Answer 1

The post you are following is focusing for iOS not for android. From custom render it probably going to show you radio button on android & for iOS same as above. To set up custom renderer you need to write up huge code including layout, styles & renderer class.

To reduce our work we can use SegmentedControl.FormsPlugin. Just install it from Nuget package manager on solution level & write below code.

SegmentAppPage.xaml file

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:controls="clr-namespace:SegmentedControl.FormsPlugin.Abstractions;assembly=SegmentedControl.FormsPlugin.Abstractions"
             x:Class="SegmentedApp.SegmentedAppPage" >

    <StackLayout x:Name="segContainer"
                 Padding="12"
                 Spacing="12">
        <controls:SegmentedControl BackgroundColor="White" SelectedTextColor="White" TintColor="#007AFF" x:Name="SegControl" ValueChanged="Handle_ValueChanged">
            <controls:SegmentedControl.Children>
                <controls:SegmentedControlOption  Text="Vender Name" />
                <controls:SegmentedControlOption Text="Product/Service" />
            </controls:SegmentedControl.Children>
        </controls:SegmentedControl>
        <StackLayout x:Name="SegContent" />
    </StackLayout>
</ContentPage>

Above we have declared control by using namespace of plugin. You can add controls as many children you need. In our case we need two buttons.

SegmentAppPage.xaml.cs file

public partial class SegmentedAppPage : ContentPage
{
    View1 view1 = new View1();
    View2 view2 = new View2();
    public SegmentedAppPage()
    {
        InitializeComponent();
    }
    void Handle_ValueChanged(object sender, SegmentedControl.FormsPlugin.Abstractions.ValueChangedEventArgs e)
    {
        switch (e.NewValue)
        {
            case 0:
                SegContent.Children.Clear();
                SegContent.Children.Add(view1);
                break;
            case 1:
                SegContent.Children.Clear();
                SegContent.Children.Add(view2);
                break;
        }
    }
}

Output screen: