How to change the style of tab in segment control in xamarin forms

Question

I have a segment control where I'm displaying tabs. But I'm not able to edit the style of the tab in Xamarin Forms. This is the UI I want

This is how I want to display my tabs in the segment control. I'm able to change the tint color, background color, and text color but none of that will get me a tab in this style. This is my current UI

This is XAML code where I implemented the segment control

<controls:SegmentedControl  BackgroundColor="White" SelectedTextColor="Black" TintColor="#FFA500" x:Name="SegControl" ValueChanged="Handle_ValueChanged">
                <controls:SegmentedControl.Children>
                    <controls:SegmentedControlOption  Text="VENDOR NAME" />
                    <controls:SegmentedControlOption Text="PRODUCT/SERVICE" />
                </controls:SegmentedControl.Children>
            </controls:SegmentedControl>
            <StackLayout x:Name="SegContent" />
        </StackLayout>
        <StackLayout Margin="0,30,0,0">
            <StackLayout AbsoluteLayout.LayoutBounds=".20,1,1,.1" AbsoluteLayout.LayoutFlags="All" BackgroundColor="White" HorizontalOptions="FillAndExpand" Orientation="Horizontal">

                <StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckNear">

                    <Image Margin="0,10,0,10" x:Name="imgNear" Style="{StaticResource ButtonNavigationBarImageStyle}" />
                    <Label Text="Near" Style="{StaticResource ButtonNavigationBarLabelStyle}"></Label>
                </StackLayout>
                <StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckSearch">
                    <Image Margin="0,10,0,10" x:Name="imgSearch" Style="{StaticResource ButtonNavigationBarImageStyle}" />
                    <Label Text="Search" Style="{StaticResource ButtonNavigationBarLabelStyle}"></Label>
                </StackLayout>
                <StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckCart">
                    <Image Margin="0,10,0,10" x:Name="imgCart" Style="{StaticResource ButtonNavigationBarImageStyle}" />
                    <Label Text="Cart" Style="{StaticResource ButtonNavigationBarLabelStyle}"></Label>
                </StackLayout>
                <StackLayout Style="{StaticResource ButtonNavigationBarStackLayoutStyle}" x:Name="stckAccount">
                    <Image Margin="0,10,0,10" x:Name="imgAccount" Style="{StaticResource ButtonNavigationBarImageStyle}" />
                    <Label Text="Account" Style="{StaticResource ButtonNavigationBarLabelStyle}"></Label>
                </StackLayout>
            </StackLayout>

I'm not using any custom renderer for this segment control. Do I have to use a custom renderer for implementing the required UI? If yes how? Any suggestions?

Answer 1

SegmentedControl is not a built in Xamarin.Forms control. There are a few libraries that offer a SegmentedControl, so it would help to know which one you are using.

That said, the library author who created that SegmentedControl also made the platform renderers and so the different look on iOS vs Android is a result of that.

You can, of course, create your own custom renderer, but then why use the library?

Easier to me would be to make a control using Xamarin Forms, for instance you can use a grid that has a first row of two labels ( or Buttons) and a second row of 2 BoxViews that can act as the underline (very short height). Then just add TapGestureRecognizers to each Label (or just use a Buttons and style as needed).

Here's an example using Buttons and BoxViews:

XAML:

    <Grid Padding="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Button x:Name="vBtn"
                Text="VENDOR NAME" Clicked="Handle_Clicked"
                TextColor="Black"
                BackgroundColor="Transparent"
                BorderColor="Transparent"
                Grid.Row="0"
                Grid.Column="0"/>
        <Button x:Name="pBtn"
                Text="PRODUCT/SERVICE" Clicked="Handle_Clicked"
                TextColor="Black"
                BackgroundColor="Transparent"
                BorderColor="Transparent"
                Grid.Row="0"
                Grid.Column="1" />
        <BoxView x:Name="vBox"
                 Color="#FFA500" HeightRequest="5"
                 Grid.Row="1"
                 Grid.Column="0"/>
        <BoxView x:Name="pBox"
                 Color="Silver" HeightRequest="5" 
                 Grid.Row="1"
                 Grid.Column="1"/>
    </Grid> 

Code behind:

    void Handle_Clicked(object sender, System.EventArgs e)
    {
        Button btn = sender as Button;
        if (btn.Text == "PRODUCT/SERVICE")
        {
            vBox.Color = Color.Silver;
            pBox.Color = Color.FromHex("#FFA500");
            // Do anything else you need to do when the PRODUCT/SERVICE is tapped
        }
        else
        {
            vBox.Color = Color.FromHex("#FFA500");
            pBox.Color = Color.Silver;
            // Do anything else you need to do when the VENDOR NAME is tapped
        }
    }

No library or custom renderer needed.