Xamarin 表单 Shell：Flyout 和 TabBar - 仅隐藏 TabBar 中的项目？

Question

我正在尝试在 Xamarin Shell 中创建双重导航，其中弹出窗口有 5 个项目（Page1、Page2、Page3、Page4、Page5），而底部 TabBar 只有 3 个相同的项目（第 1 页、第 3 页、第 5 页）。

<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent Title="Page 1"
                      ContentTemplate="{DataTemplate local:Page1}"/>
        <ShellContent Title="Page 2"
                      ContentTemplate="{DataTemplate local:Page2}"/>
        <ShellContent Title="Page 3"
                      ContentTemplate="{DataTemplate local:Page3}"/>
        <ShellContent Title="Page 4"
                      ContentTemplate="{DataTemplate local:Page4}"/>
        <ShellContent Title="Page 5"
                      ContentTemplate="{DataTemplate local:Page5}"/>
</FlyoutItem>

我可以做相反的事情，我可以通过添加以下内容来隐藏弹出菜单中的项目：FlyoutItemIsVisible="False" 到 ShellContent，但没有等效项可以将项目隐藏在TabBar 但不是弹出窗口。

这在 Shell 中可行吗？

Answer 1

如果你想隐藏标签，你可以使用属性 IsVisible来隐藏你的标签。

请参考以下代码：

<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
    <ShellContent Title="Page 1"
                  IsVisible="False"
                  ContentTemplate="{DataTemplate local:Page1}"/>
    <ShellContent Title="Page 2"
                  ContentTemplate="{DataTemplate local:Page2}"/>
    <ShellContent Title="Page 3"
                  ContentTemplate="{DataTemplate local:Page3}"/>
    <ShellContent Title="Page 4"
                  ContentTemplate="{DataTemplate local:Page4}"/>
    <ShellContent Title="Page 5"
                  ContentTemplate="{DataTemplate local:Page5}"/>
</FlyoutItem>

更新：

IsVisible="False" will hide the tab AND hide it in the flyout menu. How do I hide the tab but keep the menu item in the flyout? FlyoutItemIsVisible hides the flyout menu item and keeps the tab, I need the reverse

您可以使用 MenuItem 来实现。

请参考以下代码：

<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
    <ShellContent Title="Page 1"
                  IsVisible="False"
                  ContentTemplate="{DataTemplate local:Page1}"/>
    <ShellContent Title="Page 2"
                  ContentTemplate="{DataTemplate local:Page2}"/>
    <ShellContent Title="Page 3"
                  ContentTemplate="{DataTemplate local:Page3}"/>
    <ShellContent Title="Page 4"
                  ContentTemplate="{DataTemplate local:Page4}"/>
    <!--<ShellContent Title="Page 5"
                  FlyoutItemIsVisible="False"
                  ContentTemplate="{DataTemplate local:Page5}"/>-->
</FlyoutItem>

<!--<TabBar>
    <ShellContent  Title="Page5"    Route="Page5" ContentTemplate="{DataTemplate local:Page5}" />
</TabBar>-->

<MenuItem Text="Page5" StyleClass="MenuItemLayoutStyle" Clicked="OnMenuItemPage5Clicked">
</MenuItem>

<TabBar>
    <ShellContent Route="Page5" ContentTemplate="{DataTemplate local:Page5}" />
</TabBar>

并在AppShell.xaml.cs

页面添加功能OnMenuItemPage5Clicked

    private async void OnMenuItemPage5Clicked(object sender, EventArgs e)
    {
        await Shell.Current.GoToAsync("//Page5");
    }

Xamarin 表单 Shell：Flyout 和 TabBar - 仅隐藏 TabBar 中的项目？

Xamarin Form Shell: Flyout and TabBar - Hide items in TabBar only?

shell

xamarin

tabbar

flyout