Articles in this section
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.

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied