Skip to content

Image

FFImageLoading

The control is used to display images.

In XAML

Note that you will need to put the image into each platform.

<Image Source="logo" />

The logo.png image was added to the Android drawable folder and on iOS into the Assets.xcassets folder.

In Code

Local image

var localImage = new Image
{
    Source = "logo"
};

Download image from the internet

var image = new Image
{
    Source = new UriImageSource
    {
        Uri = new Uri("https://i.imgur.com/OM81S7f.png")
    }
};

Custom library for image loading and caching

There are many available image loading and caching that provides more functionality that the default ImageView, e.g you might want to retry get the image, show a placeholder image, an error image, control the caching duration or transform the image on the fly.

We are going to use the FFImageLoading library in place of the default ImageView so we can show a placeholder image whilst we fetch images across the network.

Install the FFImageLoading

You will need to install the following packages in both Android and iOS projects and also the shard project :

  • Xamarin.FFImageLoading.Forms
  • Xamarin.FFImageLoading.Svg.Forms
  • Xamarin.FFImageLoading.Transformations

Initialize each project

You will need run some setup code to initialize the rendered for each project.

Android

In the MainActivity.cs file add the following line :

CachedImageRenderer.Init(true);

The OnCreate method should be look like this after adding the line :

protected override void OnCreate(Bundle bundle)
{
    TabLayoutResource = Resource.Layout.Tabbar;
    ToolbarResource = Resource.Layout.Toolbar;
    CachedImageRenderer.Init(true);

    base.OnCreate(bundle);

    global::Xamarin.Forms.Forms.Init(this, bundle);

    LoadApplication(new App());
}

iOS

In the iOS project, add the following line in the AppDelegate.cs file :

CachedImageRenderer.Init();

Adding namespace

Add the namespace :

xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"

Add the image view

Once the namespace is defined you can now add the image view and customize the properties you require :

<ffimageloading:CachedImage 
    WidthRequest="200" 
    HeightRequest="200" 
    LoadingPlaceholder="placeholder" 
    DownsampleToViewSize="true"
    Source="https://peruzal-parse-media.s3.amazonaws.com/652565bb-02ad-487f-929e-78308085ca1e_4.jpg" />

Note

We have a placeholder image add to both Android and iOS projects.