Forum Xamarin.Forms

How to nest Tab views in Xamarin.Forms

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.

Sign In or Register to comment.