Move tabs to bottom with Xamarin.Forms Shell

Question

I'm trying to convert my Xamarin.Forms app from a MasterDetailPage with Menu and TabPage to the new Xamarin.Forms Shell.

I'm trying to move the tabs to the bottom. I also want them to look the same as the TabPage ones. Is this event possible with the basic Shell XAML layout?

AppShell.xaml:

<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-MyApp.Views"
       xmlns:volDash="clr-MyApp.Views.VolDash"
       x:Class="MyApp.AppShell">
    <FlyoutItem Title="Dashboard 1" FlyoutDisplayOptions="AsSingleItem">
        <Tab>
            <ShellContent Title="Signups" Icon="ic_assignment.png">
                <volDash:SignupsPage />
            </ShellContent>
            <ShellContent Title="Events" Icon="ic_event.png">
                <volDash:AreasPage />
            </ShellContent>
            <ShellContent Title="Mailbox" Icon="ic_mail_outline.png">
                <volDash:MailboxPage />
            </ShellContent>
            <ShellContent Title="Rankings" Icon="fa_trophy.png">
                <volDash:MyRankingsPage />
            </ShellContent>
            <ShellContent Title="Videos" Icon="ic_ondemand_video.png">
                <volDash:TrainingVideoCategoriesPage />
            </ShellContent>
        </Tab>
    </FlyoutItem>
    <FlyoutItem Title="Dashboard 2" FlyoutDisplayOptions="AsSingleItem">
        <Tab>
            <ShellContent Title="Tab 1" Icon="ic_assignment.png">
                <volDash:SignupsPage />
            </ShellContent>
            <ShellContent Title="Tab 2" Icon="ic_event.png">
                <volDash:AreasPage />
            </ShellContent>
        </Tab>
    </FlyoutItem>
    <ShellContent Title="Account" Icon="ic_account_box_white.png">
        <views:AccountPage />
    </ShellContent>
</Shell>

One alternative I found is to call a TabPage from the FlyoutItem. The tabs are shown properly at the bottom. However, I end up with an ugly gap at the top.

<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-MyApp.Views"
       xmlns:volDash="clr-MyApp.Views.VolDash"
       x:Class="MyApp.AppShell">
    <FlyoutItem Title="Volunteer Dashboard" FlyoutDisplayOptions="AsSingleItem">
        <ShellContent Title="Videos" Icon="ic_account_box_white.png">
            <views:VolunteerDashboardPage />
        </ShellContent>
    </FlyoutItem>
    <FlyoutItem Title="Organizer Dashboard" FlyoutDisplayOptions="AsSingleItem">
        <ShellContent Title="Videos" Icon="ic_account_box_white.png">
            <views:OrganizerDashboardPage />
        </ShellContent>
    </FlyoutItem>
    <ShellContent Title="Account" Icon="ic_account_box_white.png">
        <views:AccountPage />
    </ShellContent>
</Shell>

Junior Jiang Junior Jiang · Accepted Answer · 2020-04-08T03:08:23

You can not using Tab style to define the FlyoutItem . The Tab in Shell Apllication will be different with the tab of Tabbed Page .

The Tab and ShellContent defined as follow in Shell Application .

Tab, which represents grouped content, navigable by bottom tabs. Every Tab object is a child of a FlyoutItem object or a TabBar object.
ShellContent, which represents the ContentPage objects in your application. Every ShellContent object is a child of a Tab object. When more than one ShellContent object is present in a Tab, the objects will be navigable by top tabs.

Therefore , here you can modify shared code as follow to have a try :

<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-MyApp.Views"
       xmlns:volDash="clr-MyApp.Views.VolDash"
       x:Class="MyApp.AppShell">
    <FlyoutItem Title="Dashboard 1" FlyoutDisplayOptions="AsSingleItem">

            <ShellContent Title="Signups" Icon="ic_assignment.png">
                <volDash:SignupsPage />
            </ShellContent>
            <ShellContent Title="Events" Icon="ic_event.png">
                <volDash:AreasPage />
            </ShellContent>
            <ShellContent Title="Mailbox" Icon="ic_mail_outline.png">
                <volDash:MailboxPage />
            </ShellContent>
            <ShellContent Title="Rankings" Icon="fa_trophy.png">
                <volDash:MyRankingsPage />
            </ShellContent>
            <ShellContent Title="Videos" Icon="ic_ondemand_video.png">
                <volDash:TrainingVideoCategoriesPage />
            </ShellContent>
        
    </FlyoutItem>
    <FlyoutItem Title="Dashboard 2" FlyoutDisplayOptions="AsSingleItem">
      
            <ShellContent Title="Tab 1" Icon="ic_assignment.png">
                <volDash:SignupsPage />
            </ShellContent>
            <ShellContent Title="Tab 2" Icon="ic_event.png">
                <volDash:AreasPage />
            </ShellContent>
      
    </FlyoutItem>
    <ShellContent Title="Account" Icon="ic_account_box_white.png">
        <views:AccountPage />
    </ShellContent>
</Shell>

Move tabs to bottom with Xamarin.Forms Shell

1 Answers