locked
FFImageLoading(CachedImage) Trigger RRS feed

  • Question

  • User236903 posted

    Hello and hope doing well. Ii there any way to trigger CachedImage Transformation? Example, i have a property status. If status value is False to transform cached image to grayscale. I have already tried this, but unfortunately it doesn't change my image.

    <ff:CachedImage Source="{Binding ImageUrl}" HeightRequest="{Binding ImageDynamicHeight}"> <ff:CachedImage.Triggers> <DataTrigger TargetType="ff:CachedImage" Binding="{Binding Status}" Value="True"> <Setter Property="Transformations"> <Setter.Value> <ffTrans:GrayscaleTransformation /> </Setter.Value> </Setter> </DataTrigger> </ff:CachedImage.Triggers> </ff:CachedImage>

    Any ideas how can i make this to work?

    Thursday, September 17, 2020 6:14 AM

Answers

  • User379860 posted

    I test your code, I got the same result as you get.

    But I write a workaround to fix this issue.

    First of all, we can write a Attached Behaviors like following code.

    ``` using FFImageLoading.Forms; using FFImageLoading.Transformations; using System; using System.Collections.Generic; using System.Text; using Xamarin.Forms;

    namespace FFImageLoadingDemo { public static class GrayscaleTransformationBehavior { public static readonly BindableProperty AttachBehaviorProperty = BindableProperty.CreateAttached( "AttachBehavior", typeof(bool), typeof(GrayscaleTransformationBehavior), true, propertyChanged: OnAttachBehaviorChanged);

        public static bool GetAttachBehavior(BindableObject view)
        {
            return (bool)view.GetValue(AttachBehaviorProperty);
        }
    
        public static void SetAttachBehavior(BindableObject view, bool value)
        {
            view.SetValue(AttachBehaviorProperty, value);
        }
    
        static void OnAttachBehaviorChanged(BindableObject view, object oldValue, object newValue)
        {
            var cachedImage = view as CachedImage;
            if (cachedImage == null)
            {
                return;
            }
    
            bool attachBehavior = (bool)newValue;
    
    
            if (!attachBehavior)
            {
                cachedImage.BindingContextChanged += CachedImage_BindingContextChanged; ;
            }
            else
            {
                cachedImage.BindingContextChanged -= CachedImage_BindingContextChanged;
            }
    
              void CachedImage_BindingContextChanged(object sender, EventArgs e)
            {
    
                var grayscaleTransformation = new GrayscaleTransformation();
                cachedImage.Transformations.Add( grayscaleTransformation);
            }
        }       
    }
    

    }

    ```

    Then use this Behavior to CachedImage. ``` local:GrayscaleTransformationBehavior.AttachBehavior="{Binding Status}">

        </ff:CachedImage>
    

    ```

    Here is running GIF.

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Thursday, September 17, 2020 8:47 AM

All replies

  • User379860 posted

    I test your code, I got the same result as you get.

    But I write a workaround to fix this issue.

    First of all, we can write a Attached Behaviors like following code.

    ``` using FFImageLoading.Forms; using FFImageLoading.Transformations; using System; using System.Collections.Generic; using System.Text; using Xamarin.Forms;

    namespace FFImageLoadingDemo { public static class GrayscaleTransformationBehavior { public static readonly BindableProperty AttachBehaviorProperty = BindableProperty.CreateAttached( "AttachBehavior", typeof(bool), typeof(GrayscaleTransformationBehavior), true, propertyChanged: OnAttachBehaviorChanged);

        public static bool GetAttachBehavior(BindableObject view)
        {
            return (bool)view.GetValue(AttachBehaviorProperty);
        }
    
        public static void SetAttachBehavior(BindableObject view, bool value)
        {
            view.SetValue(AttachBehaviorProperty, value);
        }
    
        static void OnAttachBehaviorChanged(BindableObject view, object oldValue, object newValue)
        {
            var cachedImage = view as CachedImage;
            if (cachedImage == null)
            {
                return;
            }
    
            bool attachBehavior = (bool)newValue;
    
    
            if (!attachBehavior)
            {
                cachedImage.BindingContextChanged += CachedImage_BindingContextChanged; ;
            }
            else
            {
                cachedImage.BindingContextChanged -= CachedImage_BindingContextChanged;
            }
    
              void CachedImage_BindingContextChanged(object sender, EventArgs e)
            {
    
                var grayscaleTransformation = new GrayscaleTransformation();
                cachedImage.Transformations.Add( grayscaleTransformation);
            }
        }       
    }
    

    }

    ```

    Then use this Behavior to CachedImage. ``` local:GrayscaleTransformationBehavior.AttachBehavior="{Binding Status}">

        </ff:CachedImage>
    

    ```

    Here is running GIF.

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Thursday, September 17, 2020 8:47 AM
  • User236903 posted

    Thank you LeonLu!! Quick and powerful support! Your example works perfect! Thank you again!

    Thursday, September 17, 2020 6:45 PM