Xamarin Form Shell: Flyout v/s TabBar

Question

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.

where are you reading this? There are thousand of pages of documentation, can you please provide a link? — Jason, Feb 12 '21 at 14:03
@Jason here https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/tabs — Cfun, Feb 12 '21 at 14:07

Cfun · Accepted Answer · 2021-02-12T17:23:12.847

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.

So I was not mistaken, right ? The image I have marked is the same what Xamarin people meant. TabBar is the tabs show down, right ? — Rauf, Feb 12 '21 at 16:40
Whenever you see both a flyout and bottom tabs in the same view (providing only build in Shell component were used and not with another package) then it was done with a combinaison of FlyoutItem Tab and ShellContent) — Cfun, Feb 12 '21 at 16:47

Xamarin Form Shell: Flyout v/s TabBar

1 Answers1

Conclusion

Linked