Binding problem with TabView DataTemplates

Darren 1

I am trying to create a tabbed view of collection view lists with all VM bindings. That way tabs and their lists (based on a state) can added in data if more states are setup.

Here is a light version of the XAML

    <StackLayout>
        <xct:TabView TabItemsSource="{Binding Tabs}">

            <xct:TabView.TabViewItemDataTemplate>
                <DataTemplate>
                    <StackLayout><Label Text="{Binding TabTitle}" /></StackLayout>
                </DataTemplate>
            </xct:TabView.TabViewItemDataTemplate>

            <xct:TabView.Behaviors>
                <xct:EventToCommandBehavior
                    Command="{Binding TabChangedCommand}"
                    EventName="SelectionChanged" />
            </xct:TabView.Behaviors>

            <xct:TabView.TabContentDataTemplate>
                <DataTemplate>
                    <!--  binding context is the TabHeader in Tabs  -->
                    <CollectionView ItemsSource="{Binding Orders}">
                        <CollectionView.ItemTemplate>
                            <DataTemplate>
                                <StackLayout><Label Text="{Binding CustomerName}" /></StackLayout>
                            </DataTemplate>
                        </CollectionView.ItemTemplate>
                    </CollectionView>

                </DataTemplate>
            </xct:TabView.TabContentDataTemplate>

        </xct:TabView>
    </StackLayout>

I have a test project on Github if anyone wants to get a better understanding https://github.com/lywyn/TabTest.

The problem with data binding is that the CollectionView ItemsSource="{Binding Orders}" is binding to the TabHeader object in the collection used to bind the tabs to data collection TabView TabItemsSource="{Binding Tabs}". Should I move the collection view outside of the tabs and have one collection view for all tabs (sks states) or is there a way to bind the collection view to a data source in the view model for the page.

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 29,381 Microsoft Vendor

I'm afraid I mistake what you mean, you don't want Orders to be a property of class TabHeader and you want to new a view to display the CollectionView? Like this:
MainPage.xaml

   <xct:TabView.TabContentDataTemplate>
        <DataTemplate>
            <a:ContentBottomView></a:ContentBottomView>
            <!--  binding context is the TabHeader in Tabs  -->
            <!--  need to bind the refreshview and collectionview to the VM properties  -->
        </DataTemplate>
    </xct:TabView.TabContentDataTemplate>

a new ContentView

 <?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TabTest.ContentBottomView">
  <ContentView.Content>
      <StackLayout>
            <CollectionView 
                            EmptyView="No orders!" 
                            ItemsSource="{Binding Orders}">
            </CollectionView>
        </StackLayout>
  </ContentView.Content>
</ContentView>

public partial class ContentBottomView : ContentView
    {
        public ObservableCollection<Order> Orders { get; set; }
        public ContentBottomView()
        {
            InitializeComponent();
            BindingContext = this;
        }
    }

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 29,381 Reputation points Microsoft Vendor

2021-09-03T09:05:50.087+00:00

In this way, there are three CollectionView in the MainPage. Do you want to use only one CollectionView ? I think there is no problem to use three CollectionView. You could pass value from MainPage to the new ContentView and bind data.

Share via

Binding problem with TabView DataTemplates