在 Xamarin.Forms 中同时使用 TabBar 和 Flyout
Simultaneously use TabBar and Flyout in Xamarin.Forms
我对 Xamarin 比较陌生,因此决定尝试 Xamarin.Forms 我的第一个移动应用程序项目。但是,我在尝试同时显示 Flyout 和 TabBar 时遇到了问题。所以我在这里问,如果,首先可以吗?
我想达到的效果是这样的:
- 我有两个 TabBar 页面,“Trainer”和“Reference”
- 我希望“培训师”页面(且仅此页面)在激活时有一个弹出菜单(左上角的汉堡按钮)。这是因为此页面中有子页面,如“Assembly”、“Ethernet”等...
- 然后将从 Flyout 中选择的条目加载到 Trainer 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>
我取得的成果演示:
我对 Xamarin 比较陌生,因此决定尝试 Xamarin.Forms 我的第一个移动应用程序项目。但是,我在尝试同时显示 Flyout 和 TabBar 时遇到了问题。所以我在这里问,如果,首先可以吗?
我想达到的效果是这样的:
- 我有两个 TabBar 页面,“Trainer”和“Reference”
- 我希望“培训师”页面(且仅此页面)在激活时有一个弹出菜单(左上角的汉堡按钮)。这是因为此页面中有子页面,如“Assembly”、“Ethernet”等...
- 然后将从 Flyout 中选择的条目加载到 Trainer 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>
我取得的成果演示: