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

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

此错误已经修复，因此我们需要Xamarin Form更新到最新版本。

示例代码为：

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