How to enable/disable ffimageloading transformations in xaml/mvvm? [Xamarin forms]

Question

I have images in a listview and to start it off I grayscale them all.

<ffimageloading:CachedImage Source="{Binding Image}" x:Name = "Images">
       <ffimageloading:CachedImage.Transformations  >                     
            <fftransformations:GrayscaleTransformation/>
            <fftransformations:CircleTransformation/>
      </ffimageloading:CachedImage.Transformations>
 </ffimageloading:CachedImage>

<Button Command="{Binding ImageClick}" CommandParameter="{x:Reference Images}" BorderRadius="7" />

In my mainviewmodel i have a command.

this.ImageClick = new Command(ClickedEvent);

And here i know what image that was clicked, how can i now disable grayscale on that particular image? Without disabling the circular transformation.

void ClickedEvent (object sender)
{
    var clickedImage = sender as CachedImage;
    var rowData = clickedImage.BindingContext as MyClass;
    // Now i am unsure on how to proceed
}

public class MyClass
{
     public string Image {get;set;}
     public bool GrayScaleVisibility {get;set;}
}

Bruno Caceiro Bruno Caceiro · Accepted Answer · 2018-09-23T11:37:56

You can use bindings to transformations, and update them as you want.

Example:

        <ffimageloading:CachedImage HorizontalOptions="Center" VerticalOptions="Center"
            LoadingPlaceholder="loading.png" ErrorPlaceholder="error.png" DownsampleToViewSize="true"
            Aspect="AspectFit" HeightRequest="400" WidthRequest="400"
            Transformations="{Binding Transformations}" Source="{Binding ImageUrl}">
        </ffimageloading:CachedImage>

And the ViewModel from the Documentation- https://github.com/luberda-molinet/FFImageLoading/blob/master/samples/ImageLoading.Forms.Sample/Shared/Pages/Transformations/TransformationsSelectorPageModel.cs

How to enable/disable ffimageloading transformations in xaml/mvvm? [Xamarin forms]

1 Answers