SfListView Animation

[Eric Hamrick]

Its it possible to animate the height of SfListView item as its being added/removed from the listview in the attached animated gif?  Also is it possible to animate the reordering of the items programatically?  

Thank you

Attachment: listview_11b90e94.zip

[Gnana Priya Namasivayam]

Hi Eric, 

 

Thanks for contacting Syncfusion support. 

 

#To animate on appearing 

 

We would like to inform you that you can animate the item while adding like in below documentation. 

 

https://help.syncfusion.com/xamarin/sflistview/viewappearance?_ga=2.31047359.1059838038.1579491335-577930022.1562392219#item-animation-on-appearing 

 

#To animate on deleting 

 

We would like to inform that you will get e.ItemData in ItemDisappearingEventArgs only after item is completely removed out of view and you cannot animate item using Disappearing event. You can only achieve your requirement to animate item before delete like below. We have attached the tested sample for your reference, please find them.  

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/listview-sample-1680401880   

 

 

Xaml  

<listView:SfListView.ItemTemplate>  

       <DataTemplate>  

          <Grid x:Name="itemTemplateGrid">  

              <Grid.GestureRecognizers>  

                 <TapGestureRecognizer Command="{Binding Path=BindingContext.OnTap, Source={x:Reference listView}}" CommandParameter="{x:Reference itemTemplateGrid}"/>  

              </Grid.GestureRecognizers>  

              <Grid.RowDefinitions>  

                  <RowDefinition Height="*" />  

                  <RowDefinition Height="1" />  

              </Grid.RowDefinitions>  

   

              <Grid>  

                 <Label LineBreakMode="NoWrap"  

                        Text="{Binding ContactName}">  

                 </Label>  

                 <Label Grid.Row="1"  

                         Grid.Column="0"  

                         LineBreakMode="NoWrap"  

                         Text="{Binding ContactNumber}"  

                         TextColor="Teal">  

                 </Label>  

            </Grid>  

        </DataTemplate>  

</listView:SfListView.ItemTemplate>  

   

ViewModel.cs  

   

public class ContactsViewModel  

{  

        public Command<object> OnTap { get; set; }  

        public ObservableCollection<Contacts> CustomerDetails  

        {  

            get;  

            set;  

        }  

        private Random random = new Random();  

   

        public ContactsViewModel()  

        {  

            this.GetContactDetails(20);  

            OnTap = new Command<object>(OnTapped);  

        }  

        private async void OnTapped(object obj)  

        {  

            var itemTemplateGrid = obj as Grid;  

            var item = itemTemplateGrid.BindingContext as Contacts;  

   

            itemTemplateGrid.Opacity = 0;  

            await itemTemplateGrid.FadeTo(1, 1000, Easing.SinInOut);  

   

            this.CustomerDetails.Remove(item);  

        }  

}  

 

 

 

As of now, we don’t have support by default. We have considered this and logged feature request for the same and added this feature request to our database. You can now track the status of this feature request here,  

 

Feature Link: https://www.syncfusion.com/support/directtrac/features/XAMARIN-12699 

 

At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technological feasibility, and customer interest. We will let you know when this feature is implemented.   

  

 

#To animate on re-ordering 

 

You can also customize animate items while dragging in sample level itself. But we have implemented listview using Virtualization architecture. Animating items while re-ordering items will affect performance while re-using listview items. We donot recommend this behavior meanwhile, we have update you the model sample to achieve this requirement for your reference. Please find the sample form below. 

 

DragAnimation: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DragAnimation1128425555  

 

Please let us know if you need any further assistance. 

 

Regards, 

Gnana Priya N