CollectionView 内的 CollectionView 未正确绑定 ItemsSource 属性（XamarinForms）答案

【问题标题】：CollectionView inside CollectionView doesn't bind ItemsSource property correctly (XamarinForms)CollectionView 内的 CollectionView 未正确绑定 ItemsSource 属性（XamarinForms）
【发布时间】：2021-03-12 07:07:08
【问题描述】：

我试图将一个 collectionView 嵌套在另一个中，但是在绑定嵌套的 ItemsSource 属性时遇到了麻烦，即使我创建 ObservableCollection 并将其绑定到 ItemsSource 属性的方法是两个collectionViews 相同。知道我做错了什么吗？

XAML 代码：

    <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 SecondList}"

                                        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>

ViewModel 代码：

    public class HomeViewModel : FreshBasePageModel
    {
        public static ObservableCollection<OneForAllModel> firstlist;
        public ObservableCollection<OneForAllModel> FirstList
        {
            get
            {
                return pictureList;
            }
            set
            {
                pictureList = value;
            }
        }

        public ObservableCollection<PictureModel> secondlist;
        public ObservableCollection<PictureModel> SecondList
        {
            get
            {
                return secondcollectionlist;
            }
            set
            {
                secondcollectionlist = value;
            }
        }

        public HomeViewModel(InavigationService _navigation, IDatabaseApiHelper _DataBaseApi)
        {
            Navigation = _navigation;
            DataBaseApi = _DataBaseApi;

            //Creates a provisional list necessary to show the skeleton loading UI effect
            OneForAllModel loadingPicture = new OneForAllModel()
            {
                //content
            };

            ObservableCollection<OneForAllModel> LoadingList = new ObservableCollection<OneForAllModel>()
            {
                loadingPicture,
                loadingPicture,
                loadingPicture,
                loadingPicture,
                loadingPicture,
                loadingPicture,
                loadingPicture,
                loadingPicture,
                loadingPicture,
                loadingPicture,
            };
//This list is binded to the first collection view item source and works perfectly
            FirstList = LoadingList;

            #region SecondCollectionViewBelongins
            PictureModel a = new PictureModel()
            {
                //content
            };
            PictureModel b = new PictureModel()
            {
                //content
            };

            ObservableCollection<PictureModel> list = new ObservableCollection<PictureModel>()
                {
                    a,
                    b
                };
            SecondList = list;
**//This second binding does not seem to work**
            #endregion
        }

就是这样，如果您需要更多信息，我会在看到您的请求后立即提供，非常感谢大家的宝贵时间，祝您有美好的一天。

【问题讨论】：

标签： c# xaml xamarin xamarin.forms uicollectionview

【解决方案1】：

在绑定中绑定时，我们必须提供绑定上下文。

首先给出内容页面的名称。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             x:Name="Root">

然后引用绑定上下文

ItemsSource="{Binding Source={x:Reference Root},Path=BindingContext.SecondList}"

这是文档。 https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/data-binding/basic-bindings

【讨论】：

【解决方案2】：

这看起来是一个 BindingContext 问题。您将第一个 CollectionView 正确绑定到 FirstList。这意味着将为该列表中的每个项目创建一个项目。每个项目都有一个 OneForAllModel 类型的 BindingContext。

因为您随后在该项目中创建另一个 CollectionView，它试图在 OneForAllModel 而不是 HomeViewModel 上查找名为 SecondList 的属性。

尝试将 RelativeSource 绑定添加到您的 SecondList 绑定。

它应该看起来像这样

<CollectionView ItemTemplate="{StaticResource Second}"
                ItemsSource="{Binding Source={RelativeSource AncestorType={x:Type HomeViewModel}}, Path=SecondList}"
                BackgroundColor="Blue"
                VerticalOptions="FillAndExpand"
                HorizontalOptions="FillAndExpand">

这里是相对绑定文档的链接供参考：https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/data-binding/relative-bindings

【讨论】：

【解决方案3】：

也许您应该将 StackLayout 与 BindableLayout 一起使用，而不是 CollectionView。

这里是一个例子：https://stackoverflow.com/a/66591841/2472664

【讨论】：