0

我正在尝试将我的 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>
4

1 回答 1

0

您不能使用Tab样式来定义FlyoutItem. Shell 应用程序中的选项卡将与 的选项卡不同Tabbed Page。

在Shell ApplicationTab中ShellContent定义如下。

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

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

<?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>
于 2020-04-08T03:08:23.793 回答