有没有办法使用 MvvmCross 在 Xamarin Forms 中使用嵌套的 CollectionViews？答案

【问题标题】：Is there a way to work with nested CollectionViews in Xamarin Forms with MvvmCross?有没有办法使用 MvvmCross 在 Xamarin Forms 中使用嵌套的 CollectionViews？
【发布时间】：2019-12-10 20:15:49
【问题描述】：

我正在 Xamarin Forms/MvvmCross 项目中构建一个页面，我需要多个 CollectionViews（至少，这是我假设的）。在屏幕顶部，我有一个水平的 CollectionView。在第一个视图下，我添加了一个垂直的 CollectionView。问题：我想在页面上向下滚动，以便第一个 CollectionView 消失而第二个更可见（尤其是在小屏幕上，只有第二个 CollectionView 的第一项在页面顶部可见）。我希望第一个和第二个 CollectionView 作为一个单元在页面上滚动。一些建议会很棒！

到目前为止，我已经尝试将第二个（垂直）CollectionView 更改为可绑定的 StackLayout，但是项目不会出现，并且这种方法感觉不对。


    <ScrollView>
                <StackLayout Spacing="0">
                    <SearchBar
                        mvx:La.ng="Placeholder SearchBar"
                        Margin="0,0,0,30"
                        TextColor="{StaticResource White}"
                        CancelButtonColor="{StaticResource White}"
                        PlaceholderColor="{StaticResource White_30}"
                        BackgroundColor="{StaticResource BackgroundColor}"/>
                    <Label mvx:La.ng="Text Artists" FontFamily="FiraSans#600" FontSize="16" TextColor="#FF6C6E81" Margin="0,0,0,20"/>
                    <CollectionView
                        x:Name="MyCollectionView"
                        ItemsSource="{mvx:MvxBind FavoriteArtists}"
                        HeightRequest="250" >

                        <CollectionView.ItemsLayout>
                            <GridItemsLayout
                                Orientation="Horizontal"
                                VerticalItemSpacing="1"
                                HorizontalItemSpacing="10" />
                        </CollectionView.ItemsLayout>

                        <CollectionView.EmptyView>
                            <StackLayout>
                                <ActivityIndicator Color="DimGray" IsRunning="True" HeightRequest="50" />
                            </StackLayout>
                        </CollectionView.EmptyView>

                        <CollectionView.ItemTemplate>
                            <DataTemplate>
                                <templates:FavArtistsTemplate/>
                            </DataTemplate>
                        </CollectionView.ItemTemplate>
                    </CollectionView>

                    <Label mvx:La.ng="Text Recent" FontFamily="FiraSans#400" FontSize="14" TextColor="#FF6C6E81" Margin="0,0,0,8"/>

                    <CollectionView
                        x:Name="MyCollectionView2"
                        ItemsSource="{mvx:MvxBind RecentlyPlayedItems}">

                        <CollectionView.EmptyView>
                            <StackLayout>
                                <ActivityIndicator Color="DimGray" IsRunning="True" HeightRequest="50" />
                            </StackLayout>
                        </CollectionView.EmptyView>

                        <CollectionView.ItemTemplate>
                            <DataTemplate>
                                <templates:MediaItemTemplate/>
                            </DataTemplate>
                        </CollectionView.ItemTemplate>
                    </CollectionView>
                </StackLayout>
            </ScrollView>

我希望第一个和第二个 CollectionView 作为一个单元在页面上滚动。一些建议会很棒！

【问题讨论】：

通常，当您构建原生移动应用程序时，要实现此行为，您所做的是构建一个 ListView / Tableview（这是您的垂直 CollectionView），然后创建另一个列表/tableview（水平），即您指定为您的第一个 ListView/Tableview header。但老实说，我没有对 CollectionView 做足够的工作来了解它是否能够处理这种 Header

标签： xamarin xamarin.forms mvvmcross

【解决方案1】：

您将 2 个水平的 CollectionViews 放入 ListView 标题中的 Grid 或 StackLayout :)

为了更清楚：

您使用 2 个水平的 CollectionViews 和 1 个 ListView（仅垂直），而不是 2 个水平的 CollectionViews 和 1 个垂直的 CollectionView。在ListView 的标头中，您将两个水平的CollectionViews 放在Grid 或StackLayout 中。

https://docs.microsoft.com/en-US/xamarin/xamarin-forms/user-interface/listview/customizing-list-appearance#headers-and-footers

【讨论】：