Skip to main content

Collapse and Expand Nodes in Tree View for .NET MAUI

  • 2 minutes to read

You can tap a node expand button or node content to collapse or expand the node. The following code snippet displays and configures node expand buttons within the DXTreeView control:

DevExpress Tree View for MAUI - Expand Button

<dx:DXTreeView ...
    ExpandActionTarget="Node" 
    AutoExpandMode="AllNodes"
    ShowExpandButtons="True"
    ExpandNodesOnFiltering="True">
    ...
</dx:DXTreeView>

Use the following API to specify how to collapse and expand nodes:

ExpandActionTarget
Gets or sets a value that indicates how to expand and collapse nodes. This is a bindable property.
AutoExpandMode
Gets or sets whether to expand nodes automatically when the DXTreeView is loaded or the DXTreeView.ItemsSource property is set to a new instance. This is a bindable property.
ShowExpandButtons
Gets or sets whether to show expand buttons. This is a bindable property.
ExpandNodesOnFiltering
Gets or sets whether to expand a node if its child nodes contain a search string. This is a bindable property.

Collapse and Expand Nodes at Runtime

The DXTreeView exposes an API that allows you to collapse/expand nodes at runtime:

CollapseAllNodes()
Collapses all nodes.
ExpandAllNodes()
Expands all nodes.
ExpandToLevel(Int32)
Expands parent nodes down to the specified nesting level.

Respond to User Actions when Collapsing and Expanding Nodes

The DXTreeView ships with the following events that fire before/after a node is collapsed/expanded:

NodeCollapsing
Occurs before a node is collapsed.
NodeCollapsed
Occurs after a node is collapsed.
NodeExpanding
Occurs before a node is expanded.
NodeExpanded
Occurs after a node is expanded.

You can handle these events to cancel collapse and expand operations, display a notification, and so on.

Change Expand Button Appearance

The DXTreeView control allows you to change expand button appearance. For more information, refer to the following help topic: Change Expand Button Appearance.