Swipe Gestures in Tree View for .NET MAUI

• Sep 03, 2025
• 2 minutes to read

The DXTreeView control can perform custom actions when a user swipes a node from left to right or from right to left.

To implement this functionality, set the DXTreeView.ItemTemplate property to a data template that contains a TreeNodeView control.

Use StartSwipeItems and EndSwipeItems properties to specify which items are available when users swipe nodes. To configure full-swipe actions, set the FullSwipeMode to one of the following values:

• None — a full swipe is disabled.
• Start — a full swipe across the node from left to right runs the first action from the StartSwipeItems collection.
• End — a full swipe across the row from right to left runs the last action from the EndSwipeItems collection.
• Both — full swipe operations are available in both directions (see Start and End values).

Use properties available in the TreeNodeSwipeItem class to specify swipe item content.

To assign an action to a swipe item, define a command in a view model and bind this command to the swipe item’s Command property, or handle the Tap event. Enable the RaiseSwipeItemTapImmediately property to raise the Tap event and execute the Command before a swipe item animation starts.

The following code snippet deletes a node after a user swipes it from right to left:

XAML

<ContentPage ...
            xmlns:dx="http://schemas.devexpress.com/maui">
    <dx:DXTreeView x:Name="treeView" ItemsSource="{Binding Nodes}">
        <dx:DXTreeView.ItemTemplate>
            <DataTemplate>
                <dx:TreeNodeView 
                    FullSwipeMode="None">
                    <dx:TreeNodeView.EndSwipeItems>
                    <dx:TreeNodeSwipeItem 
                        Content="Delete"
                        Icon="delete"
                        BackgroundColor="{dx:ThemeColor Error}"
                        TextColor="{dx:ThemeColor OnError}"
                        IconColor="Bold{dx:ThemeColor OnError}"
                        Command="{Binding TreeView.BindingContext.DeleteCommand}"/>
                    </dx:TreeNodeView.EndSwipeItems>
                </dx:TreeNodeView>
            </DataTemplate>
        </dx:DXTreeView.ItemTemplate>
    </dx:DXTreeView>
</ContentPage>