ImageView in ListView briefly shows previous image on scroll with RecycleElement enabled

Question

I have a list of the following class:

public class Set {
   public string IconUrl { get; set; }
}

This list is bound to a ListView:

<ListView ItemsSource="{Binding Sets}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <ViewCell.View>
                    <Image Source="{Binding IconUrl}" />
                </ViewCell.View>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

When the view loads and the user starts scrolling, the cells are reused and the Image briefly shows the previous image before the new image is downloaded and rendered.

Is there a way to prevent this kind of behavior without disabling RecycleElement?

Answer 1

I haven't tried this but on ViewCell you have Disappearing and Appearing events that you can hook into.

You may want to look at releasing the image source on the Disappearing event handler, but sometimes this can occur sometime later I think from recollection, so you may also want to try releasing the image on the Appearing event handler that hopefully will be executed prior to the display on the screen?

Answer 2

We have solved this by manually setting the Image source to null to force the render of the new images. we achieve this by using OnBindingContextChanged Event of the ListView. Hope this helps.

Edited (Added code below):

We have something like this:

public class PeopleCell : ViewCell
{...

Image profileImage;

public PeopleCell()
{
    profileImage = new Image
    {
        VerticalOptions = LayoutOptions.CenterAndExpand,
        HorizontalOptions = LayoutOptions.CenterAndExpand,
        BackgroundColor = Color.FromHex("f5f5f5"),
        Source = ImageSource.FromFile("profile_blankimage"),
    };...

protected override void OnBindingContextChanged()
{
    base.OnBindingContextChanged();
    people = BindingContext as CustomerViewModel;


    if(people.Customer.Avatar != null)
       profileImage.Source = ImageSource.FromUri(new Uri(people.Customer.Avatar.Url));