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:

Answer 2

Reason for Problem

You currently have not implemented a custom renderer for the android platform and therefor will not see the same segmented controls and children of the segmented controls render.

A Solution to your Problem

In a previous app I developed I came across a similar problem and used the following plugin to solve the issue on both Android and iOS:

https://github.com/alexrainman/SegmentedControl

If you install the Nuget package SegmentedControl by alexrainman in your project and follow his documentation you will get it to work.

This cuts out the need for you to implement your own custom renderers on both platforms.

Please note:

your SegControl_ValueChanged method will change to Handle_ValueChanged

You should remove your current custom renderers for the iOS platform as not to cause confusion