[SOLVED] Xamarin Form Shell: Flyout v/s TabBar

Xamarin Form Shell: Flyout v/s TabBar

I'm confused by reading the sentence

TabBar disables the Flyout

in the Xamarin documentation. But even the sample code shows TabBar in Flyout layout. I guess, I misunderstood the Flyout and TabBar (my idea is as per attached). Anyone kindly visualize the difference. Google search didn't give much on the TabBar, it just shows the standard documentation.

Solution

It means if you use only Tabbar as a root element for your Shell, you will loose the Flyout, but if your root element is a FlyoutItem then you may benefit from both as in the picture you have shown.

From another side, you cannot explicitly nest a FlyoutItem inside of a Tabbar or the opposite.

When using a you can still define (Tabbar) bottom tabs but not explicitly:

    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent Title="First"
                      ContentTemplate="{DataTemplate local:Page1}"/>

        <ShellContent Title="Seconde"
                      ContentTemplate="{DataTemplate local:Page2}"/>
    </FlyoutItem>

In this example Page1 and Page2 will be displayed as bottom tabs AND as flyout items.

If for some reasons you want to display a page only as a bottom tab (hide it in the flyout), then you can set FlyoutItemIsVisible="False" on it ShellContent:

    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent Title="First"
                      ContentTemplate="{DataTemplate local:Page1}"/>

        <ShellContent Title="Seconde" FlyoutItemIsVisible="False"
                      ContentTemplate="{DataTemplate local:Page2}"/>
    </FlyoutItem>

EDIT

Example of bottom and top tabs with flyout generated without the explicit Tabbar element

    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
<Tab Title="1st Bottom Tab">
        <ShellContent Title="1st Top tab"
                      ContentTemplate="{DataTemplate local:Page1}"/>

        <ShellContent Title="Seconde" FlyoutItemIsVisible="False"
                      ContentTemplate="{DataTemplate local:Page2}"/>
</Tab>

<Tab Title="2nd Bottom Tab">
        <ShellContent Title="First"
                      ContentTemplate="{DataTemplate local:Page1}"/>

        <ShellContent Title="Seconde" FlyoutItemIsVisible="False"
                      ContentTemplate="{DataTemplate local:Page2}"/>
</Tab>
    </FlyoutItem>

Conclusion

If you want a flyout (independently whether it is in addition to tabs wither top or bottom or both) go with a FlyoutItem as a root Element (no need for Tabbar).
if you don't want a flyout go with Tabbar as a root element.