Переместите вкладки вниз с помощью Xamarin.Forms Shell

Question

Я пытаюсь преобразовать мое приложение Xamarin.Forms из MasterDetailPage с Menu и TabPage в новую оболочку Xamarin.Forms.

Я пытаюсь переместить вкладки в нижнюю часть. Я также хочу, чтобы они выглядели так же, как TabPage. Возможно ли это событие с помощью базового XAML-макета Shell c?

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>

Одна альтернатива, которую я нашел, это вызвать TabPage из FlyoutItem. Вкладки отображаются правильно внизу. Тем не менее, я в конечном итоге с ужасным разрывом наверху.

<?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>

Answer 1

Вы не можете использовать стиль Tab для определения FlyoutItem. Вкладка в Shell Shell будет отличаться от вкладки Tabbed Page.

Tab и ShellContent, определенные следующим образом в Оболочка Приложение.

• Вкладка , который представляет сгруппированный контент, с возможностью навигации по нижним вкладкам. Каждый Tab объект является дочерним для FlyoutItem объекта или TabBar объекта.
• ShellContent , который представляет ContentPage объекты в вашем приложении. Каждый ShellContent объект является дочерним по отношению к объекту Tab. Когда в Tab присутствует более одного ShellContent объекта, объекты будут доступны для навигации по верхним вкладкам.

Поэтому здесь вы можете изменить общий код следующим образом, чтобы попробовать:

        <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>