DataGridView.SwipeItemAppearance Property

Gets or sets the appearance settings that are applied to the current DataGridView‘s swipe items. This is a bindable property.

Namespace: DevExpress.Maui.DataGrid

Assembly: DevExpress.Maui.DataGrid.dll

NuGet Package: DevExpress.Maui.DataGrid

Declaration

public SwipeItemAppearance SwipeItemAppearance { get; set; }

Property Value

Type	Description
SwipeItemAppearance	The appearance settings.

Remarks

Refer to the following topic to see the available appearance properties: SwipeItemAppearance members.

The SwipeItemAppearance class properties customize the following appearance parameters of a swipe item:

Settings that the SwipeItemAppearance object contains are applied to all swipe items of the grid. To customize the width and colors of an individual swipe item, use the SwipeItem object’s Width and BackgroundColor/FontColor properties.

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