如何使用 Shell 在 Xamarin Forms 4.8 版本的弹出菜单和底部标签栏中定义不同的项目? [英] How to define different items in Flyout menu and bottom tabbar in Xamarin Forms 4.8 version using Shell?

问题描述

我正在开发一个 Xamarin Forms 4.8 版本的应用程序，它带有侧边菜单(Flyout)和底部 Tabbar 使用 Shell 功能.我的侧边菜单有 4 个项目，底部的 Tabbar 有 5 个项目.两者都有不同的项目.底部 Tabbar 有这样 5 个项目总是需要出现在我的应用程序周围.当我单击菜单内的任何项目时，底部的 Tabbar 项目将替换为侧边菜单项目.我不知道为什么.

I am developing an application in Xamarin Forms 4.8 version with both side menu(Flyout) and bottom Tabbar using Shell feature. My sidemenu has 4 items and the bottom Tabbar has 5 items. Both are having different items. The bottom Tabbar with such 5 items are always needs to be present around my application. When I click on any item inside the menu, the bottom Tabbar items are replaced with side menu items. I don't know why.

我的 AppShell.xaml 页面如下所示，

My AppShell.xaml page is shown below,

<Shell xmlns="http://xamarin.com/schemas/2014/forms" 
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:local="clr-namespace:MyApp.Views"
        xmlns:localHome="clr-namespace:MyApp.Views.Home"
        xmlns:localOnlineStore="clr-namespace:MyApp.Views.OnlineStores"
        xmlns:localBooks="clr-namespace:MyApp.Views.BookList"
        xmlns:localUniforms="clr-namespace:MyApp.Views.Uniforms"
        xmlns:localUser="clr-namespace:MyApp.Views.User"
        xmlns:localMyAccount="clr-namespace:MyApp.Views.MyAccount"
        xmlns:localCart="clr-namespace:MyApp.Views.Cart"
        xmlns:flyouthead="clr-namespace:MyApp"
        xmlns:controls="clr-namespace:MyApp.Renderer;assembly=MyApp"
        Title="MyApp"
        x:Class="MyApp.AppShell"   
        FlyoutBehavior="Flyout"
        FlyoutHeaderBehavior="Fixed"
        FlyoutBackgroundColor="#011948">           
    
        <Shell.Resources>
            <ResourceDictionary>
                <Color x:Key="NavigationPrimary">#011948</Color>
                ...
                ...
            </ResourceDictionary>
         </Shell.Resources>    
    
         <Shell.FlyoutHeader> ... </Shell.FlyoutHeader> 
         <Shell.ItemTemplate> ... </Shell.ItemTemplate>
         <Shell.MenuItemTemplate> ... </Shell.MenuItemTemplate>
    
    
        <TabBar>
           <Tab Title="Home"
                Icon="ic_home">
                <ShellContent Route="HomePage" Shell.TabBarBackgroundColor="{StaticResource NavigationPrimary}" ContentTemplate="{DataTemplate localHome:HomePage}" />
           </Tab>
           <Tab Title="Books"
                Icon="ic_book">
                <ShellContent Route="ItemsPage" ContentTemplate="{DataTemplate local:ItemsPage}" />
            </Tab>
            <Tab Title="Cart"
                Icon="ic_cart">
                <ShellContent Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />
            </Tab>
            <Tab Title="Uniforms"
                Icon="ic_uniform">
                <ShellContent Route="UniformsPage" ContentTemplate="{DataTemplate localUniforms:UniformsPage}" />
            </Tab>
            <Tab Title="Profile"
                Icon="ic_profile">
                <ShellContent Route="MyProfilePage" ContentTemplate="{DataTemplate localMyAccount:MyProfilePage}" />
             </Tab>
      </TabBar>    
    
    
      <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">         
          <ShellContent Title="Online Store" Icon="ic_online_store" ContentTemplate="{DataTemplate localOnlineStore:OnlineStorePage}" />
          <ShellContent Title="About Us" Icon="ic_about_us" ContentTemplate="{DataTemplate localHome:AboutUsPage}" />
          <ShellContent Title="Contact Us" Icon="ic_contact_us" ContentTemplate="{DataTemplate localHome:ContactUsPage}" />
          <ShellContent Title="Sign In" Icon="ic_login" Route="LoginPage" ContentTemplate="{DataTemplate localUser:LoginPage}" />
       </FlyoutItem>    
    
 </Shell>

当我在 Android Emulator 中运行时，我的底部标签栏如下图所示

When I run in Android Emulator, my bottom tabbar looks like in the image below

和Flyout中的侧边菜单如下

and side menu in Flyout as below

当我点击菜单内的项目时，页面呈现如下

When I click on items inside the menu, the page is rendered as follows

在这里，底部的 Tabbar 项被侧边菜单项替换.

Here, the bottom Tabbar items are replaced with side menu items.

推荐答案

如果要在弹出窗口和底部显示一个或多个项目，可以使用 FlyoutItem.

If you want to display one or more items in the flyout and bottom, you can use a FlyoutItem.

 <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
    <ShellContent Title="About" Icon="tab_about.png" Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />
    <ShellContent Title="Browse" Icon="tab_feed.png" ContentTemplate="{DataTemplate local:ItemsPage}" />
</FlyoutItem>

如果你只想在底部显示项目，不想在弹出框显示项目，你只需要使用TabBar就可以了，

If you just want to display items in the bottom, don't want to display items in the flyout, you just need to use TabBar to do this,

<TabBar>
    <Tab Title="About" Icon="tab_about.png">
        <ShellContent>
            <views:AboutPage />
        </ShellContent>
    </Tab>
    <Tab Title="Browse" Icon="tab_feed.png">
        <ShellContent>
            <views:ItemsPage />
        </ShellContent>
    </Tab>
</TabBar>

只需选择 FlayoutItem 或 TabBar，不需要同时使用它们.

Just choose FlayoutItem or TabBar, don't need to use both of them.

有关壳牌的更多详细信息，请查看:

For more detailed info about Shell, please take a look:

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/create

更新:

 <MenuItem
    Clicked="OnMenuItemClicked"
    StyleClass="MenuItemLayoutStyle"
    Text="Logout" />


 private async void OnMenuItemClicked(object sender, EventArgs e)
    {
        await Shell.Current.GoToAsync("//LoginPage");
    }

这篇关于如何使用 Shell 在 Xamarin Forms 4.8 版本的弹出菜单和底部标签栏中定义不同的项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！