CollectionView datatemplate animation

Question

I have a CollectionView with a DataTemplate in which there are multiple elements, one of them a label with a binding property, I can make the label appear or disappear with IsVisible, but I can't make it contain the animation because I can only access the data model and not to that specific tag, any ideas how to do it?

private void Label_PropertyChanging(object sender, PropertyChangingEventArgs e)
{
    var label = (Label)sender;
    label.FadeTo(5, 100, Easing.CubicInOut);
}

not working...

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

but I can't make it contain the animation because I can only access the data model and not to that specific tag

Try creating a custom Label class to add a bool property which could be used to set data binding, and add a propertyChanged event to detect the changes of the property. You could perform the animation via this event.

   public class CustomLabel : Label  
   {  
       static CustomLabel label;  
       public CustomLabel()  
       {  
           label = this;  
       }  
     
       public static readonly BindableProperty IsSelectedProperty = BindableProperty.Create(nameof(IsSelected), typeof(bool), typeof(CustomLabel), null, propertyChanged: OnEventNameChanged);  
       public bool IsSelected  
       {  
           set => SetValue(IsSelectedProperty, value);  
           get => (bool)GetValue(IsSelectedProperty);  
       }  
     
       private static void OnEventNameChanged(BindableObject bindable, object oldValue, object newValue)  
       {  
           var value = (bool)newValue;  
     
           if (value)  
           {  
               label.FadeTo(0, 2000, Easing.SinOut);  
           }  
           else  
           {  
               label.FadeTo(100, 0, Easing.SinIn);  
           }  
       }  
   }  

Tutorial: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/xaml/bindable-properties#detect-property-changes

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.