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. Some advice would be great!
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.
<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!
You put 2 horizontal CollectionViews in the ListView Header in a Grid or StackLayout :)
To be more clear:
Instead of 2 horizontal CollectionViews and 1 vertical CollectionView, you use 2 horizontal CollectionViews and 1 ListView (which is only vertical). In the Header of the ListView, you put the 2 horizontal CollectionViews in a Grid or StackLayout.