在 Xamarin.Forms 中同时使用 TabBar 和 Flyout

Simultaneously use TabBar and Flyout in Xamarin.Forms

我对 Xamarin 比较陌生,因此决定尝试 Xamarin.Forms 我的第一个移动应用程序项目。但是,我在尝试同时显示 Flyout 和 TabBar 时遇到了问题。所以我在这里问,如果,首先可以吗?

我想达到的效果是这样的:

谢谢。

来自 AppShell.xaml 的代码片段:

<TabBar>
    <ShellContent Title="Trainer" Icon="icon_workstation.png" ContentTemplate="{DataTemplate local:TrainerPage}" />
    <ShellContent Title="Reference" Icon="icon_resource.png" ContentTemplate="{DataTemplate local:ReferencePage}" />
</TabBar>

<FlyoutItem Title="PC Assembly" Icon="icon_wrench.png">
    <ShellContent ContentTemplate="{DataTemplate local:AssemblyPage}" />
</FlyoutItem>
<FlyoutItem Title="Ethernet Wiring" Icon="icon_ethernet.png">
    <ShellContent ContentTemplate="{DataTemplate local:EthernetWiringPage}" />
</FlyoutItem>
<FlyoutItem Title="OS Installer Maker" Icon="icon_usb.png">
    <ShellContent ContentTemplate="{DataTemplate local:InstallerMakerPage}" />
</FlyoutItem>
<FlyoutItem Title="Windows Installation" Icon="icon_os.png">
    <ShellContent ContentTemplate="{DataTemplate local:WindowsInstallPage}" />
</FlyoutItem>
<FlyoutItem Title="Windows (DHCP) Configuration" Icon="icon_settings.png">
    <ShellContent ContentTemplate="{DataTemplate local:WindowsConfigurationPage}" />
</FlyoutItem>

训练器(TabBar)页面:

参考(TabBar)页面:

有人在另一个平台上回答了我同样的问题,我觉得最好在这里分享一下。

我能够通过使用以下代码片段实现我想要做的事情:

<FlyoutItem Title="About" Icon="icon_about.png">
    <Tab Title="item_1">
        <ShellContent Route="AboutPage" ContentTemplate="{DataTemplate local:page_1}" />
    </Tab>
    <Tab Title="item_2">
        <ShellContent Route="AboutPage" ContentTemplate="{DataTemplate local:page_2}" />
    </Tab>
</FlyoutItem>
<FlyoutItem Title="Browse" Icon="icon_feed.png">
    <ShellContent Title="page_1" Route="ItemsPage" ContentTemplate="{DataTemplate local:ItemsPage}" />
</FlyoutItem>

我取得的成果演示: