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

问题描述

我对阅读

解决方案

这意味着如果你只使用 Tabbar 作为你的 Shell 的根元素，你将失去 Flyout，但是如果您的根元素是 FlyoutItem，那么您可能会像您显示的图片一样从两者中受益.

从另一方面来说，您不能将 FlyoutItem 明确地嵌套在 Tabbar 或相反的内容中.

使用 a 时，您仍然可以定义 (Tabbar) 底部标签，但不能明确定义:

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

在本例中，Page1 和 Page2 将显示为底部标签和浮出控件.

如果由于某些原因您只想将页面显示为底部选项卡(将其隐藏在弹出窗口中)，那么您可以在其上设置 FlyoutItemIsVisible=False" ShellContent:

 <ShellContent Title=第一"ContentTemplate="{DataTemplate local:Page1}"/><ShellContent Title="Seconde";FlyoutItemIsVisible=假"ContentTemplate="{DataTemplate local:Page2}"/></FlyoutItem>

编辑

在没有显式 Tabbar 元素的情况下生成的带有弹出按钮的底部和顶部选项卡示例

 <标签标题=第一个底部标签"><ShellContent Title=第一个顶部标签"ContentTemplate="{DataTemplate local:Page1}"/><ShellContent Title="Seconde";FlyoutItemIsVisible=假"ContentTemplate="{DataTemplate local:Page2}"/></Tab><标签标题=第二个底部标签"><ShellContent Title=第一"ContentTemplate="{DataTemplate local:Page1}"/><ShellContent Title="Seconde";FlyoutItemIsVisible=假"ContentTemplate="{DataTemplate local:Page2}"/></Tab></FlyoutItem>

结论

• 如果您想要一个浮出控件(无论是顶部还是底部的选项卡或两者兼而有之)，请将 FlyoutItem 作为根元素(不需要 Tabbar).

• 如果您不想要弹出窗口，请使用 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.

解决方案

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.

这篇关于Xamarin Form Shell:Flyout v/s TabBar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！