Post
Ask Question

Xamarin.Forms - FFImageLoading App

Introduction

This article demonstrates how to enable support for displaying GIF, SVG, JPG pictures in Xamarin.Forms application.This means GIF, SVG ,JPG files are rendered quickly and easily with various transformations in Xamarin.Forms application.These features are not listed by default in Xamarin.Forms. So, we need to install a plug-in for this.
 
Nuget packages - Search Xamarin.Forms
  • "Xamarin.FFImageLoading.Forms"
  • "Xamarin.FFImageLoading.SVG.Forms"
  • "Xamarin.FFImageLoading.Transformations"

FFImageLoading Nuget Features

  •  GIF / SVG / JPG support
  •  Image loading Fade-in animation support
  •  Save 50% memory for by trying not use transparency
  •  Multiple image view using the same image source url
  •  Less memory usage
  •  Disk and memory caching
  •  GIF image support
  •  SVG support
  •  Transformation and types below
    • Custum transformation using ITransformation in native platform(Android,IOS,Windows)
    • BlurredTransformation
    • CircleTransformation
    • RoundTransformation
    • CornerTransformation
    • CropTransformation
    • ColorSpaceTransformation
    • GrayScaleTransformation
    • SepiaTransformation
    • TintTransformation
    • FlipTransformation
    • RotateTransformation

Examples for Transformation

  •  GIF Pictures


  • Blurred Transformation

  •  CircleTransformation

  • ColorSpaceTransformation
                  
  • CornerTransformation
  •  CropTransformation

  •  GrayScale Transformation


  •  Rotate Transformation


  •  Round Transformation


  •  Sepia Transformation


  •  Tint Transformation


 
Step 1

You can create Xamarin.Forms app by going to File >>New >> Visual C# >> Cross Platform >> Cross Platform App ( Xamarin.Native or Xamarin.Forms ), give the application name, and click OK.

(Project name : ImageLoading)

 
 
Step 2

After the project creation, add the following NuGet packages to your project.
  •  Xamarin.FFImageLoading.Forms
  •  Xamarin.FFImageLoading.Svg.Forms
  • Xamarin.FFImageLoading.Transformations

For that, open Solution Explorer and select your solution. Right-click and select "Manage NuGet Packages for the Solution". In the popup window, open "Browse" tab and browse "Xamarin.FFImageLoading.Forms" and select the following NuGet packages and select yours then install it.

 
 
Step 3

Afterwards, add GIF, SVG, pictures. For that, open Solution Explorer >>right click and select Add followed by selecting Existing Items.

 

After this, let's change the picture properties to embedded resource. For that, go to Properties window >> Advanced  >> Build Action >> select Embedded Resource.

 

Step 4

In this step, open Solution Explorer >> ImageLoading(PCL) >> MainPage.xaml page and double click to open the design view. After opening this, you can add assembly and XAMLl code to your project.Here is the code for this page
 
NameSpace
  1. xmlns:ff="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"  
  2. xmlns:ffSvg="clr-namespace:FFImageLoading.Svg.Forms;assembly=FFImageLoading.Svg.Forms"  
  3. xmlns:ffTransformations="clr-namespace:FFImageLoading.Transformations;assembly=FFImageLoading.Transformations" 
 
 
