[Bug] Xamarin.Forms CollectionView View Recycling Issues

[MarcusOy]

Description

Taken from my StackOverflow post here: https://stackoverflow.com/questions/59865552/xamarin-forms-collectionview-view-recycling-issues

So I am using a CollectionView to display a list of entities that, when pressed, toggle between a opened and closed state. I did this by animating the HeightRequest parameter of the parent container of the view that was pressed, then adding whatever views I wanted to show in the view's expanded state. Here is the code snippet for that:

var animate = new Animation(d => this.HeightRequest = d,
    this.Bounds.Height, this.Bounds.Height + 300, Easing.CubicOut);
animate.Commit(this, "a", length: 500);

this.layout.Children.Add(this.candidateList);
this.layout.Children.Add(this.openButton);

This works fine, however, if I scroll down the list, I see that there are views that are also expanded even though I did not touch them previously, more so every full page of scrolling later. Some even include the views that I've added to the expanded state, showing incorrect data. I have assumed that this is due to the recycling mechanics of the CollectionView work in order to save on rendering costs, but there must be some way to fix this. Here is the code for relevant views:

var officesList = new CollectionView
{
    ItemTemplate = new DataTemplate(typeof(OfficeListView)),
    HorizontalOptions = LayoutOptions.FillAndExpand,
    ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Vertical)
    {
        SnapPointsType = SnapPointsType.None,
        ItemSpacing = 10,
    },
    Margin = new Thickness(20, 5),
    ItemSizingStrategy = ItemSizingStrategy.MeasureAllItems,
    Footer = " ",
    FooterTemplate = new DataTemplate(() =>
    {
        return new StackLayout
        {
            Margin = new Thickness(20, 10),
            Children = {
                new LocorumLabels.MediumLabel
                {
                    Text = "x Results | No filters applied" //TODO: Bind these to footer
                }
            }
        };
    })


};

The next snippet is the CollectionsView within an expanded "Office":

this.candidateList = new CollectionView
{
    ItemTemplate = new DataTemplate(typeof(CandidateDetailView)),
    HorizontalOptions = LayoutOptions.FillAndExpand,
    ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Vertical)
    {
        SnapPointsType = SnapPointsType.None,
        //ItemSpacing = 10,
    },
    Margin = new Thickness(10, 5),
    ItemSizingStrategy = ItemSizingStrategy.MeasureAllItems,
    Footer = " ",
    HeightRequest = 300

};

And here is a video showing what is going on: https://youtu.be/Ltg2o8BwfwY

Hopefully someone can let me know of a solution. Many thanks.

Steps to Reproduce

1. Initialize CollectionView with source and data template.
2. Within the data template constructor, define size based on binding context's state (Expanded or Collapsed)
3. Hook TapGesture to view and make it execute function to change the state and recalculate layout of view (using an Animate object shown in the description)
4. Scroll down and notice that after a certain interval, there is another view mocking its size and inner CollectionsView without being interacted with.

Expected Behavior

When scrolling down in CollectionsView, views that haven't been interacted with should remain their size.

Actual Behavior

When scrolling down in CollectionsView after interacting with one view, certain views that haven't been interacted with mock interacted view's size and contents.

Basic Information

• Version with issue: Xamarin.Forms 4.3.0.991211
• IDE: Visual Studio for Mac 2019
• Platform Target Frameworks:
  • iOS: Target for 8.0, testing on 13.1
• Nuget Packages:
  • Shared Project:

• iOS Project:

• Affected Devices: iOS

Screenshots

Video in Description

[PureWeen]

Closing as duplicate of #9520 because #9520 has an attached repro