How can I make custom tabbed page?(Rounded frame on the bottom)

Issue

How can I make custom tabbed page? Sorry for a stupid question,but please help.Maybe someone now how to make custom tabbed page like this I don't know how to make this rounded frame at the bottom to customize the tabbed page

Solution

You can use Xamarin Community Toolkit available via NuGet. There you have examples, which might help with getting what you want. This is what I quickly got by looking at their example:

Use TabStripBackgroundView to get rounded frame, like here:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TestTabbedCustom.MainPage"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit">

    <Grid>
        <xct:TabView
                TabStripPlacement="Bottom"
                TabStripHeight="60"
                TabIndicatorColor="Yellow"
                TabContentBackgroundColor="Yellow"
                IsTabTransitionEnabled ="True">
                <xct:TabView.TabStripBackgroundView>
                <BoxView
                        Color="Blue"
                        CornerRadius="36, 36, 0, 0"/>
                 </xct:TabView.TabStripBackgroundView>
            
            <xct:TabViewItem
                    Icon="icon.png"
                    Text="Tab 1"
                    TextColor="White"
                    TextColorSelected="Yellow"
                    FontSize="12">
                <Grid 
                        BackgroundColor="Gray">
                    <Label
                            HorizontalOptions="Center"
                            VerticalOptions="Center"
                            Text="TabContent1" />
                </Grid>
            </xct:TabViewItem>

            <xct:TabViewItem
                    Icon="icon.png"
                    Text="Tab 2"
                    TextColor="White"
                    TextColorSelected="Yellow"
                    FontSize="12">
                <Grid>
                    <Label    
                            HorizontalOptions="Center"
                            VerticalOptions="Center"
                            Text="TabContent2" />
                </Grid>
            </xct:TabViewItem>
        </xct:TabView>
    </Grid>

</ContentPage>

Answered By - adamm