Introducing the New .NET MAUI TreeView Control
Tags: dotnetmaui, mobile, whatsnew, desktop
Published: 2023-10-03 15:54:22

---
title: Introducing the New .NET MAUI TreeView Control
published: true
date: 2023-09-29 14:01:01 UTC
tags: dotnetmaui, mobile, whatsnew, desktop
canonical_url: https://www.syncfusion.com/blogs/post/new-dotnet-maui-treeview.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4zd7bd9mtadq9h833b6z.png
---
In the recent [Essential Studio 2023 Volume 3](https://www.syncfusion.com/forums/184588/essential-studio-2023-volume-3-main-release-v23-1-36-is-available-for-download "Essential Studio 2023 Volume 3") release, we introduced an innovative TreeView control for our Syncfusion [.NET Multi-Platform App UI (MAUI)](https://www.syncfusion.com/maui-controls ".NET MAUI controls") platform.

The [.NET MAUI TreeView](https://www.syncfusion.com/maui-controls/maui-treeview ".NET MAUI TreeView"), or **SfTreeView** in the code, is a control designed to display hierarchical data structures within your app. This includes structures such as organizational hierarchies and nested connections. It offers a user-friendly interface for interacting with complex data structures and navigating through multiple levels of information. It allows users to expand and collapse nodes, revealing or concealing underlying information as needed.

This new control significantly enhances how you present hierarchical data, improving navigation within your .NET MAUI apps. Whether you’re an experienced .NET developer or just starting, we invite you to explore the capabilities of this exciting new control with us.

Stay with us as we delve deeper into the features and benefits of the .NET MAUI TreeView control!

## Key features

The .NET MAUI TreeView control offers a variety of user-friendly features, including:

- [Data population—bound and unbound mode](#Data)
- [Selection](#Selection)
- [Item templating](#Item)
- [Expanding and collapsing nodes](#Expand)

### <a name="Data">Data population—bound and unbound modes</a>

You can populate the .NET MAUI TreeView with a data source using the [SfTreeView.ItemsSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TreeView.SfTreeView.html#Syncfusion_Maui_TreeView_SfTreeView_ItemsSource "SfTreeView.ItemsSource property of .NET MAUI TreeView") property, or you can create and add the [TreeViewNode](https://help.syncfusion.com/cr/maui/Syncfusion.TreeView.Engine.TreeViewNode.html "TreeViewNode Class of .NET MAUI TreeView") in a hierarchical structure to the [SfTreeView.Nodes](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TreeView.SfTreeView.html#Syncfusion_Maui_TreeView_SfTreeView_Nodes "SfTreeView.Nodes property of .NET MAUI TreeView") property.

### <a name="Selection">Selection</a>

The TreeView lets users select items either programmatically or through touch interactions using the [SfTreeView.SelectionMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TreeView.SfTreeView.html#Syncfusion_Maui_TreeView_SfTreeView_SelectionMode "SfTreeView.SelectionMode property of .NET MAUI TreeView") property. The property must not be set to **None**. The control supports different selection modes to perform selection operations:

- **None** : Disable selection.
- **SelectionMode.Single: ** Users can select only a single item. When they click on the selected item, the selection will not be cleared. This is the default value for _ **SelectionMode** _.
- **SelectionMode.SingleDeselect** : Users can select only a single item. When clicking on the selected item, the selection is cleared.
- **SelectionMode.Multiple:** Users can select more than one item. Selection is not cleared when selecting more than one item. A selection can be cleared by clicking on it again.
- **SelectionMode.Extended:** Users can select multiple items using the common key modifiers.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Selecting-an-item-in-.NET-MAUI-TreeView-control.png" alt="Selecting an item in .NET MAUI TreeView control" style="width:100%">

  <figcaption>Selecting an item in .NET MAUI TreeView control</figcaption>

</figure>

### <a name="Item">Item templating</a>

The .NET MAUI TreeView allows you to customize the appearance of the content view and expander view by setting the [SfTreeView.ItemTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TreeView.SfTreeView.html#Syncfusion_Maui_TreeView_SfTreeView_ItemTemplate "SfTreeView.ItemTemplate property of .NET MAUI TreeView") and [SfTreeView.ExpanderTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TreeView.SfTreeView.html#Syncfusion_Maui_TreeView_SfTreeView_ExpanderTemplate "SfTreeView.ExpanderTemplate property of .NET MAUI TreeView") properties.

### <a name="Expand">Expand and collapse nodes</a>

You can expand and collapse the nodes in the TreeView programmatically or through user interaction:

- **ExpandActionTarget:** Expanding and collapsing of nodes can be performed by tapping the expander view or content view by setting the [SfTreeView.ExpandActionTarget](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TreeView.SfTreeView.html#Syncfusion_Maui_TreeView_SfTreeView_ExpandActionTarget "ExpandActionTarget property of .NET MAUI TreeView") property:
  - **ExpandActionTarget.Expander** : Users can expand and collapse nodes by tapping the expander.
  - **ExpandActionTarget.Node** : Users can expand and collapse nodes by tapping either the expander or the content.
- **AutoExpandMode:** By default, the items in the tree view will be in a collapsed state. You can define how the nodes should expand when loading TreeView by using the [SfTreeView.AutoExpandMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TreeView.SfTreeView.html#Syncfusion_Maui_TreeView_SfTreeView_AutoExpandMode "AutoExpandMode property of .NET MAUI TreeView") property. This property is only applicable in bound mode. In unbound mode, you must set the **IsExpanded** property to **true** while creating the nodes. Define the **SfTreeView.**** AutoExpandMode** property with:
  - **AutoExpandMode.RootNodesExpanded:** Expands only the root items when loaded.
  - **AutoExpandMode.AllNodesExpanded:** Expands all items when loaded.
  - **AutoExpandMode.None:** When the TreeView loads, it initially collapses all items. Despite this, you or the user can manually or programmatically expand these items. This feature offers significant flexibility in how you present and interact with your data in the TreeView.
- **Programmatic expand and collapse:** The TreeView also allows programmatic expansion and collapse based on the [TreeViewNode](https://help.syncfusion.com/cr/maui/Syncfusion.TreeView.Engine.TreeViewNode.html "TreeViewNode Class of .NET MAUI TreeView") and level using the following methods: 
    - **ExpandNode(TreeViewNode item):** To expand the particular TreeViewNode passed to it.
    - **CollapseNode(TreeViewNode item):** To collapse the particular TreeViewNode passed to it.
    - **ExpandNodes(int level):** To expand all items of a level passed to it.
    - **CollapseNodes(int level):** To collapse all items of a level passed to it.
    - **ExpandAll():** To expand all the items in the TreeView.
    - **CollapseAll():** To collapse all the items in the TreeView.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Expanding-and-collapsing-items-in-.NET-MAUI-TreeView-control.gif" alt="Expanding and collapsing items in .NET MAUI TreeView control" style="width:100%">

<figcaption>Expanding and collapsing items in .NET MAUI TreeView control</figcaption>

</figure>
</figure>

## Getting started with the .NET MAUI TreeView control

We have seen the top features of the .NET MAUI TreeView control. Now, let’s see how to add it to your application.

### Step 1: Create a .NET MAUI project

First, [create a .NET MAUI project](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?view=net-maui-7.0&tabs=vswin&pivots=devices-android "Build your first .NET MAUI app").

### Step 2: Add the .NET MAUI TreeView NuGet package

Syncfusion .NET MAUI controls are available in the [NuGet gallery](https://www.nuget.org/ "NuGet gallery"). To add the .NET MAUI TreeView control to your project, open the **NuGet package manager** in [Visual Studio](https://visualstudio.microsoft.com/ "Visual Studio"), and search for [Syncfusion.Maui.TreeView](https://www.nuget.org/packages/Syncfusion.Maui.TreeView "Syncfusion.Maui.TreeView NuGet package"), and then install it.

### Step 3: Register the handler

In the  **MauiProgram.cs**  file, register the handler for Syncfusion core. Refer to the following code.

```csharp
using Syncfusion.Maui.Core.Hosting;

public static class MauiProgram
{
   public static MauiApp CreateMauiApp()
   {
	var builder = MauiApp.CreateBuilder();
	builder
	  .UseMauiApp<App>()
	  .ConfigureSyncfusionCore()
	  .ConfigureFonts(fonts =>
	   {
		fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
		fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                fonts.AddFont("Roboto-Medium.ttf", "Roboto-Medium");
                fonts.AddFont("Roboto-Regular.ttf", "Roboto-Regular");
            });
	return builder.Build();
   }
}
```

### Step 4: Add the namespaces

Add the  **Syncfusion.Maui.TreeView**  and **Syncfusion.TreeView.Engine** namespaces in your XAML page.

```xml
<xmlns:syncfusion ="clr-namespace:Syncfusion.Maui.TreeView;assembly=Syncfusion.Maui.TreeView"
     xmlns:treeviewengine="clr-namespace:Syncfusion.TreeView.Engine;assembly=Syncfusion.Maui.TreeView"/>
```

### Step 5: Define the TreeView control

Add the .NET MAUI TreeView control using the included namespace.

```xml
<syncfusion:SfTreeView x:Name="treeView"/>
```

### Step 6: Define the TreeView nodes

To build a tree view, you can use the TreeView control and a hierarchical structure of **TreeViewNode** objects. This tree structure is established by adding one or more root nodes to the [SfTreeView.Nodes](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TreeView.SfTreeView.html#Syncfusion_Maui_TreeView_SfTreeView_Nodes "SfTreeView.Nodes property of .NET MAUI TreeView") collection (without a data source, in unbound mode).

Refer to the following code example.

```xml
<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"
             x:Class="TreeViewMaui.MainPage">
<ContentPage.Content>
    <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" IsExpanded="True"/>
                            <treeviewengine:TreeViewNode Content="Wollongong" IsExpanded="True"/>
                            <treeviewengine:TreeViewNode Content="Newcastle–Maitland" IsExpanded="True"/>
                        </treeviewengine:TreeViewNode.ChildNodes>
                    </treeviewengine:TreeViewNode>
                    <treeviewengine:TreeViewNode Content="Victoria" IsExpanded="True">
                        <treeviewengine:TreeViewNode.ChildNodes>
                            <treeviewengine:TreeViewNode Content="Melbourne" IsExpanded="True"/>
                        </treeviewengine:TreeViewNode.ChildNodes>
                    </treeviewengine:TreeViewNode>
                    <treeviewengine:TreeViewNode Content="Queensland" IsExpanded="True">
                        <treeviewengine:TreeViewNode.ChildNodes>
                            <treeviewengine:TreeViewNode Content="Brisbane" IsExpanded="True"/>
                        </treeviewengine:TreeViewNode.ChildNodes>
                    </treeviewengine:TreeViewNode>
                    <treeviewengine:TreeViewNode Content="Western Australia" IsExpanded="True">
                        <treeviewengine:TreeViewNode.ChildNodes>
                            <treeviewengine:TreeViewNode Content="Perth"/>
                        </treeviewengine:TreeViewNode.ChildNodes>
                    </treeviewengine:TreeViewNode>
                    <treeviewengine:TreeViewNode Content="South Australia" IsExpanded="True">
                        <treeviewengine:TreeViewNode.ChildNodes>
                            <treeviewengine:TreeViewNode Content="Adelaide"/>
                        </treeviewengine:TreeViewNode.ChildNodes>
                    </treeviewengine:TreeViewNode>
                    </treeviewengine:TreeViewNode.ChildNodes>
                </treeviewengine:TreeViewNode>
                <treeviewengine:TreeViewNode Content="Brazil" IsExpanded="True">
                    <treeviewengine:TreeViewNode.ChildNodes>
                        <treeviewengine:TreeViewNode Content="São Paulo" IsExpanded="True">
                            <treeviewengine:TreeViewNode.ChildNodes>
                                <treeviewengine:TreeViewNode Content="São Paulo"/>
                                <treeviewengine:TreeViewNode Content="Campinas"/>
                                <treeviewengine:TreeViewNode Content="Sorocaba"/>
                            </treeviewengine:TreeViewNode.ChildNodes>
                        </treeviewengine:TreeViewNode>
                        <treeviewengine:TreeViewNode Content="Rio de Janeiro"/>
                        <treeviewengine:TreeViewNode Content="Minas Gerais">
                            <treeviewengine:TreeViewNode.ChildNodes>
                                <treeviewengine:TreeViewNode Content="Belo Horizonte"/>
                                <treeviewengine:TreeViewNode Content="Distrito Federal e Entorno (Brasilia)"/>
                            </treeviewengine:TreeViewNode.ChildNodes>
                        </treeviewengine:TreeViewNode>
                        <treeviewengine:TreeViewNode Content="Ceará">
                            <treeviewengine:TreeViewNode.ChildNodes>
                                <treeviewengine:TreeViewNode Content="Fortaleza"/>
                                <treeviewengine:TreeViewNode Content="Caucaia"/>
                            </treeviewengine:TreeViewNode.ChildNodes>
                        </treeviewengine:TreeViewNode>
                        <treeviewengine:TreeViewNode Content="Paraná">
                            <treeviewengine:TreeViewNode.ChildNodes>
                                <treeviewengine:TreeViewNode Content="Curitiba"/>
                            </treeviewengine:TreeViewNode.ChildNodes>
                        </treeviewengine:TreeViewNode>
                    </treeviewengine:TreeViewNode.ChildNodes>
                </treeviewengine:TreeViewNode>
                <treeviewengine:TreeViewNode Content="China" IsExpanded="True">
                    <treeviewengine:TreeViewNode.ChildNodes>
                        <treeviewengine:TreeViewNode Content="Guangdong">
                            <treeviewengine:TreeViewNode.ChildNodes>
                                <treeviewengine:TreeViewNode Content="Guanghou"/>
                            </treeviewengine:TreeViewNode.ChildNodes>
                        </treeviewengine:TreeViewNode>
                        <treeviewengine:TreeViewNode Content="Jingjinji">
                            <treeviewengine:TreeViewNode.ChildNodes>
                                <treeviewengine:TreeViewNode Content="Beijing"/>
                                <treeviewengine:TreeViewNode Content="Tianjin"/>
                            </treeviewengine:TreeViewNode.ChildNodes>
                        </treeviewengine:TreeViewNode>
                        <treeviewengine:TreeViewNode Content="Yangtze River Delta">
                            <treeviewengine:TreeViewNode.ChildNodes>
                                <treeviewengine:TreeViewNode Content="Shanghai"/>
                            </treeviewengine:TreeViewNode.ChildNodes>
                        </treeviewengine:TreeViewNode>
                        <treeviewengine:TreeViewNode Content="Chengyu">
                            <treeviewengine:TreeViewNode.ChildNodes>
                                <treeviewengine:TreeViewNode Content="Chongqing"/>
                            </treeviewengine:TreeViewNode.ChildNodes>
                        </treeviewengine:TreeViewNode>
                        <treeviewengine:TreeViewNode Content="Zhejiang Province">
                            <treeviewengine:TreeViewNode.ChildNodes>
                                <treeviewengine:TreeViewNode Content="Hangzhou"/>
                            </treeviewengine:TreeViewNode.ChildNodes>
                        </treeviewengine:TreeViewNode>
                    </treeviewengine:TreeViewNode.ChildNodes>
                </treeviewengine:TreeViewNode>
                <treeviewengine:TreeViewNode Content="United States of America" IsExpanded="True">
                    <treeviewengine:TreeViewNode.ChildNodes>
                        <treeviewengine:TreeViewNode Content="New York"/>
                        <treeviewengine:TreeViewNode Content="California">
                            <treeviewengine:TreeViewNode.ChildNodes>
                                <treeviewengine:TreeViewNode Content="Los Angeles"/>
                                <treeviewengine:TreeViewNode Content="San Jose"/>
                                <treeviewengine:TreeViewNode Content="San Francisco"/>
                            </treeviewengine:TreeViewNode.ChildNodes>
                        </treeviewengine:TreeViewNode>
                        <treeviewengine:TreeViewNode Content="Illinois">
                            <treeviewengine:TreeViewNode.ChildNodes>
                                <treeviewengine:TreeViewNode Content="Chicago"/>
                            </treeviewengine:TreeViewNode.ChildNodes>
                        </treeviewengine:TreeViewNode>
                        <treeviewengine:TreeViewNode Content="Texas">
                            <treeviewengine:TreeViewNode.ChildNodes>
                                <treeviewengine:TreeViewNode Content="Houston"/>
                                <treeviewengine:TreeViewNode Content="San Antonio"/>
                                <treeviewengine:TreeViewNode Content="Dallas"/>
                            </treeviewengine:TreeViewNode.ChildNodes>
                        </treeviewengine:TreeViewNode>
                        <treeviewengine:TreeViewNode Content="Pennsylvania">
                            <treeviewengine:TreeViewNode.ChildNodes>
                                <treeviewengine:TreeViewNode Content="Philadelphia"/>
                            </treeviewengine:TreeViewNode.ChildNodes>
                        </treeviewengine:TreeViewNode>
                    </treeviewengine:TreeViewNode.ChildNodes>
                </treeviewengine:TreeViewNode>
                <treeviewengine:TreeViewNode Content="India" IsExpanded="True">
                    <treeviewengine:TreeViewNode.ChildNodes>
                        <treeviewengine:TreeViewNode Content="Delhi">
                            <treeviewengine:TreeViewNode.ChildNodes>
                                <treeviewengine:TreeViewNode Content="New Delhi"/>
                            </treeviewengine:TreeViewNode.ChildNodes>
                        </treeviewengine:TreeViewNode>
                        <treeviewengine:TreeViewNode Content="Maharashtra">
                            <treeviewengine:TreeViewNode.ChildNodes>
                                <treeviewengine:TreeViewNode Content="Mumbai"/>
                                <treeviewengine:TreeViewNode Content="Pune"/>
                            </treeviewengine:TreeViewNode.ChildNodes>
                        </treeviewengine:TreeViewNode>
                        <treeviewengine:TreeViewNode Content="West Bengal">
                            <treeviewengine:TreeViewNode.ChildNodes>
                                <treeviewengine:TreeViewNode Content="Kolkatta"/>
                            </treeviewengine:TreeViewNode.ChildNodes>
                        </treeviewengine:TreeViewNode>
                        <treeviewengine:TreeViewNode Content="Karnataka">
                            <treeviewengine:TreeViewNode.ChildNodes>
                                <treeviewengine:TreeViewNode Content="Bangalore"/>
                            </treeviewengine:TreeViewNode.ChildNodes>
                        </treeviewengine:TreeViewNode>
                        <treeviewengine:TreeViewNode Content="Tamil Nadu">
                            <treeviewengine:TreeViewNode.ChildNodes>
                                <treeviewengine:TreeViewNode Content="Chennai"/>
                            </treeviewengine:TreeViewNode.ChildNodes>
                        </treeviewengine:TreeViewNode>
                    </treeviewengine:TreeViewNode.ChildNodes>
                </treeviewengine:TreeViewNode>
            </syncfusion:SfTreeView.Nodes>
        </syncfusion:SfTreeView>
    </ContentPage.Content>

</ContentPage>
```

Refer to the following output image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Populating-items-in-.NET-MAUI-TreeView-control-using-unbound-mode-1.png" alt="Populating items in .NET MAUI TreeView control using unbound mode" style="width:100%">

  <figcaption>Populating items in .NET MAUI TreeView control using unbound mode</figcaption>

</figure>

## Data population—bound mode

The .NET MAUI TreeView also enables binding data by using the **ItemsSource** property. To achieve this, please follow these steps.

### Step 1: Create a data model

Create a simple data model to bind the data for the TreeView, as shown in the following code example.

```csharp
public class FileManager : INotifyPropertyChanged
{
    #region Fields

    private string itemName;
    private ImageSource imageIcon;
    private ObservableCollection<FileManager> subFiles;

    #endregion

    #region Constructor
    public FileManager()
    {
    }

    #endregion

    #region Properties
    public ObservableCollection<FileManager> SubFiles
    {
        get { return subFiles; }
        set
        {
            subFiles = value;
            RaisedOnPropertyChanged("SubFiles");
        }
    }

    public string ItemName
    {
        get { return itemName; }
        set
        {
            itemName = value;
            RaisedOnPropertyChanged("ItemName");
        }
    }

    public ImageSource ImageIcon
    {
        get { return imageIcon; }
        set
        {
            imageIcon = value;
            RaisedOnPropertyChanged("ImageIcon");
        }
    }

    #endregion

    #region INotifyPropertyChanged

    public event PropertyChangedEventHandler PropertyChanged;

    public void RaisedOnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    #endregion

```

### Step 2: Create the view model

Create a **FileManagerViewModel** class with a **Files** collection property initialized with 20 data objects, as shown in the following code example.

```csharp
public class FileManagerViewModel
{
    #region Fields

    private ObservableCollection<FileManager> files;

    #endregion

    #region Constructor

    public FileManagerViewModel()
    {
        GenerateSource();
    }

    #endregion

    #region Properties

    public ObservableCollection<FileManager> Files
    {
        get { return files; }
        set { this.files = value; }
    }

    #endregion

    #region Generate Source

    private void GenerateSource()
    {
        var nodeImageInfo = new ObservableCollection<FileManager>();
      
        var doc = new FileManager() { ItemName = "Documents", ImageIcon = "folder.png" };
        var download = new FileManager() { ItemName = "Downloads", ImageIcon = "folder.png" };
        var mp3 = new FileManager() { ItemName = "Music", ImageIcon ="folder.png" };
        var pictures = new FileManager() { ItemName = "Pictures", ImageIcon = "folder.png" };
        var video = new FileManager() { ItemName = "Videos", ImageIcon ="folder.png" };

        var pollution = new FileManager() { ItemName = "Environmental Pollution.docx", ImageIcon = "word.png" };
        var globalWarming = new FileManager() { ItemName = "Global Warming.ppt", ImageIcon = "ppt.png" };
        var sanitation = new FileManager() { ItemName = "Sanitation.docx", ImageIcon = "word.png"};
        var socialNetwork = new FileManager() { ItemName = "Social Network.pdf", ImageIcon ="pdfimage.png" };
        var youthEmpower = new FileManager() { ItemName = "Youth Empowerment.pdf", ImageIcon = "pdfimage.png" };

       
        var tutorials = new FileManager() { ItemName = "Tutorials.zip", ImageIcon = "zip.png" };
        var typeScript = new FileManager() { ItemName = "TypeScript.7z", ImageIcon ="zip.png" };
        var uiGuide = new FileManager() { ItemName = "UI-Guide.pdf", ImageIcon = "pdfimage.png"};

        var song = new FileManager() { ItemName = "Gouttes", ImageIcon = "audio.png" };

        var camera = new FileManager() { ItemName = "Camera Roll", ImageIcon = "folder.png" };
        var stone = new FileManager() { ItemName = "Stone.jpg", ImageIcon = "image.png" };
        var wind = new FileManager() { ItemName = "Wind.jpg", ImageIcon = "image.png"};

        var img0 = new FileManager() { ItemName = "WIN_20160726_094117.JPG", ImageIcon = "people_circle23.png" };
        var img1 = new FileManager() { ItemName = "WIN_20160726_094118.JPG", ImageIcon = "people_circle2.png" };

        var video1 = new FileManager() { ItemName = "Naturals.mp4", ImageIcon = "video.png" };
        var video2 = new FileManager() { ItemName = "Wild.mpeg", ImageIcon = "video.png" }; doc.SubFiles = new ObservableCollection<FileManager>
       {
           pollution,
           globalWarming,
           sanitation,
           socialNetwork,
           youthEmpower
       };

       download.SubFiles = new ObservableCollection<FileManager>
       {
           tutorials,
           typeScript,
           uiGuide
       };

       mp3.SubFiles = new ObservableCollection<FileManager>
       {
           song
       };

       pictures.SubFiles = new ObservableCollection<FileManager>
       {
           camera,
           stone,
           wind
       };
       camera.SubFiles = new ObservableCollection<FileManager>
       {
           img0,
           img1
       };

       video.SubFiles = new ObservableCollection<FileManager>
       {
           video1,
           video2
       };

       nodeImageInfo.Add(doc);
       nodeImageInfo.Add(download);
       nodeImageInfo.Add(mp3);
       nodeImageInfo.Add(pictures);
       nodeImageInfo.Add(video);
       files = nodeImageInfo;
   }

   #endregion
}
```

### Step 3: Set the binding context

Then, set the **FileManagerViewModel** class instance as the **BindingContext** of your page to bind its properties to the TreeView.

```xml
<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:local="clr-namespace:TreeViewMaui"
             x:Class="TreeViewMaui.MainPage">

    <ContentPage.BindingContext>
        <local:FileManagerViewModel x:Name="viewModel"/>
    </ContentPage.BindingContext>
</ContentPage>
```

### Step 4: Bind data collection to TreeView

You can now use the **ItemsSource** property to bind data to the **SfTreeView** by filling it with a hierarchical data source. The [SfTreeView.ChildPropertyName](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.TreeView.SfTreeView.html#Syncfusion_Maui_TreeView_SfTreeView_ChildPropertyName "ChildPropertyName property of .NET MAUI TreeView") property can be used to set the name of the child objects.

Refer to the following code example.

```xml
<syncfusion:SfTreeView x:Name="treeView" 
                       ChildPropertyName="SubFiles"
                       ItemsSource="{Binding Files}">
```

### Step 5: Define the tree view items

Refer to the following code example. In it, we create a custom user interface (UI) to display the data items by using the **ItemTemplate** property.

```xml
<syncfusion:SfTreeView x:Name="treeView" 
                       ChildPropertyName="SubFiles"
                       ItemsSource="{Binding Files}"  
                       AutoExpandMode="AllNodesExpanded">

    <syncfusion:SfTreeView.ItemTemplate>
        <DataTemplate>
            <Grid x:Name="grid" RowSpacing="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="40" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid Grid.Column="0">
                    <Image Source="{Binding ImageIcon}"
                           VerticalOptions="Center"
                           HorizontalOptions="Center"
                           HeightRequest="24" 
                           WidthRequest="24"/>
                </Grid>
                <Grid Grid.Column="1">
                    <Label LineBreakMode="NoWrap"
                           Text="{Binding ItemName}"
                           VerticalTextAlignment="Center">
                    </Label>
                </Grid>
            </Grid>
        </DataTemplate>
    </syncfusion:SfTreeView.ItemTemplate>
</syncfusion:SfTreeView>
```

After executing the previous code examples, we’ll get a TreeView like in the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/09/Populating-items-in-.NET-MAUI-TreeView-control-using-the-bound-mode.png" alt="Populating items in .NET MAUI TreeView control using the bound mode" style="width:100%">

  <figcaption>Populating items in .NET MAUI TreeView control using the bound mode</figcaption>

</figure>

## GitHub references

For more details, refer to the [populating nodes in unbound](https://github.com/SyncfusionExamples/populate-the-nodes-in-unbound-mode-in-.net-maui-treeview "Populate nodes in unbound mode in .NET MAUI Treeview GitHub demo") and [bound modes in .NET MAUI TreeView](https://github.com/SyncfusionExamples/data-binding-in-.net-maui-treeview "Populating nodes in bound mode in .NET MAUI TreeView GitHub demo") demos on GitHub.

## Conclusion

Thanks for reading! In this blog, we’ve explored the features of the new Syncfusion [.NET MAUI TreeView control](https://www.syncfusion.com/maui-controls/maui-treeview ".NET MAUI TreeView control"), unveiled in the [2023 Volume 3](https://www.syncfusion.com/forums/184588/essential-studio-2023-volume-3-main-release-v23-1-36-is-available-for-download "Essential Studio 2023 Volume 3") release. Details about this control are also available on our [Release Notes](https://help.syncfusion.com/common/essential-studio/release-notes/v23.1.36 "Essential Studio Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew "Essential Studio What’s New") pages. We encourage you to try out the control and share your thoughts in the comments below!

To start evaluating this control immediately, download [Essential Studio for .NET MAUI](https://www.syncfusion.com/downloads/maui "Get free evaluation of Essential Studio for .NET MAUI products").

For questions, you can contact us via our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion FeedBack Portal"). We’re always here to assist you!

## Related blogs

- [Syncfusion Essential Studio 2023 Volume 3 Is Here!](https://www.syncfusion.com/blogs/post/syncfusion-essential-studio-2023-volume-3.aspx "Blog: Syncfusion Essential Studio 2023 Volume 3 Is Here!")
- [Introducing the .NET MAUI Segmented Control for Effortless Selection](https://www.syncfusion.com/blogs/post/dotnet-maui-segmented-control.aspx "Blog: Introducing the .NET MAUI Segmented Control for Effortless Selection")
- [Introducing the New .NET MAUI CheckBox Control](https://www.syncfusion.com/blogs/post/new-dotnet-maui-checkbox-control.aspx "Blog: Introducing the New .NET MAUI CheckBox Control")
- [Introducing the New .NET MAUI Radio Button Control](https://www.syncfusion.com/blogs/post/new-dotnet-maui-radio-button.aspx "Blog: Introducing the New .NET MAUI Radio Button Control")