How to reuse cached result in the FFImageLoading on Xamarin.Forms?

Question

I'm trying to load and resize and transform the image in the background while the application main data is loading. I need to do this because some of images are too big and I have a lot of them, so, I thing it's better to prepare all images before showing.

I execute this code in the background: Load the image from Uri:

ImageService.Instance.LoadUrl(uri, TimeSpan.FromDays(60))
            .DownSample(100, 100, false).Preload();

Load the same image and apply additional transformation to it:

ImageService.Instance.LoadUrl(uri, TimeSpan.FromDays(60))
            .DownSample(100, 100, false).Transform(BlurredTransformHere).Preload();

How I could reuse later the result from these cache queries in the CachedImage?

 <forms:CachedImage
    x:Name="Blured"
    Aspect="Fill"
    CacheType="All"
    HorizontalOptions="Fill"
    Opacity="0.3"
    VerticalOptions="Fill"/>     

 <forms:CachedImage
    x:Name="Normal"
    CacheType="All"
    Aspect="AspectFit"
    HorizontalOptions="CenterAndExpand"
    VerticalOptions="CenterAndExpand"/>

Should I add the same config parameters as in the query for each CachedImage? e.g. add DownsampleHeight&W and BlurredTransformation with the same parameters value?

score 0 · Answer 1 · answered Jun 25 '17 at 22:52

The Transformations do not affect the cached version of your Image, they just change the way the imageSource is rendered.

In your case for the Image preloading you could apply the DownSample and later use the transformation in your CachedImage control.

<forms:CachedImage
    x:Name="Blured"
    Aspect="Fill"
    CacheType="All"
    HorizontalOptions="Fill"
    Opacity="0.3"
    Source="YOUR_SOURCE_URI"
    VerticalOptions="Fill">
        <forms:CachedImage.Transformations>
            <fftransformations:BlurredTransformation Radius="30"/>
        </forms:CachedImage.Transformations>
 </forms:CachedImage>

How to reuse cached result in the FFImageLoading on Xamarin.Forms?

1 Answers1