How to do animation to my xamarin listview before reordering items from asc to desc

Question

Hello i have a listview and i want to do an animation after i click to the sort button
so i want the animation to appear before reordering the items from asc to desc or from desc to asc

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

You can add animation to the ViewCell's Appearing Event.

   <ListView.ItemTemplate>  
                   <DataTemplate >  
     
                       <ViewCell Appearing="ViewCell_Appearing" >  

Here is animation in ViewCell_Appearing event in the background code.

   private async void ViewCell_Appearing(object sender, EventArgs e)  
           {  
             //  int i = e.ItemIndex;  
               int y;  
     
               y = 2000;  
               for (int d = 0; d < i; d++)  
               {  
                   int z = d + 1;  
                   y = y + (400 / (z * z));  
               }  
     
               uint x = uint.Parse(y.ToString());  
               var cell = sender as ViewCell;  
               cell.View.TranslationY = Device_Height / Device_Scale;  
               await cell.View.TranslateTo(0, 0, x, Easing.CubicOut);  
           }  

When I click the Button called Desc, I execute an Command in the ViewModel. When I make re-add data, I clear ObservableCollection, then re-add it. Appearing will execute, and animation will show it again.

   public ObservableCollection<Person> persons { get; set; }  
           public ICommand DescCommand { protected set; get; }  
           public PersonsViewModel(INavigation navigation, IUserDialogs dialogs, ContentPage page):base(dialogs)  
           {  
               LableText = "&#xf2ed;";  
               persons = new ObservableCollection<Person>();  
               persons.Add(new Person() { Name = "Leon1", Image = "unfavourite.png", Count = 1, Isfavourite = false });  
               persons.Add(new Person() { Name = "Leon2", Image = "unfavourite.png", Count = 2, Isfavourite = false });  
               persons.Add(new Person() { Name = "Leon3", Image = "unfavourite.png", Count = 3, Isfavourite = false });  
               persons.Add(new Person() { Name = "Leon4", Image = "unfavourite.png", Count = 4, Isfavourite = false });  
               persons.Add(new Person() { Name = "Leon5", Image = "unfavourite.png", Count = 5, Isfavourite = false });  
     
     
               DescCommand = new Command(() =>  
               {  
                   persons.Clear();  
                   persons.Add(new Person() { Name = "Leon5", Image = "unfavourite.png", Count = 5, Isfavourite = false });  
                   persons.Add(new Person() { Name = "Leon4", Image = "unfavourite.png", Count = 4, Isfavourite = false });  
                   persons.Add(new Person() { Name = "Leon3", Image = "unfavourite.png", Count = 3, Isfavourite = false });  
                   persons.Add(new Person() { Name = "Leon2", Image = "unfavourite.png", Count = 2, Isfavourite = false });  
                   persons.Add(new Person() { Name = "Leon1", Image = "unfavourite.png", Count = 1, Isfavourite = false });              
     
               });  

Here is running screenshot.

Best Regards,

Leon Lu

---

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.

Answer 2