Category / Section
How to swipe an item like Outlook or Gmail application in xamarin.forms listview?
2 mins read
Listview allows you swipe and delete an item like Outlook and Gmail applications. To delete an item by swiping, you need to set the SwipeOffset property as width of the listview and then remove the item from collection.
xaml
<ContentPage xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"> <syncfusion:SfListView x:Name="listView" AllowSwiping="True" SelectionMode="None" SwipeThreshold="30" ItemSize="100"> <syncfusion:SfListView.RightSwipeTemplate> <DataTemplate x:Name="RightSwipeTemplate"> <Grid BackgroundColor="#d3d3d3" HorizontalOptions="Fill" VerticalOptions="Fill"> <Label Text="Archive" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/> </Grid> </DataTemplate> </syncfusion:SfListView.RightSwipeTemplate> <syncfusion:SfListView.LeftSwipeTemplate> <DataTemplate x:Name="LeftSwipeTemplate"> <Grid BackgroundColor="#DC595F" HorizontalOptions="Fill" VerticalOptions="Fill"> <Label Text="Delete" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/> </Grid> </DataTemplate> </syncfusion:SfListView.LeftSwipeTemplate> </syncfusion:SfListView> </ContentPage>
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; }
Layout the swiping item to the whole width of the listview for both the left and right directions in the SwipeEnded event using the SwipeOffset argument in the SwipeEndedEventArgs.
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); }); } }
Output:
Left Swipe
Right swipe
Sample: Swipe like Outlook application.