Ffimageloading: [Android] CachedImage doesn't load in SFListView until after scrolled off screen

Created on 11 Nov 2017 · 9Comments · Source: luberda-molinet/FFImageLoading

I'm finding some strange behavior whereby when I load a CachedImage into an ItemTemplate within an SFListView, I see a blank space where the image should be until I scroll.

Here's a template

<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xaml="clr-namespace:MyApp.SelfServe.Mobile.Xaml;assembly=MyApp.SelfServe.Mobile"
             xmlns:forms="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
             xmlns:controls="clr-namespace:MyApp.SelfServe.Mobile.Controls;assembly=MyApp.SelfServe.Mobile"
             x:Class="MyApp.SelfServe.Mobile.Pages.UserAccount.Projects.Templates.ProjectListTemplate">
    <Grid HorizontalOptions="Fill" VerticalOptions="Fill" Margin="0" Padding="0"
          BackgroundColor="{Binding IsSelected, Converter={StaticResource SfListViewSelectionConverter}}"
          RowSpacing="0">
        <Grid.RowDefinitions>
            <RowDefinition>
                <RowDefinition.Height>
                    <OnPlatform x:TypeArguments="GridLength">
                        <On Platform="Android" Value="120" />
                        <On Platform="iOS" Value="100" />
                    </OnPlatform>
                </RowDefinition.Height>
            </RowDefinition>
            <RowDefinition Height="1" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="5" />
            <ColumnDefinition Width="50" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="40" />
        </Grid.ColumnDefinitions>

        <BoxView Grid.Column="0"
                 Grid.Row="0"
                 Color="{Binding Phase, Converter={StaticResource ProjectPhaseToColorConverter}, ConverterParameter={Binding HasAlert}}"
                 WidthRequest="5"
                 HeightRequest="999"
                 VerticalOptions="FillAndExpand" />

        <forms:CachedImage Grid.Column="1" 
                           Grid.Row="0"
                           HorizontalOptions="Center"
                           VerticalOptions="Center"
                           Source="{Binding PhaseIcon}" />

        <StackLayout Grid.Column="2"
                     Grid.Row="0"
                     Spacing="2"
                     VerticalOptions="Center">
            <Label Text="{Binding Nickname}" Style="{StaticResource Common-Title}"
                   LineBreakMode="TailTruncation" />
            <Label FormattedText="{Binding RequestNumberFormatted}"
                   LineBreakMode="TailTruncation" />
            <Label FormattedText="{Binding PhaseFormatted}"
                   LineBreakMode="TailTruncation" />
            <Label FormattedText="{Binding SiteIdFormatted}"
                   LineBreakMode="TailTruncation" />
            <Label FormattedText="{Binding LocationFormatted}"
                   LineBreakMode="TailTruncation" />
        </StackLayout>

        <controls:TintedCachedImage
            Grid.Column="3"
            Grid.Row="0"
            Source="arrow.png"
            HorizontalOptions="Center"
            VerticalOptions="Center"
            TintColor="{Binding Phase, Converter={StaticResource ProjectPhaseToColorConverter}, ConverterParameter={Binding HasAlert}}"
            InputTransparent="True"
            IsVisible="{Binding IsBusy, Converter={StaticResource InverseBoolConverter}}" />

        <ActivityIndicator Grid.Column="3"
                           Grid.Row="0"
                           IsVisible="{Binding IsBusy}"
                           IsRunning="{Binding IsBusy}" />
        <BoxView Grid.Column="0"
                 Grid.Row="1"
                 Grid.ColumnSpan="4"
                 HeightRequest="1"
                 HorizontalOptions="FillAndExpand"
                 Color="{xaml:ResxColor PrimaryDarkBlue}" />
    </Grid>
</ContentView>

Page Load
one

Partial Scroll Down
two

After Scroll down and back to top
three

Source

ChaseFlorell

All 9 comments

I also tried this in the codebehind to remove the binding... but it gives the same result.

public partial class ProjectListTemplate
{
    public ProjectListTemplate()
    {
        InitializeComponent();
        ResetImage();
    }

    protected override void OnBindingContextChanged()
    {
        ResetImage();
        base.OnBindingContextChanged();
    }

    private void ResetImage()
    {
        var item = BindingContext as ProjectsTabItem;
        if (item == null)
            return;

        PhaseImage.Source = item.PhaseIcon;
    }
}

ChaseFlorell on 11 Nov 2017

Does it work when you replace CachedImage with Image?
Could you give some examples of PhaseIcon binding values?

daniel-luberda on 12 Nov 2017

Hey @daniel-luberda, yes it's works with <Image />, I'm actually attempting to improve our scrolling performance by exactly swapping <Image /> for <forms:CachedImage />

The PhaseIcon is set in the code behind like so.

public int Phase
{
    get { return _phase; }
    set { SetProperty(ref _phase, value, () =>
    {
        RaisePropertyChanged(nameof(SortedPhase));
        RaisePropertyChanged(nameof(PhaseIcon));
        RaisePropertyChanged(nameof(PhaseFormatted));
    }); }
}

public FileImageSource PhaseIcon => Phase == -1 
    ? new FileImageSource { File = "phase_cancelled.png" } 
    : new FileImageSource { File = $"phase{Phase}.png" };

ChaseFlorell on 12 Nov 2017

I'm getting the same behavior in a normal listview.
It also doesn't display the placeholder image.
I upgraded from 2.2.20 and tested the following releases (all on Xamarin.Forms 2.5.0.75255-pre3):

2.2.20 works
2.2.21 works
2.2.22 works
2.2.23 doesn't work
2.2.24-pre-605 doesn't work
2.2.24 doesn't work

so the last version where i get the expected behavior is the 2.2.22

Edit:

it works in 2.2.23 and 2.2.24 when i deactivate the fast renderers using

CachedImageRenderer.Init(enableFastRenderer: false)