如何使用 xamarin.forms-shell 在 XAML 中动态绑定类型为 <ShellContent> 的 Tab.Items 列表

Posted 2023-03-12

【中文标题】如何使用 xamarin.forms-shell 在 XAML 中动态绑定类型为 <ShellContent> 的 Tab.Items 列表

【英文标题】：How to bind a list of Tab.Items of type<ShellContent> dynamically AND within XAML with xamarin.forms-shell

【发布时间】：2019-12-31 23:57:21

【问题描述】：

考虑到 MVVM 模式，如何使用数据绑定动态添加 ShellContent 类型的项目。我想将最后一个 TabViewModels 绑定到 Tab.Items 集合。不是我无法测试的代码隐藏。

我想在运行时绑定任意数量的而不是 6 个 ShellContent 对象。

MainPage.xaml

<FlyoutItem Route="animals"
                Title="Animals"
                FlyoutDisplayOptions="AsSingleItem">
        <Tab Title="Domestic"
             Route="domestic"
             Icon="paw.png">

            <Tab.Items>

                <ShellContent Route="cats"
                          Style="StaticResource DomesticShell"
                          Title="sisi"
                          Icon="cat.png"
                          ContentTemplate="DataTemplate views:CatsPage" />
                <ShellContent Route="dogs"
                          Style="StaticResource DomesticShell"
                          Title="Dogs"
                          Icon="dog.png"
                          ContentTemplate="DataTemplate views:DogsPage" />
                <ShellContent Route="dogs"
                          Style="StaticResource DomesticShell"
                          Title="Dogs"
                          Icon="dog.png"
                          ContentTemplate="DataTemplate views:DogsPage" />
                <ShellContent Route="dogs"
                          Style="StaticResource DomesticShell"
                          Title="Dogs"
                          Icon="dog.png"
                          ContentTemplate="DataTemplate views:DogsPage" />
                <ShellContent Route="dogs"
                          Style="StaticResource DomesticShell"
                          Title="Dogs"
                          Icon="dog.png"
                          ContentTemplate="DataTemplate views:DogsPage" />
                <ShellContent Route="dogs"
                          Style="StaticResource DomesticShell"
                          Title="Dogs"
                          Icon="dog.png"
                          ContentTemplate="DataTemplate views:DogsPage" />
            </Tab.Items>


        </Tab>
</FlyoutItem>

【参考方案1】：

您可以为您的Tab 添加属性x:Name="myTab" 并使用函数void Add(T item); 将子项添加到您的Tab。例如：

   <FlyoutItem Route="animals" x:Name="mFlyoutItem"
                Title="Animals"
                FlyoutDisplayOptions="AsMultipleItems">
        <Tab Title="Domes.123"
             Route="domestic"
             x:Name="myTab"
             Icon="paw.png">
            <Tab.Items>
            <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.Items>
        </Tab>
   </FlyoutItem>

然后在你的代码后面添加ShellContent，如下所示：

 myTab.Items.Add(new DogsPage());

如果你想改变ShellContent的属性（例如Title），你可以使用下面的代码：

ShellContent shellContent = new ShellContent();
shellContent.Content = new DogsPage();
shellContent.Title = "testTitle";

myTab.Items.Add(shellContent);

更新

ShellContent.BindingContext，可以参考这个问题：https://github.com/xamarin/Xamarin.Forms/issues/6444

这个bug已经修复了，所以我们需要更新Xamarin Form到最新版本。

示例代码为：

  <TabBar>
    <Tab >
        <ShellContent >
            <ShellContent.ContentTemplate>
                <DataTemplate>
                    <local:Page1 BindingContext="Binding Page1VM"/>
                </DataTemplate>
            </ShellContent.ContentTemplate>
        </ShellContent>
    </Tab>
</TabBar>

【讨论】：

看来我应该更清楚。因此，我改写了我的标题/问题。

@Pascal 我已经更新了答案，你可以检查一下。

我假设 Page1VM 不是保存 tabviewmodels 的 Items 集合，对吧？因为那样它对我来说毫无用处。