Xamarin.forms: [Bug] ListView Android : Duplicated items

[seb-glanum]

Description

I have an ListView with inside my ViewCell : a ScrollView with orientation horizontal.

The issue is that when I'm scrolling in an item horizontally and then I move forward in my ListView, I see some duplicated items which has the same state than the previous one where I was scrolling horizontally.

I'm using MVVM and RecycleElement for ListView in the app and the issue is only on Android.

Steps to Reproduce

1. Take 3 items you see in the ListView to scroll every one horizontally.
2. Move forward in the ListView to see next items.
3. You'll see the duplicated items.

Expected Behavior

Move forward in the ListView and see that next items are in their initial position.

Actual Behavior

Move forward in the ListView and see that some next items have duplicated scrolling the previous one where I was scrolling horizontally.

Basic Information

• Version with issue:
• IDE: Visual Studio Community 2019 16.6.3
• Platform Target Frameworks:
  
  
  
  • Android: 9.0 and 10.0 versions
  
  
• Nuget Packages:
  Xamarin.Forms 4.6.0.847

Screenshots

Video : ScreenVideoAndroidListView.zip

Reproduction Link

https://us.v-cdn.net/5019960/uploads/editor/te/stwva9df5ft2.rar : link project !

Workaround

No workaround.

[rmarinho]

Hi @seb-glanum that's because when you ScrollViewCustom is being reused you don't set it to the the initial value 0 .

try something like this

protected override void OnBindingContextChanged()
{
       base.OnBindingContextChanged();
       ScrollToAsync(ScrollXWritable, 0, false);
}

[seb-glanum]

Hello @rmarinho ! Thanks for your answer ! I've already tried to set the value on this method but it's doesn't do anything in my situation, the issue still here. As you would expect, ScrollXValue from my model would update ScrollViewCustom's ScrollToAsync with the property ScrollXWritablePropertyChanged, even if it's updating the value it's doesn't do anything. As I said the issue is only on Android and not on iOS and it's working perfectly on this last one.

[rmarinho]

yeah my recommendation was wrong... but this is by design since the ScrollViewRenderer doesn't know about ScrollXValue.

You will need a custom renderer like so

public class ScrollViewCustomRenderer : ScrollViewRenderer
{
    public ScrollViewCustomRenderer(Context context) : base(context) { }

    protected override void OnElementChanged(VisualElementChangedEventArgs e)
    {
        base.OnElementChanged(e);

        if (e.OldElement != null)
            e.OldElement.PropertyChanged -= HandlePropertyChanged;
        if (e.NewElement != null)
            e.NewElement.PropertyChanged += HandlePropertyChanged;

        UpdateScrollX();
    }
    void HandlePropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        if (e.PropertyName == nameof(ScrollViewCustom.ScrollXWritable))
        {
            UpdateScrollX();
        }
    }

    void UpdateScrollX()
    {
        var scrollView = Element as ScrollViewCustom;
        scrollView.ScrollToAsync(scrollView.ScrollXWritable, 0, false);
    }
}

[seb-glanum]

I've make this custom renderer but it's seems to not working neither. I believe that is an issue with Android's Adapter with its recycle function from Android's ListView.

Weird thing : if i'm scrolling very fast in my ListView, its seems to not make the duplicated cells, but conversely with slow scroll it has duplicated items.

[samhouts]

@seb-glanum Are you able to try the same thing with CollectionView instead of ListView? Thanks

[seb-glanum]

Hello @samhouts ! I've tried with CollectionView and it's the same thing, I have also my cells duplicated with this one too.

[ChrisSmithMail]

Did this ever get resolved - I have the same issue