Swipe Gestures in Tree View for .NET MAUI

• Jul 03, 2024

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).

To specify swipe item content, use properties available in the TreeNodeSwipeItem class.

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>