ff image loading contol template

Question

Hello

I am binding a control template, and I want to apply the greyscale transformation to an image

I tried to add a AvaliableProperty to the template, but then I don't know how to manage that in my UI

   public string TitleText  
        {  
            get => (string)GetValue(TitleTextProperty);  
            set => SetValue(TitleTextProperty, value);  
        }  
  
        public string Image  
        {  
            get => (string)GetValue(imgProperty);  
            set => SetValue(imgProperty, value);  
        }  
  
        public string CommingSoonText  
        {  
            get => (string)GetValue(CommingSoonTextProperty);  
            set => SetValue(CommingSoonTextProperty, value);  
        }  
        public bool CommingSoonFrameVisibility  
        {  
            get => (bool)GetValue(CommingSoonFrameVisibilityProperty);  
  
            set => SetValue(CommingSoonFrameVisibilityProperty, value);  
        }  
        public bool Available  
        {  
            get => (bool)GetValue(AvailableProperty);  
  
            set => SetValue(AvailableProperty, value);  
        }  
  
        public UserProgressTemplate()  
        {  
            InitializeComponent();  
        }  
  
        public static readonly BindableProperty TitleTextProperty = BindableProperty.Create(  
         nameof(TitleText),  
         typeof(string),  
         typeof(UserProgressTemplate),  
         default(string)  
       );  
  
        public static readonly BindableProperty imgProperty = BindableProperty.Create(  
            nameof(Image),  
            typeof(string),  
            typeof(UserProgressTemplate),  
            default(SvgCachedImage)  
            );  
  
        public static readonly BindableProperty CommingSoonTextProperty = BindableProperty.Create(  
            nameof(CommingSoonText),  
            typeof(string),  
            typeof(UserProgressTemplate),  
            default(string)  
            );  
  
        public static readonly BindableProperty CommingSoonFrameVisibilityProperty = BindableProperty.Create(  
         nameof(CommingSoonFrameVisibility),  
         typeof(bool),  
         typeof(UserProgressTemplate),  
         default(bool)  
         );  
  
        public static readonly BindableProperty AvailableProperty = BindableProperty.Create(  
        nameof(Available),  
        typeof(bool),  
        typeof(UserProgressTemplate),  
        default(bool)  
        );  
    }  
}  

and here I use the template

        <temp:UserProgressTemplate  
            CommingSoonFrameVisibility="False"  
            Image="stats_icon.svg"  
            IsEnabled="False"  
            TitleText="Estadisticas" />  
  
        <temp:UserProgressTemplate  
            Grid.Column="1"  
            xct:TouchEffect.Command="{Binding NavigateHistoryCommand}"  
            CommingSoonFrameVisibility="False"  
            Image="history_icon.svg"  
            TitleText="Historial" />  

//this one should apply the transformation

        <temp:UserProgressTemplate  
            Grid.Row="1"  
            CommingSoonFrameVisibility="True"  
            CommingSoonText="Pronto"  
            Available="True"  
            Image="progress_icon.svg"  
            TitleText="Progreso" />  

//this one should apply the transformation

        <temp:UserProgressTemplate  
            Grid.Row="1"  
            Grid.Column="1"  
            CommingSoonFrameVisibility="True"  
            CommingSoonText="Pronto"  
            Image="ranking_icon.svg"  
            TitleText="Ranking" />  

I also tried ti manage that with a trigger

<StackLayout BackgroundColor="{StaticResource PrimaryLight}" VerticalOptions="FillAndExpand">  
  
                        <ff:CachedImage Source="{TemplateBinding Image}" Aspect="AspectFill" VerticalOptions="FillAndExpand" HeightRequest="120" DownsampleToViewSize="True">  
  
                            <ff:CachedImage.Triggers>  
  
                                <DataTrigger Binding="{TemplateBinding Available}" Value="False" TargetType="ff:CachedImage">  
                                    <Setter Property="Transformations">  
                                        <Setter.Value>  
                                            <generic:List x:TypeArguments="work:ITransformation"> // Line error  
                                                <transformations:GrayscaleTransformation />  
                                            </generic:List>  
                                        </Setter.Value>  
                                    </Setter>  
                                </DataTrigger>  
  
                            </ff:CachedImage.Triggers>  
  
                        </ff:CachedImage>  

I am trying to achieve this

Answer 1

Hello EduardoGomez-1870,​

Welcome to our Microsoft Q&A platform!

If the FFImageLoading doesn't support to work with Triggers, you could create an attached behavior to update the transfromation.

Here is the sample code, you could refer to:

   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.Transformations = new List<ITransformation>()  
               {  
                   new GrayscaleTransformation()  
               };  
           }  
           else  
           {  
               cachedImage.Transformations = new List<ITransformation>()  
               {  
               };  
           }  
       }  
   }  

Set binding to the attach behavior property

   <ffimageloading:CachedImage x:Name="cachedImage" Source="yali" local:GrayscaleTransformationBehavior.AttachBehavior="{Binding Status}">  
   </ffimageloading:CachedImage>  

Best Regards,

Jarvan Zhang

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.