Swipe Gestures in Collection View for .NET MAUI

• Sep 03, 2025
• 6 minutes to read

You can extend CollectionView’s UI with additional elements that appear when a user swipes an item from left to right or from right to left and perform custom actions on tap. For the Horizontal orientation, the CollectionView supports top-to-bottom and bottom-to-top swipe gestures for items.

View Example: CollectionView - Swipe Actions

To implement this functionality, set the DXCollectionView.ItemTemplate property to a data template that contains a SwipeContainer object and specify this container’s properties as follows:

1. Assign a View class descendant to the ItemView property to define the appearance of CollectionView items.

2. Populate StartSwipeItems and EndSwipeItems collections with swipe items. A swipe item is a visual element that appears on the left or right side of a data item when a user swipes the item, and performs a custom action on tap. If the CollectionView is horizontally oriented, it displays swipe items on the top or bottom of data items. You can use the Size property to specify a swipe item’s width (for vertical orientation of the collection view) or height (for horizontal orientation). Swipe items can be of the following types:

3. Use the FullSwipeMode property to specify whether the CollectionView should perform the first action from the StartSwipeItems collection and the last action from EndSwipeItems in response to a full swipe across a data item.

If you want to show or hide swipe items by a specified condition, handle the SwipeItemShowing event.

Example

This example shows how to define the following two swipe actions for items of the vertical CollectionView bound to the list of tasks:

• Done / To Do
  When a user swipes an item from left to right, this button appears on the left side of the item and changes the task state on tap (colors in-progress tasks green, and completed tasks gray). The button caption depends on the task state.
• Delete
  When a user swipes an item from right to left, this button appears on the right side of the item and removes the task on tap.

1. Create the ViewModel class with the Data property that returns a collection of tasks. This collection is a data source for the CollectionView.

2. Set the ContentPage’s BindingContext to a ViewModel object.

3. Add a DXCollectionView object to the page and bind its ItemsSource property to the view model’s Data property.

4. Define a template for CollectionView items:

5. Specify swipe actions: