Expand and Collapse in .NET MAUI TreeView (SfTreeView)

The TreeView allows you to expand and collapse the nodes through user interaction or programmatically.

Expand Action Target

Expanding and collapsing of nodes can be performed by tapping the expander view or by setting the ExpandActionTarget property in both the expander view and content view.

<syncfusion:SfTreeView x:Name="treeView" ExpandActionTarget="Node"/>
// Extends by tapping both the expander and content views.
treeView.ExpandActionTarget = TreeViewExpandActionTarget.Node;

Auto Expand Mode

By default, the items in the treeview will be in a collapsed state. You can define how the nodes should be expanded when loading the TreeView by using the AutoExpandMode property.

The AutoExpandMode property is only applicable in bound mode. In the unbound mode, you need to set the IsExpanded property to true when creating the nodes in order for them to be in the expanded state when the TreeView is loaded.

  • None : All items are collapsed when loaded.
  • RootNodesExpanded : Expands only the root item when loaded.
  • AllNodesExpanded : Expands all the items when loaded.

Programmatic Expand and Collapse

TreeView allows programmatic expansion and collapse based on the TreeViewNode and level using the following methods.

// Expands all the nodes at root level '0'.
treeView.ExpandNodes(0);

// Collapses all the nodes at root level '0'.
treeView.CollapseNodes(0);

// Expand a particular node.
treeView.ExpandNode(node);

// Expand a particular node.
treeView.CollapseNode(node);

Expand and Collapse all the nodes

Programmatically expand and collapse all the TreeViewNode at runtime using the SfTreeView.ExpandAll and SfTreeView.CollapseAll methods.

//Expands all the nodes.
treeView.ExpandAll();

//Collapses all the nodes.
treeView.CollapseAll();

Expand and Collapse using Keyboard

TreeView allows the expansion and collapse of the nodes using the right and left arrow keys. To expand a node, press the right arrow key; to collapse a node, press the left arrow key on the focused item.

Binding IsExpanded property in unbound mode

In unbound mode, the TreeView enables the binding of the IsExpanded property to TreeViewNode.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.TreeView;assembly=Syncfusion.Maui.TreeView"
             xmlns:treeviewengine="clr-namespace:Syncfusion.TreeView.Engine;assembly=Syncfusion.Maui.TreeView"
             xmlns:local="clr-namespace:IsExpanded"
             x:Class="IsExpanded.MainPage">
    
    <ContentPage.BindingContext>
        <local:ViewModel x:Name="viewmodel"/>
    </ContentPage.BindingContext>

    <ContentPage.Content>
        <syncfusion:SfTreeView x:Name="treeview">
            <syncfusion:SfTreeView.Nodes>
                <treeviewengine:TreeViewNode Content="United States of America" 
                                             IsExpanded="{Binding Path=IsExpanded,Source={x:Reference viewmodel}}">
                    <treeviewengine:TreeViewNode.ChildNodes>
                        <treeviewengine:TreeViewNode Content="New York" 
                                                     IsExpanded="{Binding Path=IsExpanded,Source={x:Reference viewmodel}}"/>
                    </treeviewengine:TreeViewNode.ChildNodes>
                </treeviewengine:TreeViewNode>
            </syncfusion:SfTreeView.Nodes>
        </syncfusion:SfTreeView>
    </ContentPage.Content>
</ContentPage>
public class ViewModel : INotifyPropertyChanged
{  
    private bool isExpanded;

    //Implementation of IsExpanded property 
    public bool IsExpanded
    {
        get { return isExpanded; }
        set
        {
            isExpanded = value;
            OnPropertyChanged("IsExpanded");
        }
    }

    public ViewModel()
    {
        IsExpanded = true;
    }        
  
    public event PropertyChangedEventHandler PropertyChanged;

    //Provide mechanisms for automatic updates when a property changes
    protected void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }        
}

Events

TreeView exposes the following events to handle the expanding and collapsing of items.

The expanding and collapsing interactions can be handled with the help of the NodeCollapsing and NodeExpanding events, and the expanded and collapsed interactions can be handled with the help of the NodeCollapsed and NodeExpanded events.

You can also achieve handling of expand and collapse operations using the ExpandCommand and CollapseCommand.