XAML code
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              xmlns:local="clr-namespace:ImageLoading"  
  5.              x:Class="ImageLoading.MainPage"  
  6.              xmlns:ff="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"  
  7.              xmlns:ffSvg="clr-namespace:FFImageLoading.Svg.Forms;assembly=FFImageLoading.Svg.Forms"  
  8.              xmlns:ffTransformations="clr-namespace:FFImageLoading.Transformations;assembly=FFImageLoading.Transformations">  
  9.           
  10.     <ScrollView>  
  11.         <StackLayout Padding="20,0">  
  12.             <Label Text="FFimageLoadingApp" TextColor="AliceBlue" FontSize="40"/>  
  13.   
  14.             <Label Text="GIF" TextColor="DodgerBlue" FontSize="40" />  
  15.   
  16.             <ff:CachedImage x:Name="Gif" Source="resource://ImageLoading.Cartoon.gif" />  
  17.               
  18.               
  19.   
  20.             <Label Text="Blurred Image" TextColor="DodgerBlue" FontSize="40"/>  
  21.             <ff:CachedImage Source="resource://ImageLoading.logesh.JPG">  
  22.                 <ff:CachedImage.Transformations>  
  23.                     <ffTransformations:BlurredTransformation Radius="200" />  
  24.                 </ff:CachedImage.Transformations>  
  25.             </ff:CachedImage>  
  26.               
  27.               
  28.             <Label Text="Rounded Transformation" TextColor="DodgerBlue" FontSize="24"/>  
  29.             <ff:CachedImage Source="resource://ImageLoading.logesh.JPG">  
  30.                 <ff:CachedImage.Transformations>  
  31.                     <ffTransformations:RoundedTransformation Radius="240" />  
  32.                 </ff:CachedImage.Transformations>  
  33.             </ff:CachedImage>  
  34.   
  35.             <Label Text="Grayscale Transformation" TextColor="DodgerBlue" FontSize="24"/>  
  36.             <ff:CachedImage Source="resource://ImageLoading.logesh.JPG">  
  37.                 <ff:CachedImage.Transformations>  
  38.                     <ffTransformations:GrayscaleTransformation />  
  39.                 </ff:CachedImage.Transformations>  
  40.             </ff:CachedImage>  
  41.   
  42.             <Label Text="Circle Transformation" TextColor="DodgerBlue" FontSize="24"/>  
  43.             <ff:CachedImage Source="resource://ImageLoading.logesh.JPG">  
  44.                 <ff:CachedImage.Transformations>  
  45.                     <ffTransformations:CircleTransformation />  
  46.                 </ff:CachedImage.Transformations>  
  47.             </ff:CachedImage>  
  48.           
  49.   
  50.             <Label Text="Rotate Transformation " TextColor="DodgerBlue" FontSize="24"/>  
  51.             <ff:CachedImage Source="resource://ImageLoading.logesh.JPG">  
  52.                 <ff:CachedImage.Transformations>  
  53.                     <ffTransformations:RotateTransformation />  
  54.                 </ff:CachedImage.Transformations>  
  55.             </ff:CachedImage>  
  56.   
  57.             <Label Text="Sepia Transformation" TextColor="DodgerBlue" FontSize="24"/>  
  58.             <ff:CachedImage Source="resource://ImageLoading.logesh.JPG">  
  59.                 <ff:CachedImage.Transformations>  
  60.                     <ffTransformations:SepiaTransformation />  
  61.                 </ff:CachedImage.Transformations>  
  62.             </ff:CachedImage>  
  63.   
  64.             <Label Text="Tint Transformation" TextColor="DodgerBlue" FontSize="24"/>  
  65.             <ff:CachedImage Source="resource://ImageLoading.logesh.JPG">  
  66.                 <ff:CachedImage.Transformations>  
  67.                     <ffTransformations:TintTransformation />  
  68.                 </ff:CachedImage.Transformations>  
  69.             </ff:CachedImage>  
  70.   
  71.             <Label Text="Crop Transformation " TextColor="DodgerBlue" FontSize="24"/>  
  72.             <ff:CachedImage Source="resource://ImageLoading.logesh.JPG">  
  73.                 <ff:CachedImage.Transformations>  
  74.                     <ffTransformations:CropTransformation />  
  75.                 </ff:CachedImage.Transformations>  
  76.             </ff:CachedImage>  
  77.   
  78.             <Label Text="Corner Transformation " TextColor="DodgerBlue" FontSize="24"/>  
  79.             <ff:CachedImage Source="resource://ImageLoading.logesh.JPG">  
  80.                 <ff:CachedImage.Transformations>  
  81.                     <ffTransformations:CornersTransformation />  
  82.                 </ff:CachedImage.Transformations>  
  83.             </ff:CachedImage>  
  84.   
  85.   
  86.             <Label Text="ColorSpace Transformation " TextColor="DodgerBlue" FontSize="24"/>  
  87.             <ff:CachedImage Source="resource://ImageLoading.logesh.JPG">  
  88.                 <ff:CachedImage.Transformations>  
  89.                     <ffTransformations:ColorSpaceTransformation/>  
  90.                 </ff:CachedImage.Transformations>  
  91.             </ff:CachedImage>  
  92.             <Label Text="SVG" TextColor="DodgerBlue" FontSize="40"/>  
  93.             <ffSvg:SvgCachedImage Source="resource://ImageLoading.logesh.svg"/>  
  94.        
  95.         </StackLayout>  
  96.     </ScrollView>  
  97. </ContentPage> 
 

Step 5

Now, go to "Build" menu and click "Configure Manager". Here, you can configure your startup projects. Click F5 or start to build and run your application.

After a few seconds, the app will start running on Android simulator or emulator and you will see your app working successfully.

 
Finally, we have successfully created a Xamarin.Forms ImageLoading application using FFImageLoading Plugin.


Similar Articles