Collapse and Expand Nodes in Tree View for .NET MAUI

• Jul 03, 2024
• 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:

XAML

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