Shell with Bottom Tabs and Flyout MenuItems

RedRaRedRa Member ✭✭✭

Hi all,

I have investigating how to apply a new Shell navigation expiriance to my application and I faced with issue
I cannot create in Flyout only with MenuItems and page switching using TabBar in one Shell

Is there a way to overcome it ?

Best Answer

Answers

  • JarvanJarvan Member, Xamarin Team Xamurai

    create in Flyout only with MenuItems and page switching using TabBar in one Shell

    It seems to be hardly to do that. MenuItems is an option feature in Flyout. When using Flyout, 'TabBar' will not work.
    Besides, Flyout contains tab and it's enough to achieve the navigation.

    <FlyoutItem 
        Title="Animals"
        FlyoutDisplayOptions="AsMultipleItems">
        <Tab Title="Domestic">
            <ShellContent 
                Title="Browse"
                Icon="tab_feed.png"
                ContentTemplate="{DataTemplate local:ItemsPage}" />
            <ShellContent 
                Title="About"
                Icon="tab_about.png"
                ContentTemplate="{DataTemplate local:AboutPage}" />
        </Tab>
        <Tab Title="Domestic_2">
            <ShellContent 
                Title="Browse"
                Icon="tab_feed.png"
                ContentTemplate="{DataTemplate local:ItemsPage}" />
            <ShellContent 
                Title="About"
                Icon="tab_about.png"
                ContentTemplate="{DataTemplate local:AboutPage}" />
        </Tab>
    </FlyoutItem>
    
  • RedRaRedRa Member ✭✭✭

    @Jarvan said:

    create in Flyout only with MenuItems and page switching using TabBar in one Shell

    It seems to be hardly to do that. MenuItems is an option feature in Flyout. When using Flyout, 'TabBar' will not work.
    Besides, Flyout contains tab and it's enough to achieve the navigation.

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

    Seems like I have not been precise, I want Flyout for MenuItem and TabBar for navigation, I do not like when Tab from FlyoutItem is duplicated in Tab

    Is there way to have FlyoutItem to be shown in main navigation, but not shown in Flyout ?

  • JarvanJarvan Member, Xamarin Team Xamurai

    Is there way to have FlyoutItem to be shown in main navigation, but not shown in Flyout ?

    I tested the code and search related document, but not found a way to do that. Set 'FlyoutDisplayOptions' of FlyoutItem to 'AsSingleItem' or as default. The item_selections in FlayoutItem and Tab are not duplicated.

  • AlbertKAlbertK MYMember ✭✭✭✭
    edited August 13

    May I know if Shell FlyoutItem and TabBar are exclusive to each other ?

  • JarvanJarvan Member, Xamarin Team Xamurai

    @RedRa
    Update the Xamarin.Forms to the newest version 4.2.709249 and you'll achieve the feature.

  • RedRaRedRa Member ✭✭✭

    @Jarvan said:
    @RedRa
    Update the Xamarin.Forms to the newest version 4.2.709249 and you'll achieve the feature.

    Okay, I have searched for updates Shell in Xamarin.Forms 4.2.709249 and have not found any mentions regarding TabBar with FlyoutItems ?!

  • JarvanJarvan Member, Xamarin Team Xamurai

    Although there is currently no clear documentation for this, you can implement the feature in code.

  • RedRaRedRa Member ✭✭✭

    @Jarvan said:
    Although there is currently no clear documentation for this, you can implement the feature in code.

    Unfortunatly it does not work

    I have tried to do the follwoing:

    <?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:pages="clr-namespace:Stuffs.Forms.Pages"
           xmlns:ffimageloadingsvg="clr-namespace:FFImageLoading.Svg.Forms;assembly=FFImageLoading.Svg.Forms"
           x:Class="Stuffs.Forms.Shells.MainShell">
    
        <Shell.FlyoutHeader>
            <!-- Some layout -->
        </Shell.FlyoutHeader>
    
        <TabBar>
            <ShellContent
                Title="Tab0"
                ContentTemplate="{DataTemplate pages:Page0}" />
            <ShellContent
                Title="Tab1"
                ContentTemplate="{DataTemplate pages:Page1}" />
        </TabBar>
    
        <MenuItem
            Text="Help"
            Command="{Binding HelpCommand}"
            CommandParameter="https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell" />
    
    </Shell>
    

    And MenuItem is not shown ... :(

Sign In or Register to comment.