[Bug] CollectionView: items are not updated during reuse (Forms/iOS)

[zoli13]

Description

Using CollectionView in Xamarin.Forms causing not all items are displayed properly, but after a while, they just get repeated.
It happens only on iOS (tested on 13.4), on Android, it works ok.
Tested on XF 4.5.0.617 and 4.5.0.530- both same

Steps to Reproduce

1. Open attached project, and run on iOS
   CollectionViewBug.zip

If you see the debug output log, you could also see that on iOS, after you scroll out the first page, it does not call SKCanvasViewIconListItem_PaintSurface to paint the new items scrolled into the view - it just reuse(?) existing items without calling InvalidateSurface() on them, so old drawing remains.
On Android, you could see that SKCanvasViewIconListItem_PaintSurface is called for every item as you scroll.

Expected Behavior

To display all items in CollectionView properly

Basic Information

• Version with issue: 4.5.0.617 and 4.5.0.530 (tested only these two)
• Platform Target Frameworks:
  • iOS: 13.4

Screenshots

Android OK:

---

iOS wrong, after item 40, old items appear in random(?) order instead of 41, 42, 43, ...:

[zoli13]

I discussed with SkiaSharp team as well - and we concluded this is by design:
because there is no way of the items knowing that they need to redraw. The case with Android is that it just works because the Android OS always redraws when a view moves or changes parent - when it is moved from the top of the list to the bottom. iOS is far less verbose and if nothing changes, then there is no need to redraw.

There is a workaround, in the BindingContextChanged of SKCanvasView , we just call a InvalidateSurface() to force a redraw of the canvas.

So probably this could be closed?

[mattleibow]

To make things easier for you, you can just create a custom control and use that:

public class AutoCanvasView : SKCanvasView
{
    protected override void OnBindingContextChanged()
    {
        base.OnBindingContextChanged();

        InvalidateSurface();
    }
}

Or you can look into creating a behaviour so that you can convert an event into a Command that you can use in the view model: https://dotnetdevaddict.co.za/2017/07/13/turning-events-into-commands/

<views:SKCanvasView>
    <views:SKCanvasView.Behaviors>
        <local:PaintSurfaceCommandBehavior Command="{Binding PaintCommand}" />
    </views:SKCanvasView.Behaviors>
</views:SKCanvasView>

You can also combine the two to have a command and auto update:

public class AutoCanvasView : SKCanvasView
{
    protected override void OnBindingContextChanged()
    {
        base.OnBindingContextChanged();

        InvalidateSurface();
    }

    public static readonly BindableProperty PaintCommandProperty =
        BindableProperty.Create(
            nameof(PaintCommand),
            typeof(ICommand),
            typeof(AutoCanvasView),
            null,
            propertyChanged: (b, o, n) => ((AutoCanvasView)b).InvalidateSurface());

    public ICommand PaintCommand
    {
        get => (ICommand)GetValue(PaintCommandProperty);
        set => SetValue(PaintCommandProperty, value);
    }

    protected override void OnPaintSurface(SKPaintSurfaceEventArgs e)
    {
        base.OnPaintSurface(e);

        if (PaintCommand?.CanExecute(e) == true)
            PaintCommand.Execute(e);
    }
}