Xamarin.Forms Shell 在后面的代码中生成一个 Top Tapped Page

Question

提前感谢您的帮助。我现在正在开发一个 Forms Shell 应用程序。我的 UI 在很多方面都是数据驱动的，而我想要完成的是一个页面，该页面根据其拥有的模型在 tob 上显示多个选项卡。

换句话说，我尝试完成与 Shells Demo 应用程序相同的布局：

<FlyoutItem Route="animals"
            Title="Animals"
            FlyoutDisplayOptions="AsSingleItem">
    <Tab Title="Domestic"
         Route="domestic"
         Icon="paw.png">
        <ShellContent Route="cats"
                      Style="{StaticResource DomesticShell}"
                      Title="Cats"
                      Icon="cat.png"
                      ContentTemplate="{DataTemplate views:CatsPage}" />
        <ShellContent Route="dogs"
                      Style="{StaticResource DomesticShell}"
                      Title="Dogs"
                      Icon="dog.png"
                      ContentTemplate="{DataTemplate views:DogsPage}" />
    </Tab>
</FlyoutItem>

但从 FlyoutMenu 中的现有链接开始。就像上面的“国内”选项卡的级别，当导航到创建两个或更多外壳顶部点击页面时。

我知道我可以使用 TappedPage 作为 ShellContent，但是 TappedPages 的样式有点不同我想知道我是否可以使用“本机”Shell 功能来实现这一点。

我已经尝试过类似的方法：

ShellSection tab1 = new ShellSection
{
Title = "Tab1"
};
tab1.Items.Add(new ShellContent() { Title = "Test1", Content = new ContentPage() { Title = "Test1" } });
tab1.Items.Add(new ShellContent() { Title = "Test2", Content = new ContentPage() { Title = "Test2" } });
var current = AppShell.Current.CurrentItem;
current.Items.Add(tab1);

但这也在底部标签栏和弹出菜单中添加了另一个条目，这是我不想要的。

为了更清楚，我尝试用样机截图来解释它。

假设我们有以下弹出菜单，其中国内条目。

这个国内入口指向一个页面，该页面的视图模型提供了应在选项卡中显示的数据集合。

如您所见，此页面在标题视图中提供了一个链接，该链接打开一个弹出窗口以更改所选元素，并应刷新/更改显示的数据，例如具有三个选项卡。

我希望现在更清楚了。

编辑：

到目前为止，cmets 让我更进一步。通过以下代码，我完成了获得所需的顶部选项卡。

        var current = AppShell.Current.CurrentItem;
        var currentSection = current.CurrentItem;

        //currentSection.Items.Clear();
        currentSection.Items.Add(new CatsPage() { Title = "Tab1"} ); ;
        currentSection.Items.Add(new ShellContent() { Title = "Tab2", Content = new CatsPage() });

但它仍然不完美 - 在添加的页面中，底部标签栏是隐藏的，有什么解决方案吗？

有人给点建议吗？

Answer 1

此解决方案还包括在代码中使用 ContentTemplate：

AppShell.xaml

<?xml version="1.0" encoding="utf-8"?>
<Shell
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="Namespace.To.AppShell.xaml.cs"
    FlyoutBehavior="True" />

AppShell.xaml.cs

public AppShell()
{
    this.InitializeComponent();

    var flyoutTabOne = new Tab()
    {
        Items =
        {
            new ShellContent
            {
                ContentTemplate = new DataTemplate(() => new YourPage()),
                Route = "Route.To.Your.Page",
                Title = "Your page title",
            },
        },
        Route = "Route.To.Your.Tab.One",
        Title = "Tab one title",
    };

    var flyoutItem = new FlyoutItem();
    flyoutItem.Items.Add(flyoutTabOne);

    this.Items.Add(flyoutItem);
}

ContentTemplate 的使用对于延迟加载所有选项卡很重要。因此，我强烈建议尽可能使用 ContentTemplate ，因为在开始的问题（在 xaml 中）已经是这种情况。如果您对 ContentTemplate 的更多信息感兴趣，请阅读此文档：https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/tabs#efficient-page-loading

Answer 2

你的意思是你想通过后面的代码实现与 Shell 演示应用程序相同的结构吗？

如果是，你可以试试这个：

在 AppShell.xaml.cs 中：

public AppShell()
    {
        InitializeComponent();
        FlyoutItem shellItem = new FlyoutItem() { Title = "Tab1" };
        Tab tab = new Tab();
        tab.Items.Add(new ShellContent() { Title = "Test1", Content = new Page1()});
        tab.Items.Add(new ShellContent() { Title = "Test2", Content = new Page2()});
        shellItem.Items.Add(tab);
        this.Items.Add(shellItem);
    }

AppShell.xaml ：

<?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:d="http://xamarin.com/schemas/2014/forms/design"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable="d"
   xmlns:local="clr-namespace:ShellDemo.Views"
   Title="ShellDemo"
   x:Class="ShellDemo.AppShell">

</Shell>

page1.xaml：

<ContentPage ...>
    <Shell.TitleView>
      <Button Text="change" Clicked="Button_Clicked"></Button>
    </Shell.TitleView>
     ...
</ContentPage>

在 page1.xaml.cs 中：

private void Button_Clicked(object sender, EventArgs e)
    {
        Tab tab = new Tab();
        tab.Items.Add(new ShellContent() { Title = "Test3", Content = new ContentPage() { Title = "Test3" } });
        tab.Items.Add(new ShellContent() { Title = "Test4", Content = new ContentPage() { Title = "Test4" } });
        AppShell.Current.CurrentItem.Items.Clear();
        AppShell.Current.CurrentItem.Items.Add(tab);
    }

更新1：

从你上面的草图来看，你想在点击titleview()中的链接后改变TabbedPage的内容吗？

效果如下（你应该在每个页面中添加shell titleview，这里使用按钮而不是链接）：

Update 1您只需要更改标签的内容：

 private void Button_Clicked(object sender, EventArgs e)
    {
        Tab tab = (Tab)AppShell.Current.CurrentItem.CurrentItem;
        tab.Items.Clear();
        tab.Items.Add(new ShellContent() { Title = "Test3", Content = new ContentPage() { Title = "Test3" } });
        tab.Items.Add(new ShellContent() { Title = "Test4", Content = new ContentPage() { Title = "Test4" } });

    }

更新 2：

我下载你的项目并测试一下。它实际上并没有隐藏底部Tab，你可以点击底部Tab看到它存在，但它没有背景颜色，所以你只需给它Style 添加ShellContent 时在Shell.Resources 中定义的@

 var current = AppShell.Current.CurrentItem;
 var currentSection = current.CurrentItem;
 currentSection.Items.Add(new ShellContent() { Title = "Test3", Content = new CatsPage(),Style = (Style)AppShell.Current.Resources["BearsShell"] }); ;
 currentSection.Items.Add(new ShellContent() { Title = "Test4", Content = new CatsPage(), Style = (Style)AppShell.Current.Resources["BearsShell"] });