Xamarin.forms: [Bug] Wrong number of items per row when rotating CollectionView

[aliriomendes]

Description

I'm trying to have a dynamic number of item per row depending on the screen width.
When I rotate the device and recalcula the number of items per row (GridItemsLayout.Span), the math is right but collection view doesn't behave accordantly on iOS.

private void CollectionView_SizeChanged(object sender, EventArgs e)
{
    if (sender is CollectionView collectionView && collectionView.ItemsLayout is GridItemsLayout gridItemsLayout)
    {
        gridItemsLayout.Span = Math.Max(1, (int)Math.Floor(collectionView.Width / 320));
        System.Diagnostics.Debug.WriteLine("Items per row -> " + gridItemsLayout.Span);
    }
}

Steps to Reproduce

1. Rotate device

Expected Behavior

Actual Behavior

Basic Information

• Version with issue:
  Any version of Xamarin.Forms

• Platform Target Frameworks:

  • iOS:

• Affected Devices:
  iPad - Number of items in screen is different from GridItemsLayout.Span
  iPhone - Number of items in screen is different from GridItemsLayout.Span when rotate to Horizontal and and item desapear when rotate to Vertical.

  Screenshots

Reproduction Link

FormsCollectionViewRotationTest.zip

[aliriomendes]

I found a quick workaround:

if (sender is CollectionView collectionView && collectionView.ItemsLayout is GridItemsLayout gridItemsLayout)
{
    if (Device.RuntimePlatform == Device.iOS)
        await Task.Yield();
    gridItemsLayout.Span = Math.Max(1, (int)Math.Floor(collectionView.Width / 320));
}

[jfversluis]

I see some strange things going on. When rotating back the number of items is different than before on iPad and on iPhone (11) whenever I rotate back the screen just goes blank. This latter case might be due to new code changes that aren't in the NuGet yet.

Enough to investigate this further!

@aliriomendes did you happen to test this also on Android?

[aliriomendes]

I see some strange things going on. When rotating back the number of items is different than before on iPad and on iPhone (11) whenever I rotate back the screen just goes blank. This latter case might be due to new code changes that aren't in the NuGet yet.

Enough to investigate this further!

@aliriomendes did you happen to test this also on Android?

Yes, I tested it, and it works fine on Android.

[Jared-Aus]

I'm finding the whole GridItemsLayout class to be very static. In my testing so far (iOS only), the HorizontalItemSpacing, VerticalItemSpacing, and Span properties don't work with DynamicResource bindings. I also couldn't get the Span property to bind to my ViewModel.

Update: I found I can dynamically bind and swap in a different ItemsLayout to work around different spans and spacing for portrait and landscape orientations, however I then hit the same bug reported here. As soon as I rotate from landscape to portrait the layout is messed up. Starting in portrait is ok, and rotating back to landscape is always ok.

[hs79hs]

Does anybody have a solution for this? I also found this issue. When rotate back, if the span is set to 2 or 3, it works like the span is 1. And if I set the span to 4, it shows like the span is 2

[ryl]

I'm encountering this problem on an iPhoneXr with iOS 13.3.1

[borgdylan]

any news on this?

[hartez]

This is fixed in 4.6.0.847.