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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Swipe the List Item off the List

Thread ID:

Created:

Updated:

Platform:

Replies:

141074 Nov 22,2018 07:07 AM UTC Nov 26,2018 05:12 AM UTC Xamarin.Forms 3
loading
Tags: SfListView
Damien Turnbull
Asked On November 22, 2018 07:07 AM UTC

Hi

Am not sure if you've used the Outlook app but it does a nice job of swiping emails to then allow them to be deleted (or archived).

Whilst we've implemented this functionality to some degree, the Outlook app does a good job in that once you've swiped X amount of pixels the list then auto continues the swipe until the item is moved off the edge of the screen and then removed from the list.

Is there a way we can implement this functionality using the SfListView?

Thanks

Jayaleshwari N [Syncfusion]
Replied On November 23, 2018 11:32 AM UTC

Hi Damien,  
  
Thanks for using Syncfusion products.  
  
We have checked the reported query “Want to swipe like Outlook” from our end. We have prepared the sample to achieve your requirement. To swipe an item indefinitely, you need to set the SwipeOffset property by considering the width/height of the SfListView with Orientation accordingly as like following code example.  
  
Code Example[C#]:  
  
ListView.PropertyChanged += ListView_PropertyChanged;  
  
private void ListView_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)  
    {  
        if (e.PropertyName == "Width" && ListView.Orientation == Orientation.Vertical && ListView.SwipeOffset != ListView.Width)  
            ListView.SwipeOffset = ListView.Width;  
        else if (e.PropertyName == "Height" && ListView.Orientation == Orientation.Horizontal && ListView.SwipeOffset != ListView.Height)  
            ListView.SwipeOffset = ListView.Height;  
    }  
  
You can layout the swiping item to the whole width of the listview for right and left direction in the SwipeEnded event using SwipeOffset argument in theSwipeEndedEventArgs as like following code example.  
  
ListView.SwipeEnded += ListView_SwipeEnded;  
  
private void ListView_SwipeEnded(object sender, SwipeEndedEventArgs e)  
{  
    SwipingViewModel.ItemIndex = e.ItemIndex;  
  
    if (e.SwipeDirection == Syncfusion.ListView.XForms.SwipeDirection.Right)  
    {  
        e.SwipeOffset = ListView.Width;  
        Device.BeginInvokeOnMainThread(async () =>  
        {  
            await Task.Delay(500);  
            SwipingViewModel.InboxInfo.Remove(e.ItemData as ListViewInboxInfo);  
        });  
    }  
    else if (e.SwipeDirection == Syncfusion.ListView.XForms.SwipeDirection.Left)  
    {  
        e.SwipeOffset = ListView.Width;  
        Device.BeginInvokeOnMainThread(async () =>  
        {  
            await Task.Delay(500);  
            SwipingViewModel.InboxInfo.Remove(e.ItemData as ListViewInboxInfo);  
        });  
    }  
}  
  
For your reference we have attached the sample and you can download it form the below link.  
  
  
Regards,  
Jayaleshwari N 


Damien Turnbull
Replied On November 25, 2018 11:31 PM UTC

This works great!

Thanks a lot for your help. I really appreciate it.

Damien

Jayaleshwari N [Syncfusion]
Replied On November 26, 2018 05:12 AM UTC

Hi Damien, 
 
Thanks for the update. Please get in touch if you would require further assistance. 
 
Regards, 
Jayaleshwari 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