Swipe Actions in .NET MAUI Data Grid

• Jan 17, 2023
• 3 minutes to read

You can extend DataGridView UI with swipe items – visual elements that appear on the left or right side of a data row when a user swipes the row – and perform custom actions on tap.

Do the following to perform custom actions when a user swipes a grid row:

Add swipe items to the grid

Add SwipeItem objects to the grid’s StartSwipeItems and EndSwipeItems collections to display swipe items on the left and right side of a row when a users swipes the row from left to right or from right to left.

Customize swipe item appearance

Default swipe items are displayed as buttons. To change the appearance of swipe items, use the SwipeItem class properties:

• Caption, Image, Width, BackgroundColor/FontColor – Specify a caption, image, width, and colors for a swipe button.

  If you add multiple swipe buttons to the grid and need to apply the same appearance settings to all of them, assign a SwipeItemAppearance object with the specified properties to DataGridView.SwipeItemAppearance.

• Template – Defines a custom view for a swipe item.

  To specify a common template applied to all swipe items of the grid, use the DataGridView.SwipeItemTemplate property.

Assign actions to swipe items

You can specify an action that a swipe item performs when a user taps it in one of two ways:

• Handle the SwipeItem.Tap event.
• Define a command in a view model and bind this command to the SwipeItem.Command property. In DataGridView, the CommandParameter property is hidden and its value is set to a swiped item internally. You can access the item in the command if you define the command with a parameter.

The grid performs the first action from its StartSwipeItems and the last action from EndSwipeItems in response to a full swipe across a data row from left to right or from right to left, respectively. To change this behavior, use the DataGridView.FullSwipeMode property.

The DataGridView.SwipeItemShowing event fires when a swipe item is about to be shown, and allows you to cancel the action.

Limitation

If you place the DataGridView control in the TabView control, TabView handles swipes instead of DataGridView. Set the TabView.SwipeEnabled property to false to disable TabView swipes and enable DataGridView swipes.

Example

This example shows how to define the following swipe actions for rows of a data grid bound to a collection of orders:

• Display information on a customer – When a user swipes a data row from left to right, the Customer button appears on the left side of the row.
• Remove an order – When a user swipes a data row from right to left, the Delete button appears on the right side of the row.

1. Add a Customer swipe item to the DataGridView.StartSwipeItems collection, and a Delete swipe item to DataGridView.EndSwipeItems.

2. Specify a background color and image for each swipe item.
   Add image files (.svg) to the project and set their Build Action property to MauiImage.

3. Handle the SwipeItem.Tap event to assign custom actions to swipe buttons.

4. Use the DataGridView.SwipeItemAppearance property to set the same width for both swipe buttons.

XAML

<dxg:DataGridView x:Name="grid" ItemsSource="{Binding Orders}">
    <!-- ... -->
    <dxg:DataGridView.StartSwipeItems>
        <dxg:SwipeItem Caption="Customer" BackgroundColor="#797bff" Image="name.svg"
                       Tap="Swipe_ShowCustomerInfo" />
    </dxg:DataGridView.StartSwipeItems>

    <dxg:DataGridView.EndSwipeItems>
        <dxg:SwipeItem Caption="Delete" BackgroundColor="#ff3b30" Image="delete.svg"
                       Tap="Swipe_Delete"/>
    </dxg:DataGridView.EndSwipeItems>

    <dxg:DataGridView.SwipeItemAppearance>
        <dxg:SwipeItemAppearance Width="100"/>
    </dxg:DataGridView.SwipeItemAppearance>
</dxg:DataGridView>

C#

using Microsoft.Maui.Controls;
using DevExpress.Maui.DataGrid;
// ...

private void Swipe_ShowCustomerInfo(object sender, SwipeItemTapEventArgs e) {
    var customer = (e.Item as Order).Customer;
    string customerName = customer.Name;
    string customerPhone = customer.Phone;
    DisplayAlert("Customer", "Name: " + customerName + "\n" + "Phone: " + customerPhone, "OK");
}

private void Swipe_Delete(object sender, SwipeItemTapEventArgs e) {
    grid.DeleteRow(e.RowHandle);
}

View Example: Define Swipe Actions for Data Rows