[Bug] CollectionView showing wrong rotated item

[obenyaala]

Description

If the CollectionView contains more than 4 rows the rotated item glitches. Once I rotate an item with 180deg and scroll down and up, the UI either hide an item or flips and another one. This affect just first and last row items

Steps to Reproduce

1. Create CollectionView with that contains more than 4 rows
2. RotateY an item to 180deg that belongs to the first or last row
3. Scroll up and down

Expected Behavior

After scrolling the flipped item stays the same

Actual Behavior

the flipped item is changed

Basic Information

• Version with issue: Xamarin Forms 4.8.0.1451 (Tried other versions same problem)

• Platform Target Frameworks:

  • Android: I just tested with android (can't test with IOS)
    I noticed the problem with a Samsung J5 (2017) device running Android 9, kernel version 3.18.91-16642474 and Build number PPR1.180610.011.

It Worked just fine using the Emulator running Android 9, kernel version 4.4.124+ and build number PSR1.18072.117

Environment

Show/Hide Visual Studio info

Microsoft Visual Studio Professional 2019 (2)
Version 16.8.3
VisualStudio.16.Release/16.8.3+30804.86
Microsoft .NET Framework
Version 4.8.03752

Installed Version: Professional

Visual C++ 2019   00435-60000-00000-AA562
Microsoft Visual C++ 2019

ASP.NET and Web Tools 2019   16.8.554.20160
ASP.NET and Web Tools 2019

ASP.NET Core Razor Language Services   16.1.0.2052803+84e121f1403378489b842e1797df2f3f5a49ac3c
Provides languages services for ASP.NET Core Razor.

ASP.NET Web Frameworks and Tools 2019   16.8.554.20160
For additional information, visit https://www.asp.net/

Azure App Service Tools v3.0.0   16.8.554.20160
Azure App Service Tools v3.0.0

Azure Functions and Web Jobs Tools   16.8.554.20160
Azure Functions and Web Jobs Tools

C# Tools   3.8.0-5.20604.10+9ed4b774d20940880de8df1ca8b07508aa01c8cd
C# components used in the IDE. Depending on your project type and settings, a different version of the compiler may be used.

Common Azure Tools   1.10
Provides common services for use by Azure Mobile Services and Microsoft Azure Tools.

Entity Framework Core Power Tools   2.5
Adds useful design-time EF Core DbContext features to the Visual Studio Solution Explorer context menu. 



Extensibility Message Bus   1.2.6 (master@34d6af2)
Provides common messaging-based MEF services for loosely coupled Visual Studio extension components communication and integration.

ILSpy.AddIn   1.0
Integration of the ILSpy Decompiler into Visual Studio.

IntelliCode Extension   1.0
IntelliCode Visual Studio Extension Detailed Info

Microsoft Azure Tools   2.9
Microsoft Azure Tools for Microsoft Visual Studio 2019 - v2.9.30924.1

Microsoft Continuous Delivery Tools for Visual Studio   0.4
Simplifying the configuration of Azure DevOps pipelines from within the Visual Studio IDE.

Microsoft JVM Debugger   1.0
Provides support for connecting the Visual Studio debugger to JDWP compatible Java Virtual Machines

Microsoft Library Manager   2.1.113+g422d40002e.RR
Install client-side libraries easily to any web project

Microsoft MI-Based Debugger   1.0
Provides support for connecting Visual Studio to MI compatible debuggers

Microsoft Visual C++ Wizards   1.0
Microsoft Visual C++ Wizards

Microsoft Visual Studio Tools for Containers   1.1
Develop, run, validate your ASP.NET Core applications in the target environment. F5 your application directly into a container with debugging, or CTRL + F5 to edit & refresh your app without having to rebuild the container.

Microsoft Visual Studio VC Package   1.0
Microsoft Visual Studio VC Package

Mono Debugging for Visual Studio   16.8.43 (00471f8)
Support for debugging Mono processes with Visual Studio.

Multilingual App Toolkit   4.0
Multilingual App Toolkit helps you localize your Windows Store app by providing file management, pseudo and machine translation, translation editor, and build integration. http://aka.ms/matinstall

NuGet Package Manager   5.8.0
NuGet Package Manager in Visual Studio. For more information about NuGet, visit https://docs.nuget.org/

Progress Telerik UI for Xamarin Extension   2020.3.1216.1
Progress® Telerik® UI for Xamarin Extension

ProjectServicesPackage Extension   1.0
ProjectServicesPackage Visual Studio Extension Detailed Info

SQL Server Data Tools   16.0.62010.06180
Microsoft SQL Server Data Tools

SQL Server Reporting Services   15.0.19124.0
Microsoft SQL Server Reporting Services Designers 
Version 15.0.19124.0

TypeScript Tools   16.0.21016.2001
TypeScript Tools for Microsoft Visual Studio

Visual Basic Tools   3.8.0-5.20604.10+9ed4b774d20940880de8df1ca8b07508aa01c8cd
Visual Basic components used in the IDE. Depending on your project type and settings, a different version of the compiler may be used.

Visual F# Tools   16.8.0-beta.20507.4+da6be68280c89131cdba2045525b80890401defd
Microsoft Visual F# Tools

Visual Studio Code Debug Adapter Host Package   1.0
Interop layer for hosting Visual Studio Code debug adapters in Visual Studio

Visual Studio Container Tools Extensions   1.0
View, manage, and diagnose containers within Visual Studio.

Visual Studio Tools for Containers   1.0
Visual Studio Tools for Containers

VisualStudio.DeviceLog   1.0
Information about my package

VisualStudio.Foo   1.0
Information about my package

VisualStudio.Mac   1.0
Mac Extension for Visual Studio

Xamarin   16.8.000.260 (d16-8@fd405a2)
Visual Studio extension to enable development for Xamarin.iOS and Xamarin.Android.

Xamarin Designer   16.8.0.507 (remotes/origin/d16-8@e87b24884)
Visual Studio extension to enable Xamarin Designer tools in Visual Studio.

Xamarin Templates   16.8.112 (86385a3)
Templates for building iOS, Android, and Windows apps with Xamarin and Xamarin.Forms.

Xamarin.Android SDK   11.1.0.17 (d16-8/c0e2b8e)
Xamarin.Android Reference Assemblies and MSBuild support.
    Mono: be2226b
    Java.Interop: xamarin/java.interop/d16-8@79d9533
    ProGuard: Guardsquare/proguard/proguard6.2.2@ebe9000
    SQLite: xamarin/sqlite/3.32.1@1a3276b
    Xamarin.Android Tools: xamarin/xamarin-android-tools/d16-8@2fb1cbc


Xamarin.iOS and Xamarin.Mac SDK   14.6.0.15 (87a1b18d8)
Xamarin.iOS and Xamarin.Mac Reference Assemblies and MSBuild support.

Screenshots

With error:
Error

With no error:
no error

Reproduction Link

I did upload my code in Github under :
Repo

[hartez]

This is happening because visual state of your ItemTemplate is not bound to any data which is maintained in your item model (in this case, the Card class). See this comment on issue 9200 for a more in-depth explanation.

In your case, you've bound the CustomStackLayout in your item template back to the Card object which is providing data for the CollectionView item. But when the CollectionView goes to the recycled pool of templates, it can (and often will) get a different instance of the template than the Card was originally bound to. Which results in everything being misbound.

To achieve your card flipping UI, add the relevant properties (RotationY and BackgroundColor) to your Card view model, and bind the CustomStackLayout's properties to those properties on the view model.