Forum Xamarin Xamarin.Forms

Is there a way to work with nested CollectionViews in Xamarin Forms with MvvmCross?

I'm building a page inside a Xamarin Forms/MvvmCross project, where I need multiple CollectionViews (at least, that's what I assume).

On top of the screen I have a horizontal CollectionView. Beneath this first View, I added a vertical CollectionView.

Problem: I want to scroll down on the page so the first CollectionView disappears and the second one is more visible (especially on small screens, where only the first item of the second CollectionView is visible on top of the page).

I would like the first and second CollectionView to scroll on the page as one unit.

So far I've tried to change the second (vertical) CollectionView into a bindable StackLayout, but the items won't appear and this approach feels wrong.

My code:

<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>

I would like the first and second CollectionView to scroll on the page as one unit.

Some advice would be great!

Best Answer

Answers

Sign In or Register to comment.