ff image loading contol template

Eduardo Gomez 3,426 Reputation points
2021-09-28T10:14:53.5+00:00

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 achieve135890-capture.png this

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,326 questions
0 comments No comments
{count} votes

Accepted answer
  1. JarvanZhang 23,951 Reputation points
    2021-09-29T06:31:50.237+00:00

    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.

    0 comments No comments

0 additional answers

Sort by: Most helpful