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

Question

考虑到 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>

Answer 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>

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

How to bind a list of Tab.Items of type<ShellContent> dynamically AND within XAML with xamarin.forms-shell

xamarin.forms

xamarin.forms.shell