Working with TreeView in .NET MAUI TreeView (SfTreeView)

9 Jul 20269 minutes to read

Interacting with TreeView items

Loaded event

The Loaded event is raised when the TreeView is loaded into the view for the first time.

The Loaded event is commonly used to scroll a desired item into view by using the BringIntoView method. The BringIntoView method accepts the following parameters:

  • node: The TreeViewNode that should be scrolled into view.
  • disableAnimation: true to disable the scroll animation; false to animate the scroll.
  • scrollIfNotVisible: true to scroll the node only if it is not currently visible; false to always scroll.
  • scrollToPosition: A ScrollToPosition value (MakeVisible, Start, Center, or End) that determines the final position of the node within the viewport.

The following example shows how to handle the Loaded event and bring the first node into view:

treeView.Loaded += TreeView_Loaded;

private void TreeView_Loaded(object sender, TreeViewLoadedEventArgs e)
{
    // Bring the first node into view when the TreeView is loaded.
    if (treeView.Nodes.Count > 0)
    {
        var node = treeView.Nodes[0];
        treeView.BringIntoView(node, true, true, ScrollToPosition.MakeVisible);
    }
}

ItemTapped event

The ItemTapped event is triggered whenever an item is tapped. ItemTappedEventArgs has the following members that provide information for the ItemTapped event:

  • Node: Gets the TreeViewNode and its associated data for the tapped item.
  • Position: Gets the touch position within the tapped item.
  • Handled: Gets or sets whether the event is handled.
<syncfusion:SfTreeView x:Name="treeView" ItemTapped="TreeView_ItemTapped" />
treeView.ItemTapped += TreeView_ItemTapped;

private void TreeView_ItemTapped(object sender, ItemTappedEventArgs e)
{
    DisplayAlert("Item Tapped", "TreeView item tapped", "Close");
}

ItemDoubleTapped event

The ItemDoubleTapped event is triggered whenever an item is double-tapped. ItemDoubleTappedEventArgs has the following members that provide information for the ItemDoubleTapped event:

  • Node: Gets the TreeViewNode and its associated data for the double-tapped item.
  • Position: Gets the touch position within the double-tapped item.
  • Handled: Gets or sets whether the event is handled.
<syncfusion:SfTreeView x:Name="treeView" ItemDoubleTapped="TreeView_ItemDoubleTapped" />
treeView.ItemDoubleTapped += TreeView_ItemDoubleTapped;

private void TreeView_ItemDoubleTapped(object sender, ItemDoubleTappedEventArgs e)
{
    DisplayAlert("Item DoubleTapped", "TreeView item double-tapped", "Close");
}

ItemRightTapped event

The ItemRightTapped event is triggered whenever an item is right-tapped. ItemRightTappedEventArgs has the following members that provide information for the ItemRightTapped event:

  • Node: Gets the TreeViewNode and its associated data for the right-tapped item.
  • Position: Gets the touch position within the right-tapped item.
  • Handled: Gets or sets whether the event is handled.
<syncfusion:SfTreeView x:Name="treeView" ItemRightTapped="TreeView_ItemRightTapped" />
treeView.ItemRightTapped += TreeView_ItemRightTapped;

private void TreeView_ItemRightTapped(object sender, ItemRightTappedEventArgs e)
{
    DisplayAlert("Item RightTapped", "TreeView item right-tapped", "Close");
}

ItemLongPress event

The ItemLongPress event is triggered whenever an item is long-pressed.
ItemLongPressEventArgs has the following members that provide information for the ItemLongPress event:

  • Node: Gets the TreeViewNode and its associated data for the long-pressed item.
  • Position: Gets the touch position within the long-pressed item.
  • Handled: Gets or sets whether the event is handled.
<syncfusion:SfTreeView x:Name="treeView" ItemLongPress="TreeView_ItemLongPress" />
treeView.ItemLongPress += TreeView_ItemLongPress;

private void TreeView_ItemLongPress(object sender, ItemLongPressEventArgs e)
{
    DisplayAlert("Item LongPress", "TreeView item is long-pressed", "Close");
}

KeyDown event

The KeyDown event is triggered when a key is pressed while the SfTreeView is in focus. The KeyPressEventArgs has the following members that provide information for the KeyDown event:

<syncfusion:SfTreeView x:Name="treeView" KeyDown="OnTreeViewKeyDown"/>
treeView.KeyDown += OnTreeViewKeyDown;

private void OnTreeViewKeyDown(object sender, KeyPressEventArgs e)
{
    // Example: handle the Enter key.
    if (e.Key == Key.Enter)
    {
        // Perform the required action when Enter is pressed.
        e.Handled = true;
    }
}

Track node property changes

The PropertyChanged event is triggered whenever a property in the customized TreeViewNode is changed. You can get the name of the property that changed by using the PropertyName property of the PropertyChangedEventArgs.

To track changes, first obtain a TreeViewNode instance from the Nodes collection of the SfTreeView (or a child node’s ChildNodes collection), then hook the PropertyChanged event on that node.

// Retrieve a node from the TreeView (for example, the first root node).
if (treeView.Nodes.Count > 0)
{
    var treeViewNode = treeView.Nodes[0];
    treeViewNode.PropertyChanged += TreeViewNode_PropertyChanged;
}

private void TreeViewNode_PropertyChanged(object sender, PropertyChangedEventArgs e)
{
    var treeViewNode = sender as TreeViewNode;
    if (e.PropertyName == "IsExpanded")
    {
        if (treeViewNode.IsExpanded)
            DisplayAlert("treeview", "nodeexpanded", "ok");
        else
            DisplayAlert("treeview", "nodecollapsed", "ok");
    }
}

Refresh layout

You can refresh a TreeViewNode from the root node and update the entire layout by using the SetDirty method that notifies the tree view layout mechanism to invalidate nodes. Call this method whenever you modify properties of a TreeViewNode (such as its content, child collection, or expansion state) at runtime so that the control recalculates the layout and re-renders the affected node and its descendants.

using Syncfusion.Maui.TreeView;

public class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        node.SetDirty();
    }
}

Reset TreeView items

You can reset the visible TreeView items by using the ResetTreeViewItems method. If the parameter is null, all the visible TreeView items will reset. If you are passing the data object as a parameter, a particular TreeView item will reset.

Reset all visible items:

using Syncfusion.Maui.TreeView;

public class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        treeView.ResetTreeViewItems();
    }
}

Reset a particular item by passing its data object:

using Syncfusion.Maui.TreeView;

public class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        // `dataObject` is the underlying data bound to the TreeViewNode you want to reset.
        treeView.ResetTreeViewItems(dataObject);
    }
}

Refresh view

You can refresh the view by using the RefreshView method. It is used to refresh the items in the TreeView at runtime while updating the view.

The RefreshView method accepts a bool parameter:

  • true: Recreates and refreshes all the visible items, including their templates and bindings. Use this when underlying data or templates have changed and a full refresh is required.
  • false: Increments the view by refreshing only the differences (added, removed, or changed items) without recreating existing item templates.
using Syncfusion.Maui.TreeView;

public class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        // Full refresh — recreates all visible items.
        treeView.RefreshView(true);
    }
}