Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Swipe Gestures in Tree View for .NET MAUI

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

DevExpress Tree View for .NET MAUI - Swipe Items

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:

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