Fabulous for Xamarin.Forms - Guide

Using FFImageLoading

The FFImageLoading plugin allows you to cache images as opposed to wasting time and memory with the built-in Image view. Using FFImageLoading, you have an easy way to cache images in your Fabulous.XamarinForms application.

FFImageLoading was created by Daniel Luberda and Fabien Molinet. The original project can be found in this github repository.

The nuget Fabulous.XamarinForms.FFImageLoading implements a view component for the type CachedImage.

How the view looks

Source: The FFImageLoading github project by Daniel Luberda and Fabien Molinet

Installation

To use Fabulous.XamarinForms.FFImageLoading, you must:

  1. Add a reference to this NuGet package across your whole solution. This will add appropriate references to your platform-specific Android, iOS, UWP, WPF etc projects too.

  2. Add this line to your platform specific projects (AppDelegate.fs, MainActivity.fs, MainPage.xaml.cs, etc) before you use FFImageLoading:
    • If you’re using Android:
      FFImageLoading.Forms.Platform.CachedImageRenderer.Init(enableFastRenderer: [true]/[false])
      
    • If you’re using non-Android platforms:
      FFImageLoading.Forms.Platform.CachedImageRenderer.Init()
      
  3. Use CachedImage in your view function. Here is a simple example of using CachedImage to display a scenic image:
View.CachedImage(
  source = Path "http://loremflickr.com/600/600/nature?filename=simple.jpg",
  height = 600.,
  width = 600.
)

Performance considerations

Use FileImageSource, UriImageSource or FFImageLoading’s EmbeddedResourceImageSource instead of StreamImageSource or ImageSource.FromResource to ensure the images are cached properly. Read more here on the FFImageLoading wiki

See also: