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

Question

How to add items of type ShellContent dynamically with data binding considering the MVVM pattern. I want to bind a last of TabViewModels to the Tab.Items collection. NOT codebehind which I can not test.

Instead of the 6 ShellContent objects I want to bind any number during runtime.

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

You can add property x:Name="myTab" for your Tab and use function void Add(T item); to add child item into your Tab.For example:

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

Then add ShellContent in your code behind like this:

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

If you want to change the property of ShellContent(e.g. the Title), you can use following code:

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

myTab.Items.Add(shellContent);

Update

For ShellContent.BindingContext , you can refer to this issue:https://github.com/xamarin/Xamarin.Forms/issues/6444

This bug has already been fixed,so we need to update Xamarin Form to the latest version.

The sample code is:

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