pauldipietro
Horizontal Movie Gallery, similar to Netflix, Hulu, etc. (LiveStream on Twitch)
Screenshots
What went well?
Shared Styles
Since my DataTemplate is identical between the 2 CollectionView containers I created the DataTemplate as a shared style in the ResourceDictionary which worked without issue.
Custom View Cells
Once I got the CollectionView working it was very easy to customize each cell just like I would with a ListView. This makes me believe it will be very easy to convert a ListView or CarouselView from the popular CarouselViewPlugin.
Snaps
Creating Snaps worked very well and the documentation on it was very easy to follow
Shared ListItemsLayout
I created a custom ListItemsLayout called SnapHorizontalList which presets the properties to use snap to center and horizontal. This was easy to create and include in the XAML.
No intellisense available for my custom `SnapHorizontalList in VS 2017
How easy is it to convert your existing ListView to the CollectionView?
Not Applicable, I did not convert anything existing, this was 100% from scratch. However, based on my findings I believe it will be easy to convert a ListView or the popular CarouselViewPlugin to use CollectionView
What didn't go well?
Redraw Not Working
The start was pretty rough and I think it was due to loading images from URIs. This tells me that the screen isn't re-drawing correctly after the data is loaded. To resolve this I had to specify a HeightRequest and WidthRequest in the DataTemplate in the root element. I tried using both StackLayout and Grid with many different parameters including HorizontalOptions and VerticalOptions set to FillAndExpand. As well as various different RowDefinition and ColumnDefinition for Grid. In each implementation I needed to specify the WidthRequestandHeightRequest`
<DataTemplate x:Key="MovieTemplate">
<StackLayout HeightRequest="250"
WidthRequest="250">
...
</StackLayout>
</DataTemplate>
On the video you can view this struggle from 00:45-1:00
Important Notes
This is ONLY a problem in Horizontal Lists and when I changed the Layout to be Vertical the re-draw was happening correctly.
How is the performance?
How is the performance using CollectionView compared to when using the ListView?
Missing or Desired Things:
The page needs to properly re-draw for Horizontal with Images as I should not have to specify the WidthRequest and HeightRequest in the DataTemplate. I believe this problem happened since I was loading images from URIs.
This was not a problem when rendering a Vertical CollectionView
Live Stream
The entire process was recorded on my Twitch Live Stream. You can find the recording on Twitch and archived on youtube.
