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:

ExpandActionTargetGets or sets a value that indicates how to expand and collapse nodes. This is a bindable property.AutoExpandModeGets 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.ShowExpandButtonsGets or sets whether to show expand buttons. This is a bindable property.ExpandNodesOnFilteringGets 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:

NodeCollapsingOccurs before a node is collapsed.NodeCollapsedOccurs after a node is collapsed.NodeExpandingOccurs before a node is expanded.NodeExpandedOccurs 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.