CollectionView 中的 CollectionView 未正確綁定 ItemsSource 屬性 (XamarinForms)

Question

我試圖將一個 collectionView 嵌套在另一個中，但是在綁定嵌套的 ItemsSource 屬性時遇到了麻煩，即使我創建 ObservableCollection 並將其綁定到 ItemsSource 屬性的方法對於兩個集合視圖。 知道我做錯了什么嗎？

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>

視圖模型代碼：

    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
        }

就是這樣，如果您需要更多信息，我會在看到您的請求后立即提供，非常感謝您的時間，祝您有美好的一天。

Answer 1

這看起來是一個 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

Answer 2

在綁定內部綁定時，我們必須提供綁定上下文。

首先給出內容頁面的名稱。

<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

Answer 3

也許您應該將 StackLayout 與 BindableLayout 而不是 CollectionView 一起使用。

這是一個例子： https : //stackoverflow.com/a/66591841/2472664