使用 Xamarin.Forms Shell 将选项卡移动到底部

Question

我正在尝试将我的 Xamarin.Forms 应用从带有 Menu 和 TabPage 的 MasterDetailPage 转换为新的 Xamarin.Forms Shell。

我正在尝试将标签移到底部。我还希望它们看起来与 TabPage 相同。使用基本的 Shell XAML 布局可以实现此事件吗？

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>

我发现的另一种方法是从 FlyoutItem 调用 TabPage。选项卡正确显示在底部。然而，我最终在顶部有一个丑陋的差距。

<?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 应用中的 Tab 会与 Tabbed Page 的 tab 不同。

Tab and ShellContent 在 Shell Application 中定义如下。

• Tab，表示分组内容，可通过底部标签导航。每个Tab 对象都是FlyoutItem 对象或TabBar 对象的子对象。
• ShellContent，代表应用程序中的ContentPage 对象。每个ShellContent 对象都是 Tab 对象的子对象。当Tab 中存在多个ShellContent 对象时，这些对象将可以通过顶部选项卡进行导航。

因此，您可以在此处修改共享代码进行如下尝试：

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