0

Good day fellow code ninjas!!!

Using a '< TabbedPage/ >' in Xamarin forms I can easily create a tab bar at the top of my page. I would however like to have two tab bars instead of one. For example, 3 tab buttons in the first tab bar row and another 3 in the second row and the user being able to navigate between all 6 pages.

Does anyone perhaps know if this is possible in Xamarin forms and/or if there is any documentation that might assist.

Videl
  • 19
  • 1
  • Sounds like a really bad experience. But nothing is impossible, you might just need to work for it a bit. What did you try? – Cheesebaron Dec 14 '21 at 12:42
  • AFAIK, none of the existing custom tab bar implementations handle this. Nor does any documentation. Nor does iOS or Android have this built in. You would need to download one of the custom TabBar repos, and modify it so that there are two rows of tabs. Doing so successfully requires significant understanding of Xamarin Forms. As far as I know, no one has ever done this. I recommend instead, making the tabs **narrow enough that they all fit.** How? [tab items with multi-line text](https://stackoverflow.com/q/60055625/199364). – ToolmakerSteve Dec 14 '21 at 21:20

2 Answers2

0

You could use the TabView from the Xamarin Community Toolkit in addition to your TabbedPage . Here's how it works:

<Grid>
        <xct:TabView>
                <xct:TabViewItem>
                    <Grid>
                        <Label
                            HorizontalOptions="Center"
                            VerticalOptions="Center"
                            Text="TabContent1" />
                    </Grid>
                </xct:TabViewItem>

                <xct:TabViewItem>
                    <Grid>
                        <Label    
                            HorizontalOptions="Center"
                            VerticalOptions="Center"
                            Text="TabContent2" />
                    </Grid>
                </xct:TabViewItem>
        </xct:TabView>
  </Grid>

If you put a TabView in each of your TabBar contents you will be able to get the result you want. In your case, it would be something like this:

  <ContentPage Title="Tab 1">  
    <xct:TabView>
                <xct:TabViewItem>
                    <Grid>
                        <Label
                            HorizontalOptions="Center"
                            VerticalOptions="Center"
                            Text="TabContent1" />
                    </Grid>
                </xct:TabViewItem>

                <xct:TabViewItem>
                    <Grid>
                        <Label    
                            HorizontalOptions="Center"
                            VerticalOptions="Center"
                            Text="TabContent2" />
                    </Grid>
                </xct:TabViewItem>
        </xct:TabView>
  </ContentPage>  
  <ContentPage Title="Tab 2">  
    <xct:TabView>
                <xct:TabViewItem>
                    <Grid>
                        <Label
                            HorizontalOptions="Center"
                            VerticalOptions="Center"
                            Text="TabContent1" />
                    </Grid>
                </xct:TabViewItem>

                <xct:TabViewItem>
                    <Grid>
                        <Label    
                            HorizontalOptions="Center"
                            VerticalOptions="Center"
                            Text="TabContent2" />
                    </Grid>
                </xct:TabViewItem>
        </xct:TabView>
  </ContentPage>

If you want to see more about TabViews, there is a great article posted by Gerald Versluis, that explains it perfectly: https://devblogs.microsoft.com/xamarin/xamarin-community-toolkit-tabview/

Bryce Friha
  • 186
  • 2
  • 11
-1

Give it a try with James Montemagno youtube channel

EDIT

here is the official github link for the library used by that video https://github.com/roubachof/Sharpnado.Tabs

cahyo
  • 597
  • 2
  • 5
  • 14