1. Home
  2. Forum
  3. Xamarin.Forms
  4. SfListView Animation

SfListView Animation

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

1 Reply
GP Gnana Priya Namasivayam Syncfusion Team January 23, 2020 08:52 AM UTC

 
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. 
 
 
#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.  
 
 
 
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,  
 
 
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. 
 
 
Please let us know if you need any further assistance. 
 
Regards, 
Gnana Priya N 
 


Loader.
Up arrow icon