question

EduardoGomez-1870 avatar image
0 Votes"
EduardoGomez-1870 asked JarvanZhang-MSFT answered

ff image loading contol template

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


dotnet-xamarinforms
capture.png (72.5 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

JarvanZhang-MSFT avatar image
0 Votes"
JarvanZhang-MSFT answered

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.


5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.