- Notifications
You must be signed in to change notification settings - Fork374
Xamarin.Forms API
FFImageLoading for Forms providesCachedImage - a directImage class replacement. It’s used just the same but it has some additional properties.
Add the following NuGet packages toevery project in your solution.
Xamarin.FFImageLoading
Xamarin.FFImageLoading.Forms
Xamarin.FFImageLoading.Transformations (if you’ll use transformations like
CircleTransformation)Xamarin.FFImageLoading.Svg (for SVG support)
Xamarin.FFImageLoading.Svg.Forms (for SVG support)
SkiaSharp (for SVG support)
You must add this line to your platform specific project (AppDelegate.cs,MainActivity.cs,Mainpage.xaml.cs, etc) before you use FFImageLoading:
if you’re usingiOS orUWP:
FFImageLoading.Forms.Platform.CachedImageRenderer.Init();
or if you’re usingAndroid:
FFImageLoading.Forms.Platform.CachedImageRenderer.Init(enableFastRenderer:[true]/[false]);
You can now easily use FFImageLoading with standard views like Xamarin.Forms.Image. Just call this afterXamarin.Forms.Init call:
CachedImageRenderer.InitImageViewHandler()on AndroidCachedImageRenderer.InitImageSourceHandler()on iOS / Mac and others
If your UWP app is referencing multiple assemblies (for example third party control libraries, or your application itself is split into multiple PCLs), Xamarin.Forms may be unable to load objects from those assemblies (such as custom renderers). This might occur when using the Compile with .NET Native tool chain which is an option for UWP apps in the Properties > Build > General window for the project. You can fix this by using a UWP-specific overload of the Forms.Init call in App.xaml.cs as shown in the code below:
usingSystem.Reflection;...var assembliesToInclude=newList<Assembly>{typeof(CachedImage).GetTypeInfo().Assembly,typeof(FFImageLoading.Forms.Platform.CachedImageRenderer).GetTypeInfo().Assembly};Xamarin.Forms.Forms.Init(e,assembliesToInclude);
varcachedImage=newCachedImage(){HorizontalOptions=LayoutOptions.Center,VerticalOptions=LayoutOptions.Center,WidthRequest=300,HeightRequest=300,CacheDuration=TimeSpan.FromDays(30),DownsampleToViewSize=true,RetryCount=0,RetryDelay=250,BitmapOptimizations=false,LoadingPlaceholder="loading.png",ErrorPlaceholder="error.png",Source="http://loremflickr.com/600/600/nature?filename=simple.jpg"};
<?xml version="1.0" encoding="UTF-8"?><ContentPagexmlns="http://xamarin.com/schemas/2014/forms"xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="FFImageLoading.Forms.Sample.Pages.XamlSimpleExamplePage"xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"Title="Basic XAML Example"><ContentPage.Content><ffimageloading:CachedImageHorizontalOptions="Center"VerticalOptions="Center"WidthRequest="300"HeightRequest="300"DownsampleToViewSize="true"Source ="http://loremflickr.com/600/600/nature?filename=simple.jpg"></ffimageloading:CachedImage></ContentPage.Content></PFContentPage>
ImageSource property. If set, a loading placeholder is shown while loading. It supportsUriImageSource,FileImageSource andStreamImageSource.
If image download failed, or something wrong happened, it can be automatically retried. Defines retries count.
If image download failed, or something wrong happened, it can be automatically retried. Defines retry delay.
DownSample always maintain original image aspect ratio. If you set bothDownsampleWidth andDownsampleHeight, one of them is ignored.
Resizes image to defined width in pixels (or DIP ifDownsampleUseDipUnits property is set totrue. If you set this property don’t setDownsampleHeight as aspect ratio will be maintained.
Resizes image to defined height in pixels (or DIP ifDownsampleUseDipUnits property is set totrue. If you set this property don’t set `DownsampleWidth ` as aspect ratio will be maintained.
If set totrue,DownsampleWidth andDownsampleHeight properties will use DIP units (device independent points).
Images can be transformed when loading (original files won’t be modified). To use predefined transformations, just addFFImageLoading.Transformations package to your projects.
For a description of transformations see here: [Transformations Guide](https://github.com/molinch/FFImageLoading/wiki/Transformations-Guide)
You can also create own transformations, guide here: [Custom Transformations Guide](https://github.com/molinch/FFImageLoading/wiki/Custom-Transformations-Guide) and here: [Xamarin.Forms Custom Transformations Guide](https://github.com/molinch/FFImageLoading/wiki/Xamarin.Forms-Advanced#custom-transformations)
varcachedImage=newCachedImage(){HorizontalOptions=LayoutOptions.FillAndExpand,VerticalOptions=LayoutOptions.FillAndExpand,DownsampleToViewSize=true,LoadingPlaceholder="loading.png",ErrorPlaceholder="error.png",Transformations=newSystem.Collections.Generic.List<ITransformation>(){newGrayscaleTransformation(),newCircleTransformation(),},Source="http://loremflickr.com/600/600/nature?filename=simple.jpg"};
<?xml version="1.0" encoding="UTF-8"?><ContentPagexmlns="http://xamarin.com/schemas/2014/forms"xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="FFImageLoading.Forms.Sample.Pages.XamlSimpleExamplePage"xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"xmlns:fftransformations="clr-namespace:FFImageLoading.Transformations;assembly=FFImageLoading.Transformations"Title="Basic XAML Example"><ContentPage.Content><ffimageloading:CachedImageHorizontalOptions="Center"VerticalOptions="Center"WidthRequest="300"HeightRequest="300"DownsampleToViewSize="true"Source ="http://loremflickr.com/600/600/nature?filename=simple.jpg"><ffimageloading:CachedImage.Transformations><fftransformations:GrayscaleTransformation /></ffimageloading:CachedImage.Transformations></ffimageloading:CachedImage></ContentPage.Content></ContentPage>
If you use XAML-only, the linker can remove transformations. Please refer to this to resolve it:https://github.com/luberda-molinet/FFImageLoading/issues/245
On Android transparency is disabled by default. This feature is not yet implemented on iOS or Windows Phone. Transparency causes images to consume twice more memory. With this property you can enable transparency for a view. Please note: Some transformations force transparency (likeCircleTransformation) even when this option is disabled.
Sets if fade animation on image loading should be enabled or disabled.
Gets or sets the cache custom key factory. More here: [Custom cache keys](https://github.com/molinch/FFImageLoading/wiki/Xamarin.Forms-Advanced#custom-cache-keys)
For a single item some static methods exists directly on CachedImage.
CachedImage.InvalidateCache(stringkey,Cache.CacheTypecacheType,boolremoveSimilar=false)
Memory,Disk,All). Could be an url or filename / file path.If removeSimilar is set totrue then it also removes all image cache variants## Using an ImageSourceCachedImage.InvalidateCache(ImageSourcesource,Cache.CacheTypecacheType,boolremoveSimilar=false)
For multiple items please readImageService section:https://github.com/luberda-molinet/FFImageLoading/wiki/Advanced-Usage#clear-cache