TreeView Expand & Collapse

This sample demonstrates ExpandAll, CollapseAll, ExpandDepth, and NodeIndent.

ExpandAll / CollapseAll

Use the buttons below to expand or collapse every node at once.

Expand All Collapse All

Animals

Mammals

Dog

Cat

Elephant

Birds

Eagle

Parrot

Fish

Salmon

Tuna

ExpandDepth

ExpandDepth controls how many levels are expanded when the tree first renders. A value of -1 (default) expands all; 0 collapses everything; 1 expands only the root level.

Root

Level 1 - A

Level 1 - B

NodeIndent

The NodeIndent property controls pixel indentation per nesting level (default 20). Use the slider to see the effect.

NodeIndent: 20 px

Code Example

<TreeView @ref="_treeView" ExpandDepth="1" NodeIndent="25">
    <Nodes>
        <TreeNode Text="Root" Value="root" Expanded="true">
            <TreeNode Text="Child" Value="child" />
        </TreeNode>
    </Nodes>
</TreeView>

@code {
    private TreeView _treeView;

    void ExpandAll()  => _treeView.ExpandAll();
    void CollapseAll() => _treeView.CollapseAll();
}