Xamarin.forms: [Bug] CollectionView dynamic item resizing duplicates sizing on later items

[gonz01d]

Description

When changing the size (and background colour) of a CollectionView item at runtime (as detailed here in the Xamarin Docs) subsequent off screen items several rows down are also resized as you scroll down the list.

This is happening on both Android and iOS, with iOS also producing odd item display behaviour as the list is updated after the resize which then corrects upon first touch when scrolling.

Steps to Reproduce

1. Open and run attached repro project.
2. The CollectionView is initially populated with 24 Cyan coloured items.
3. Tap on an item to change its size and background colour.
4. Scroll down and the item sizing (and background colour) will be repeated in subsequent cells that are scrolled in to view.

Expected Behavior

Only individual CollectionView items that have been dynamically resized should change their appearance.

Actual Behavior

Presumably due to cacheing / recycling other CollectionView items that are off screen and scrolled into view are having their appearance (size and background colour) changed.

Basic Information

• Versions with issue:
  
  
  
  • 4.3.x
  
  
  • 4.4.0.991640 (latest stable at time of issue creation)
  
  
  • 4.6.0.280-nightly
  
  
• Last known good version: Unknown
• IDE: Visual Studio Community 2019 for Mac (Version 8.4.3 (build 12))

• Platform Target Frameworks:

  • iOS: 8.0, 12.4, 13.2
  • Android: 8.0 (API level 26), 9.0 (API level 28)

• Affected Devices:

  • iPhone 6 (iOS 11.2.2), iPhoneX (iOS 13.3)
  • Samsung SM-A202F (9.0), Moto G6 Play (8.0)

Screenshots

Initial view of 24 Cyan items, first item tapped to resize, scroll down and another resized item also shown :

iOS post resize also sizes the remaining visible items oddly until the first touch :

Reproduction Link

CollectionViewCellResize.zip

Workaround

In my case I reverted to using a derived ListView ensuring ListViewCachingStrategy is not set to RecycleElement and in an iOS ListView renderer call UITableView.BeginUpdates and UITableView.EndUpdates to refresh the list after an item resize. Android works without needing a forced refresh of the native control.

[gonz01d]

Looks like my issue could be a duplicate of / related to this one: https://github.com/xamarin/Xamarin.Forms/issues/9365

[PureWeen]

Thank you for pointing out the duplicate @gonz01d !!

I also tried setting ItemSizingStrategy="MeasureAllItems" but the same issue surfaces

[gonz01d]

Thank you for pointing out the duplicate @gonz01d !!

I also tried setting ItemSizingStrategy="MeasureAllItems" but the same issue surfaces

No worries @PureWeen

I concur and probably should have mentioned that when I created the issue. I think MeasureAllItems is the default ItemSizingStrategy anyways but as you say even setting it explicitly makes no difference

[MarcusOy]

Hey @gonz01d , I never fixed my issue, so I changed how my app behaved from expanding the views within the CollectionView to popping up a modal with a transparent grey background and featuring the view that was tapped in its expanded state. This way, the views in the CollectionView remain untouched in terms of layout and size, which is probably better for performance anyways.

Hope you find this suggestion helpful, otherwise I hope you find a solution to this problem.

[boris-df]

same problem but with just dynamic resized items while loading the data (simple XAML with Binding a Text that can have multiple lines... in my real world case i have more complex layout but it can be reproduced very simple - see attached project)

After loading the data, item spacing is of
if you scroll a bit - everything is corrected
if you reload the data - problem occurs again

didn't happen on Android but only on ios as far as i can see

ColViewBug.zip

[boris-df]

(Update) If you take my sample, you can remove the Binding Text from the xaml.
Instead: Let the EntryCell show three lines of fixed text, for example in a grid - same problem! So even with fixed XAML this problem occures!

EntryCell fixed layout showing the same Problem:
`

        <!--<Label Grid.Row="0" Text="{Binding Text}"/>-->
        <Label Grid.Row="0" Text="1111"/>
        <Label Grid.Row="1" Text="22222"/>
        <Label Grid.Row="2" Text="33333"/>
    </Grid>`

Problem occurs as soon as a cell is heigher than a cell before.

[lobbo232]

Not sure if it's exactly the same as above, but I'm getting some strange issues with the CollectionView view recycling too. (This also occurs on a ListView with CachingStrategy set to RecycleElement).

Inserting a new item in to the bound observable collection causes some items below to loose their content. If you scroll pasts these items with the missing content, and then scroll back up to them, them content reappears.

Additionally with a ListView if you expand the height of the content of a ViewCell (by settings some content within it to IsVisible=True), the content of the ViewCell gets squished and the ViewCell does not increase it's height. Again, scroll away and come back and it's fine.

[lafritay]

Hitting this same issue with a basic dynamic load of a string that could be multiple lines. Everything resizes correctly on the first scroll. Are there any suggested workarounds for this issue? (And I should mentioned that I switched away from using a ListView since I was having similar problems there so I don't view that as a valid workaround).

[liveinvarun]

CollectionView also has the same issue => when first row is resized dynamically, the subsequent other rows get resized with first. Collection view has to reload technically and expand for the first cell or row. Forms version 4.5.0.617. Please can anybody update the status. This behaviour is common in ios.
@samhouts

[liveinvarun]

Another thing noted here is the moment i scroll the collection view it resizes properly. size is adjusted for all the other rows. Looks like the view is not reloading as expected.

[liveinvarun]

CollectionView_sizing_issue.zip
I even tried the preview version - None has the fix. The item dynamic size is copied to the later items and when we scroll the list the size is getting corrected. I have attached the sample of the same.