Working with TreeView in Xamarin TreeView (SfTreeView)

18 May 20214 minutes to read

Interacting with TreeView Items

Loaded event

The Loaded event is raised when the TreeView is loading in view for the first time.

treeView.Loaded += TreeView_Loaded;

private void TreeView_Loaded(object sender, TreeViewLoadedEventArgs e)
{
   DisplayAlert("Message", "TreeView is Loaded", "Done");
}

The Loaded event is used for the following use case:

Tapped event

The ItemTapped event will be triggered whenever tapping the item. ItemTappedEventArgs has the following members which provides the information for ItemTapped event:

  • Node: Gets the TreeViewNode and data associated with the tapped item as its arguments.
  • Position: Gets the touch position in the tapped item.
  • Handled: Gets or sets whether the event is handled or not.
<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");
}

Download the entire source code from GitHub here

ItemDoubleTapped event

The ItemDoubleTapped event will be triggered whenever double tapping the item. The ItemDoubleTappedEventArgs has the following members providing information for the ItemDoubleTapped event:

  • Node: Gets the TreeViewNode and data associated with the double tapped item as its arguments.
  • Position: Gets the touch position in the double tapped item.
  • Handled: Gets or sets whether the event is handled or not.
<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");
}

Download the entire source code from GitHub here

ItemHolding event

The ItemHolding event will be triggered whenever the item is long pressed.
ItemHoldingEventArgs has the following members which provides the information for ItemHolding event:

  • Node: Gets the TreeViewNode and data associated with the hold item as its arguments.
  • Position: Gets the touch position in the hold item.
  • Handled: Gets or sets whether the event is handled or not.
<syncfusion:SfTreeView x:Name="treeView" ItemHolding="TreeView_ItemHolding" />
treeView.ItemHolding += TreeView_ItemHolding;
private void TreeView_ItemHolding(object sender, ItemHoldingEventArgs e)
{
    DisplayAlert("Item Hold", "TreeView item is holding","Close");   
}

Download the entire source code from GitHub here

Update the runtime changes

The PropertyChanged event will be 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.

treeviewnode.PropertyChanged += Treeviewnode_PropertyChanged;

private void Treeviewnode_PropertyChanged(object sender, PropertyChangedEventArgs e)
{
    if (e.PropertyName == "IsExpanded")
    {
        if (treeviewnode.IsExpanded)
            DisplayAlert("treeview", "nodeexpanded", "ok");
        else
            DisplayAlert("treeview", "nodecollapsed", "ok");
    }
}

Refresh layout

You can refresh the TreeViewNode from the root node and update all layout by using the SetDirty method that notifies the tree view layout mechanism to invalidate nodes.

node.SetDirty();