Xamarin form FFImageLoading ListView control

Question

I wanted to add CachedImage using FFImageLoading with my ListView control. I have added the three packages and the control on the XAML but the listview is still display slow is there anything else I need to do for FFImageLoading Cached to work with a ListView control? i Tried to follow this sample but i am not sure if it’s working

is there a way to know for sure that the images are being cached?

https://github.com/luberda-molinet/FFImageLoading/wiki/Xamarin.Forms-Advanced#usage-in-listview-with-listviewcachingstrategyrecycleelement-enabled

MainActivity.cs

CachedImageRenderer.Init(true);

AppDelegate.cs

 CachedImageRenderer.Init();

XAML

<converters:FastTemplateCell AutomationId="DownloadListItemTemplateCell">
                        <converters:FastTemplateCell.View>
                                            <Grid Padding="5">
                                                <Grid.RowDefinitions>
                                                    <RowDefinition Height="15"></RowDefinition>
                                                </Grid.RowDefinitions>
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="15" />
                                                </Grid.ColumnDefinitions>
                                                <forms:CachedImage Grid.Row="0" Grid.Column="0" IsVisible="{Binding IsSelected, Converter={StaticResource InvertedBooleanConverter}}" AutomationId="GuidelineDownloadIcon" Source="arrow_start.png"/>
                                                <forms:CachedImage Grid.Row="0" Grid.Column="0" IsVisible="{Binding IsGuidelineDownloaded}" AutomationId="GuidelineDownloadSuccessIcon" Source="circle_done.png"/>
                                                <forms:CachedImage Grid.Row="0" Grid.Column="0" IsVisible="{Binding IsGuidelineDownloadFailed}" AutomationId="GuidelineDownloadFailIcon" Source="failed.png" />

                                            </Grid>

                                            <Label LineBreakMode="WordWrap" Grid.Column="1" Text="{Binding GuidelineChildName}" AutomationId="DownloadGuidelineType" TextColor="#337ab7">
                                        <Label.FontSize>
                                            <OnPlatform x:TypeArguments="x:Double">
                                                <On Platform="iOS" Value="16" />
                                                <On Platform="Android" Value="15" />
                                            </OnPlatform>
                                        </Label.FontSize>
                                        <Label.VerticalOptions>
                                            <OnPlatform x:TypeArguments="LayoutOptions">
                                                <On Platform="iOS" Value="CenterAndExpand" />
                                                <On Platform="Android" Value="Start" />
                                            </OnPlatform>
                                        </Label.VerticalOptions>
                                    </Label>
                                </Grid>
                            </Grid>
                        </converters:FastTemplateCell.View>
                    </converters:FastTemplateCell>

.cs

public class FastTemplateCell : ListViewTemplateCell
{
    private FFImageLoading.Forms.CachedImage imageDownloadIcon;
    private FFImageLoading.Forms.CachedImage imageDownloadSuccessIcon;
    private FFImageLoading.Forms.CachedImage imageDownloadFailIcon;

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

        this.EnsureCachedElements();

        if (dataimageDownloadIcon != null)
        {
            this.imageDownloadIcon.Source = "arrow_start.png";
        }

        if (dataimageDownloadSuccessIcon != null) 
        { 
            this.imageDownloadSuccessIcon.Source = "circle_done.png";
        }

        if (dataimageDownloadFailIcon != null)
        {
            this.imageDownloadFailIcon.Source = "failed.png";
        }
    }

    private void EnsureCachedElements()
    {
        if (this.imageDownloadIcon == null)
        {
            this.imageDownloadIcon = this.View.FindByName<CachedImage>("imageDownloadIcon");
        }
        if (this.imageDownloadSuccessIcon == null)
        {
            this.imageDownloadSuccessIcon = this.View.FindByName<CachedImage>("imageDownloadSuccessIcon");
        }
        if (this.imageDownloadFailIcon == null)
        {
            this.imageDownloadFailIcon = this.View.FindByName<CachedImage>("imageDownloadFailIcon");
        }
    }
}

Just two image and label . There is three images within the same column that will display base on setting . — Jefferson, Jan 31 '20 at 00:52

score 3 · Answer 1 · answered Jan 31 '20 at 05:49

According to your description and thread's title, I don't know why there is three images within the same column, I guess that you want to display image in ffimageloading in listview, if yes, I do some code that you can take a look:

Firstly, please install Xamarin.FFImageLoading.Forms bu nuget package, then you can use CachedImage.

 <ListView HasUnevenRows="True" ItemsSource="{Binding images}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout>
                            <Label Text="{Binding title}" />
                            <ff:CachedImage Source="{Binding imagepath}" />
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

 public partial class Page4 : ContentPage
{
    public ObservableCollection<imagemodel> images { get; set; }
    public Page4()
    {
        InitializeComponent();
        images = new ObservableCollection<imagemodel>()
        {
            new imagemodel(){title="image 1",imagepath="a11.jpg"},
            new imagemodel(){title="image 2",imagepath="a12.jpg"},
            new imagemodel(){title="image 3",imagepath="a13.jpg"}
        };
        this.BindingContext = this;
    }
}
public class imagemodel
{
    public string title { get; set; }
    public string imagepath { get; set; }
}

Then Initialize the FFImageLoading library in Android project Mainactivity.cs

FFImageLoading.Forms.Platform.CachedImageRenderer.Init(true);

and iOS AppDelegate’s

FFImageLoading.Forms.Platform.CachedImageRenderer.Init();

https://heartbeat.fritz.ai/using-ffimageloading-in-xamaring-forms-for-caching-and-optimizing-images-48e381be226b

About custom viewcell, I suggest you can take a look the Customizing a ViewCell:

https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/viewcell

I have it working but how do I know for sure that it is caching the images and not just reading the images each time — Jefferson, Feb 03 '20 at 11:26
@Jefferson, If you want to check, I suggest you can use normal image and cacheimage to make a comparison,here is the article, you can take a look:https://samsung.github.io/Tizen.NET/tizen.net/Image-caching-with-FFImageloading/#clear-cache-on-the-memory-and-disk — Cherry Bu - MSFT, Feb 05 '20 at 07:33

score 1 · Accepted Answer · answered Feb 07 '20 at 18:43

One thing to keep in mind is the size of the images, if you are trying to present some big images, even if they are cached, it can take sometime to load them in the Page, i have experienced this issue before, and with FFImage, you can use DownsampleToViewSize, you can have a more detailed look here and in the docs, but here it's what you need to know:

If set to true image will resize to an image view size.

So if your image is 1920x1080, but your view size is for example: 300x50, if you set DownsampleToViewSize to True, it will cache for you the 300x50 version, it will increase the speed of the image loading, here is the XAML code:

<ffimageloading:CachedImage
    LoadingPlaceholder="image_placeholder.png"
    Aspect="AspectFill"
    DownsampleToViewSize="True"
    Source="{Binding ThumnailImage}">
</ffimageloading:CachedImage>

And anwsering your Question:

is there a way to know for sure that the images are being cached?

I'm not sure if you can see that in memory usage or not, but you can try to compare with a normal one and a cached one, and see if at the second time the image loads faster or not. And for what i am seeing, you have made the correct instalation of the nuggets packages for the FFImageLoading.

Xamarin form FFImageLoading ListView control

2 Answers2