We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

SfListView Animation

Thread ID:

Created:

Updated:

Platform:

Replies:

150870 Jan 22,2020 01:58 PM UTC Jan 23,2020 08:52 AM UTC Xamarin.Forms 1
loading
Tags: SfListView
Eric Hamrick
Asked On January 22, 2020 01:58 PM UTC

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 [Syncfusion]
Replied On 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 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon