Xamarin Forms Tabs with a Button

Question

I'm trying to make a design like in the picture

But I don't know how to make tab buttons and tab process. I read microsoft's articles and watched a few videos.but none of them were as I wanted.I would be glad if you help

Hi welcome to the forum. I suspect that they may not be buttons, but a restyled tab page. Sometimes you have to overlay areas with transparent elements to get a particular visual style. — ChrisBD, Aug 16 '22 at 11:14
https://learn.microsoft.com/en-us/xamarin/community-toolkit/views/tabview — Jason, Aug 16 '22 at 12:17

score 0 · Answer 1 · answered Aug 17 '22 at 07:35

Yes, you can try to use Xamarin Community Toolkit TabView to achieve this just as Jason mentioned.

You can customize your tab to your needs.

Please refer to the following code:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="MyLittleApp.MainPage">

     <Grid>
        <xct:TabView
                TabStripPlacement="Bottom"
                TabStripBackgroundColor="Blue"
                TabStripHeight="60"
                TabIndicatorColor="Yellow"
                TabContentBackgroundColor="Yellow">

                <xct:TabViewItem
                    Icon="triangle.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="circle.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>

Note:You can also check thread: Custom TabbedPage with buttons .

Xamarin Forms Tabs with a Button

1 Answers1