How to bind the ItemsSource property of a nested collectionView to the item of the CollectionView in which is contained?

Question

the question might be quite confusing so I will try to clarify it, so basically I have one CollectionView inside another CollectionView, and I want to bind properties of views contained in the second CollectionView to properties of the individual object displayed by the dataTemplate of the first collectionView.

I can bind the ItemsSource of the second CollectionView to the same ObservableCollection that is binded to the first collectionView, that would give me access to the properties of each object contained in the mentioned ObservableCollection, but what I want is each dataTemplate of the second CollectionView to be binded ONLY to the object displayed by the DataTemplate of the first CollectionView in which the second CollectionView is displayed. I hope I was able to explain it correctly.

XAML Code:

<ContentPage.Resources>
        <ResourceDictionary>
            <selectors:FirstSelector x:Key="First"/>
            <selectors:SecondSelector x:Key="Second"/>
        </ResourceDictionary>
    </ContentPage.Resources>

    <renderers:GradientLayout
        ColorsList="#FFFFFF,#FFFFFF"
        Mode="ToBottomLeft"
        Padding="10,50,10,0">
        
        <ScrollView>
            <StackLayout>
                <CollectionView
                    ItemsSource="{Binding FirstList}"
                    ItemTemplate="{StaticResource First}"

                    VerticalOptions="FillAndExpand"
                    HorizontalOptions="FillAndExpand"
                    Margin="0,0,0,15">

                    <CollectionView.ItemsLayout>
                        <LinearItemsLayout
                            Orientation="Vertical"
                            ItemSpacing="15"/>
                    </CollectionView.ItemsLayout>

                    <CollectionView.Resources>

                        <DataTemplate x:Key="Normal">
                            <Grid
                                HeightRequest="400"
                                HorizontalOptions="FillAndExpand"
                                ColumnDefinitions="20*,30*,25*,25*"
                                RowDefinitions="15*,70*,15*">

                                <Frame
                                    Padding="0"
                                    HasShadow="False"
                                    BackgroundColor="Pink"
                                    CornerRadius="30"
                                    IsClippedToBounds="True"

                                    Grid.Column="0"
                                    Grid.Row="1"
                                    Grid.ColumnSpan="4">
                                    <CollectionView
                                        ItemTemplate="{StaticResource Second}"
                                        ItemsSource="{Binding Source={x:Reference home},Path=BindingContext.FirstList}"

                                        BackgroundColor="Blue"
                                        VerticalOptions="FillAndExpand"
                                        HorizontalOptions="FillAndExpand">

                                        <CollectionView.ItemsLayout>
                                            <LinearItemsLayout
                                                Orientation="Horizontal"
                                                ItemSpacing="0">
                                            </LinearItemsLayout>
                                        </CollectionView.ItemsLayout>

                                        <CollectionView.Resources>
                                            <DataTemplate x:Key="NormalTwo">
                                                <Grid
                                                    WidthRequest="392"
                                                    BackgroundColor="Orange"
                                                    ColumnDefinitions="100*"
                                                    RowDefinitions="100*"

                                                    VerticalOptions="FillAndExpand"
                                                    HorizontalOptions="FillAndExpand"
                                                    Padding="0">

                                                    <Frame
                                                        BackgroundColor="Purple"
                                                        HasShadow="False"
                                                        CornerRadius="20"

                                                        Padding="0"
                                                        Grid.Column="0"
                                                        Grid.Row="0">
                                                        <Image
                                                            Margin="-2,0,0,0"
                                                            Source="source.jpg"
                                                            Aspect="AspectFill"
                                                            HeightRequest="200">
                                                        </Image>
                                                    </Frame>
                                                </Grid>
                                            </DataTemplate>
                                        </CollectionView.Resources>
                                    </CollectionView>
                                </Frame>
                            </Grid>
                        </DataTemplate>
                    </CollectionView.Resources>
                </CollectionView>
            </StackLayout>
        </ScrollView>
    </renderers:GradientLayout>

The previous code shows a vertical collectionView with FirstList as the ItemsSource,and with a collectionView contained in it. This second CollectionView has FirstList as the ItemsSource, so it shows a horizontal list as long as the first CollectionView, and this is the problem, I just want it to access to the object of the DataTemplate in which is contained.

That is all, if you need more information I will provide it as soon as I see your request, thank you all so much for your time, have a good day.

Jack Hua Jack Hua · Accepted Answer · 2020-10-12T07:57:35

it shows a horizontal list as long as the first CollectionView, and this is the problem, I just want it to access to the object of the DataTemplate in which is contained.

To solve this problem, I think your second CollectionView's itemSource should not bind to the ObservableCollection FirstList.

If they bind to the same itemsSoure, they definitely has the same length.

I want to bind properties of views contained in the second CollectionView to properties of the individual object displayed by the dataTemplate of the first collectionView.

Then there probably should have another ObservableCollection in the BindContext which contains individual object displayed by the dataTemplate of the first collectionView. The second collectionView should bind to this ObservableCollection.

How to bind the ItemsSource property of a nested collectionView to the item of the CollectionView in which is contained?

1 Answers