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>

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

Comments (0)

How to swipe an item like Outlook or Gmail application in xamarin.forms listview?

Access denied