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

Swipe the List Item off the List

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

3 Replies

JN Jayaleshwari N Syncfusion Team November 23, 2018 06:32 AM

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 



DT Damien Turnbull November 25, 2018 06:31 PM

This works great!

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

Damien


JN Jayaleshwari N Syncfusion Team November 26, 2018 12:12 AM

Hi Damien, 
 
Thanks for the update. Please get in touch if you would require further assistance. 
 
Regards, 
Jayaleshwari N. 


Loader.
Live Chat Icon For mobile
Up arrow icon