Forum› Xamarin.Forms

Shell with Bottom Tabs and Flyout MenuItems

RedRaRedRa Member ✭✭✭
in Xamarin.Forms

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 ?

Tagged:

Best Answer

Answers

  • YelinzhYelinzh 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 ?

  • YelinzhYelinzh 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 2019

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

  • YelinzhYelinzh 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 ?!

  • YelinzhYelinzh 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 ... :(

  • ThamaraiThamarai Member ✭✭

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

    Unfortunately it does not work. My version is 4.8.0.15. When tried, bottom tabbar objects are replaced with Flyout objects.

    The following pic has a set of objects in bottom Tabbar using around all pages in application.

    The following pic has a set of objects in Flyout considering as side menu for the application.

    ****Note:**** Both Tabbar and Flyout are having different objects.

    Now, when I click on an object in Flyout, objects in bottom Tabbar are replaced with Flyout objects. Please see the below pic,

    I couldn't find the reason.

Sign In or Register to comment.