Forum Xamarin.Forms

How to nest Tab views in Xamarin.Forms

arturmullerarturmuller Member ✭✭✭

I am trying to create this layout in Xamarin XAML but I cannot figure out how to combine TabView within a TabView. I want 3 main tabs in the bottom and for each page 1-2 subtabs. On each subtab I will need to have a ScrollView(I think thats the right element to use) with list items, which makes it even more complex. Like this picture:

Any idea/example or guidance of how to achieve this?

Best Answer

  • LeonLuLeonLu Xamurai
    Accepted Answer

    I write a demo about your screenshot.
    Here is a running GIF.

    First of all, you can create a TabbedPage like following code.

     <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:d="http://xamarin.com/schemas/2014/forms/design"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            mc:Ignorable="d"
    
            xmlns:views="clr-namespace:TabbedDemo.Views"
              xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
            android:TabbedPage.ToolbarPlacement="Bottom"
            x:Class="TabbedDemo.Views.MainPage">
    
    <TabbedPage.Children>
        <NavigationPage Title="Tab1">
            <NavigationPage.Icon>
                <OnPlatform x:TypeArguments="FileImageSource">
                    <On Platform="iOS" Value="tab_feed.png"/>
    
                </OnPlatform>
            </NavigationPage.Icon>
            <x:Arguments>
                <views:TabbedPage1 />
            </x:Arguments>
        </NavigationPage>
    
        <NavigationPage Title="Tab2">
            <NavigationPage.Icon>
                <OnPlatform x:TypeArguments="FileImageSource">
                    <On Platform="iOS" Value="tab_about.png"/>
    
                </OnPlatform>
            </NavigationPage.Icon>
            <x:Arguments>
                <views:AboutPage />
            </x:Arguments>
        </NavigationPage>
    
    
        <NavigationPage Title="Tab3">
            <NavigationPage.Icon>
                <OnPlatform x:TypeArguments="FileImageSource">
                    <On Platform="iOS" Value="tab_about.png"/>
    
                </OnPlatform>
            </NavigationPage.Icon>
            <x:Arguments>
                <views:ItemsPage />
            </x:Arguments>
        </NavigationPage>
    
    </TabbedPage.Children>
    

    You can see the Tab1. I add a view( <views:TabbedPage1 />) called TabbedPage1. Here is TabbedPage1.

     <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:TabbedDemo.Views"
            NavigationPage.HasNavigationBar="false"
             x:Class="TabbedDemo.Views.TabbedPage1">
         <!--Pages can be added as references or inline-->
         <local:Page1 />
         <local:Page2 />
     </TabbedPage>
    

    Here is my demo.

Answers

  • LeonLuLeonLu Member, Xamarin Team Xamurai
    Accepted Answer

    I write a demo about your screenshot.
    Here is a running GIF.

    First of all, you can create a TabbedPage like following code.

     <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:d="http://xamarin.com/schemas/2014/forms/design"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            mc:Ignorable="d"
    
            xmlns:views="clr-namespace:TabbedDemo.Views"
              xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
            android:TabbedPage.ToolbarPlacement="Bottom"
            x:Class="TabbedDemo.Views.MainPage">
    
    <TabbedPage.Children>
        <NavigationPage Title="Tab1">
            <NavigationPage.Icon>
                <OnPlatform x:TypeArguments="FileImageSource">
                    <On Platform="iOS" Value="tab_feed.png"/>
    
                </OnPlatform>
            </NavigationPage.Icon>
            <x:Arguments>
                <views:TabbedPage1 />
            </x:Arguments>
        </NavigationPage>
    
        <NavigationPage Title="Tab2">
            <NavigationPage.Icon>
                <OnPlatform x:TypeArguments="FileImageSource">
                    <On Platform="iOS" Value="tab_about.png"/>
    
                </OnPlatform>
            </NavigationPage.Icon>
            <x:Arguments>
                <views:AboutPage />
            </x:Arguments>
        </NavigationPage>
    
    
        <NavigationPage Title="Tab3">
            <NavigationPage.Icon>
                <OnPlatform x:TypeArguments="FileImageSource">
                    <On Platform="iOS" Value="tab_about.png"/>
    
                </OnPlatform>
            </NavigationPage.Icon>
            <x:Arguments>
                <views:ItemsPage />
            </x:Arguments>
        </NavigationPage>
    
    </TabbedPage.Children>
    

    You can see the Tab1. I add a view( <views:TabbedPage1 />) called TabbedPage1. Here is TabbedPage1.

     <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:TabbedDemo.Views"
            NavigationPage.HasNavigationBar="false"
             x:Class="TabbedDemo.Views.TabbedPage1">
         <!--Pages can be added as references or inline-->
         <local:Page1 />
         <local:Page2 />
     </TabbedPage>
    

    Here is my demo.

  • arturmullerarturmuller Member ✭✭✭

    Hi @LeonLu

    This worked great for me but when I introduced a ListView so all the space is used vertically. I see that the bottom content appears below the bottom tab and is thus not visible (cant scroll it up), do you know how to fix that?

    Thank you again

  • arturmullerarturmuller Member ✭✭✭

    Any tips regarding this?

  • igorkr_10igorkr_10 Member ✭✭✭✭
    edited April 25

    What about Shell?

  • igorkr_10igorkr_10 Member ✭✭✭✭

    @arturmuller said:
    Hi @LeonLu

    This worked great for me but when I introduced a ListView so all the space is used vertically. I see that the bottom content appears below the bottom tab and is thus not visible (cant scroll it up), do you know how to fix that?

    Thank you again

    Check https://forums.xamarin.com/discussion/comment/409865/#Comment_409865

Sign In or Register to comment.