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

Question

我正在尝试将我的 Xamarin.Forms 应用程序从带有菜单和 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应用程序中的标签将与Tabbed Page中的标签不同。

Tab and ShellContent在Shell申请中定义如下。

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>

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

Move tabs to bottom with Xamarin.Forms Shell

xamarin.forms

xamarin.forms.shell