[Bug] CollectionView with multiple columns laying out items oddly on iOS

[beeradmoore]

Description

CollectionView has odd behaviour on iOS when displaying items in multiple columns. If each cell of this grid has its own height then the result view is centered vertically. I assume this isn't the desired layout style. In my case I was building a file browser and its very noticeable when these items are not vertically aligned to the top of their cell.

See the attached iOS and Android screenshots below.

I initially thought this was somewhat related to #9520, but my repro appears to work fine on Android.

Steps to Reproduce

1. Add a CollectionView
2. Make it have more than 1 column in a grid vertical layout. (my repro has 3)
3. Set its ItemSource set to some items that will result in varying height
4. Observe results

Expected Behavior

iOS and Android display the same grid.

Actual Behavior

Android displays it as I would expect it. However iOS will center each grid cell, meaning that shorter cells will not have their tops aligned. In my case this was thumbnail images.

Basic Information

• Version with issue: 4.4.0.991640, 4.5.0.356 (possibly older versions)
• Last known good version: NA
• IDE: VS4Mac 8.4.7
• Platform Target Frameworks:
  • iOS: 11.3.1
  • Android: 9.0
• Nuget Packages: Xamarin.Forms, Xamarin.Essentials, Newtonsoft.Json

Screenshots

Reproduction Link

The repro currently has a custom renderer enabled as I was investigating just getting the view and changing its alignment. CollectoinViewRenderer appears to be a lot more complicated than a ListViewRenderer so I didn't have much success.

I get the exact same test results with CollectionView as I do with CustomCollectionView.

CollectionViewRowHeightTest.zip

Workaround

Guess and set a fixed height used by all cells.

[donatellijl]

I'm having this issue as well. On Android, my elements are vertically start aligned, but on iOS, the elements are vertically centered aligned. The only work-around I know of is to set a height request on the element inside the data template. This is not helpful because my text could change based on translations and therefore could vary largely in length.

This issue does not happen on an iPhone 6 12.2 simulator. It does happen on the iPhone SE 12.2 simulator.