How to define different items in Flyout menu and bottom tabbar in Xamarin Forms 4.8 version using Shell?

问题

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 bottom tabbar has 5 items. Both are having different items. Bottom tabbar with such 5 items are always need to be present around my application. When I click any item in side menu, the bottom tabbar items are replaced with side menu items. I don't know why.

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>

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

and side menu in Flyout as below

When I click on items in side menu, page is rendered like as follows

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

回答1:

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

 <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>

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>

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

More detailed info about shell, please take a look:

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

Update:

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


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

来源：https://stackoverflow.com/questions/65085818/how-to-define-different-items-in-flyout-menu-and-bottom-tabbar-in-xamarin-forms