Getting Started with .NET MAUI TreeView

7 Jul 20266 minutes to read

This section guides you through setting up and configuring a TreeView in your .NET MAUI application. Follow the steps below to add a basic TreeView to your project.

Prerequisites

Before proceeding, ensure the following are set up:

  1. Install .NET 9 SDK or later.
  2. Set up a .NET MAUI environment with Visual Studio 2022 v17.12 or later.

Step 1: Create a new .NET MAUI project

  1. Go to File > New > Project and choose the .NET MAUI App template.
  2. Name the project and choose a location. Then, click Next.
  3. Select the .NET framework version and click Create.

Step 2: Install the Syncfusion® MAUI TreeView NuGet package

  1. In Solution Explorer, right-click the project and choose Manage NuGet Packages.
  2. Search for Syncfusion.Maui.TreeView and install the latest version.
  3. Ensure the necessary dependencies are installed correctly, and the project is restored. If not, open the Terminal in VS and manually run: dotnet restore

Prerequisites

Before proceeding, ensure the following are set up:

  1. Install .NET 9 SDK or later.
  2. Set up a .NET MAUI environment with Visual Studio Code.
  3. Ensure that the .NET MAUI workloads are installed and configured as described here.

Step 1: Create a new .NET MAUI project

  1. Open the command palette by pressing Ctrl+Shift+P and type .NET: New Project and enter.
  2. Choose the .NET MAUI App template.
  3. Select the project location, type the project name and press Enter.
  4. Then choose Create project.

Step 2: Install the Syncfusion® MAUI TreeView NuGet package

  1. In Solution Explorer, right-click the project and choose Manage NuGet Packages.
  2. Search for Syncfusion.Maui.TreeView and install the latest version.
  3. Ensure the necessary dependencies are installed correctly, and the project is restored. If not, open the Terminal in VS Code and manually run: dotnet restore

Prerequisites

Before proceeding, ensure the following are set up:

  1. Install .NET 9 SDK or later.
  2. Set up a .NET MAUI environment with JetBrains Rider v2024.3 or later.
  3. Make sure the MAUI workloads are installed and configured as described here.

Step 1: Create a new .NET MAUI project

  1. Go to File > New Solution, select .NET (C#) and choose the .NET MAUI App template.
  2. Enter the Project Name, Solution Name, and Location.
  3. Select the .NET framework version and click Create.

Step 2: Install the Syncfusion® MAUI TreeView NuGet package

  1. In Solution Explorer, right-click the project and choose Manage NuGet Packages.
  2. Search for Syncfusion.Maui.TreeView and install the latest version.
  3. Ensure the necessary dependencies are installed correctly, and the project is restored. If not, open the Terminal in Rider and manually run: dotnet restore

Step 3: Register Syncfusion handler

Make sure to add the namespace.

using Syncfusion.Maui.Core.Hosting;

Register the Syncfusion core handler in your CreateMauiApp method of MauiProgram.cs file to use Syncfusion controls.

builder.ConfigureSyncfusionCore();

Step 4: Import the TreeView namespace

Add the following namespace to your XAML or C#.

xmlns:syncfusion="clr-namespace:Syncfusion.Maui.TreeView;assembly=Syncfusion.Maui.TreeView"
xmlns:treeviewengine="clr-namespace:Syncfusion.TreeView.Engine;assembly=Syncfusion.Maui.TreeView
using Syncfusion.Maui.TreeView;
using Syncfusion.TreeView.Engine;

Step 5: Add the TreeView component

Initialize the TreeView control and configure its properties to display hierarchical data in an organized and interactive structure. TreeView can be populated either with the data source by using a ItemsSource or by creating & adding the TreeViewNode to Nodes property.

You can create and manage the TreeViewNode objects directly to display the data in a hierarchical view. To create a tree view, you can use a TreeView control and a hierarchy of TreeViewNode objects. You can create the node hierarchy by adding one or more root nodes to the TreeView control’s Nodes collection. Each TreeViewNode can then have more nodes added to its Children collection. You can nest the tree view nodes to any depth you need.

IMPORTANT

ItemsSource is an alternative mechanism to Nodes for adding content into the TreeView control. You cannot set both ItemsSource and Nodes at the same time. When you use ItemsSource, nodes are created internally, but you cannot access them from the Nodes property. To learn how to populate nodes using ItemsSource with data binding (bound mode), see Data Population in .NET MAUI TreeView.

<syncfusion:SfTreeView x:Name="treeView" ExpandActionTarget="Node" FullRowSelect="True">
    <syncfusion:SfTreeView.Nodes>
        <treeviewengine:TreeViewNode Content="Australia" IsExpanded="True">
            <treeviewengine:TreeViewNode.ChildNodes>
                <treeviewengine:TreeViewNode Content="New South Wales" IsExpanded="True">
                    <treeviewengine:TreeViewNode.ChildNodes>
                        <treeviewengine:TreeViewNode Content="Sydney"/>
                        <treeviewengine:TreeViewNode Content="Canberra"/>
                        <treeviewengine:TreeViewNode Content="Newcastle–Maitland"/>
                    </treeviewengine:TreeViewNode.ChildNodes>
                </treeviewengine:TreeViewNode>
            </treeviewengine:TreeViewNode.ChildNodes>
        </treeviewengine:TreeViewNode>
    </syncfusion:SfTreeView.Nodes>
</syncfusion:SfTreeView>
SfTreeView treeView = new SfTreeView();
var australia = new TreeViewNode() { Content = "Australia", IsExpanded = true };
var newSouthWales = new TreeViewNode() { Content = "New South Wales", IsExpanded = true };
var sydney = new TreeViewNode{ Content = "Sydney"};
var canberra = new TreeViewNode{ Content = "Canberra"};
var newcastle = new TreeViewNode{ Content = "Newcastle–Maitland"};
newSouthWales.ChildNodes.Add(sydney);
newSouthWales.ChildNodes.Add(canberra);
newSouthWales.ChildNodes.Add(newcastle);
australia.ChildNodes.Add(newSouthWales);
treeView.Nodes.Add(australia);
this.Content = treeView;

.NET MAUI TreeView getting started UnBoundMode

You can download the TreeView Getting Started sample from GitHub.