.NET MAUI TreeView Item Hierarchy

To specify the data items' hierarchy and how each item is visualized, use the TreeViewDescriptor class. For more flexibility, you can define multiple descriptors in the TreeView.

The TreeViewDescriptor class exposes the following properties:

Property	Description
TargetType (System.Type)	Specifies the type of the data item the descriptor refers to.
IdentityMemberPath (string)	Specifies the path to the identity member of the data item. The identifier member is used to identify the item in the hierarchy. If the property is not specified, the entire item is used instead.
DisplayMemberPath (string)	Specifies the path to the display member of the data item. The display member is used to visualize the item on the screen. If the property is not specified, the entire item is used instead.
ItemsSourcePath (string)	Specifies the path to the child items source of the data item.
ItemTemplate (DataTemplate)	Specifies the template applied to the respective type of items.
ItemStyle (Style with a target type of TreeViewItemView)	Specifies the style of the TreeView items.

You can define multiple descriptors in the TreeView.

Here is an example demonstrating how to define the data items' hierarchy by using the TreeView descriptor:

1. Set up the RadTreeView instance:

• XAML

<telerik:RadTreeView x:Name="treeView"
                     AutomationId="treeView"
                     ItemsSource="{Binding Items}">
    <telerik:TreeViewDescriptor DisplayMemberPath="Name"
                                ItemsSourcePath="Children"
                                TargetType="{x:Type local:Item}" />
    <telerik:RadTreeView.BindingContext>
        <local:ViewModel/>
    </telerik:RadTreeView.BindingContext>
</telerik:RadTreeView>

2. Add the telerik namespaces:

• XAML

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

3. Create a sample Item class:

• C#

public class Item
{
    public Item(string name)
    {
        this.Name = name;
        this.Children = new ObservableCollection<Item>();
    }

    public string Name { get; set; }
    public IList<Item> Children { get; set; }
}

4. Add the ViewModel class:

• C#

public class ViewModel
{
    public ViewModel()
    {
        Items = new ObservableCollection<Item>();
        Items.Add(new Item("My Projects")
        {
            Children = new List<Item>()
            {
                new Item("Using latest Telerik .NET MAUI controls")
                {
                    Children = new ObservableCollection<Item>()
                    {
                        new Item("TreeView"),
                        new Item("Calendar"),
                        new Item("RichTextEditor"),
                        new Item("PdfViewer"),
                        new Item("SlideView"),
                        new Item("Chat"),
                    }
                },
                new Item("Blank project")
            }
        });
        Items.Add(new Item("Shared Documents")
        {
            Children = new List<Item>()
            {
                new Item("Reports")
                {
                    Children = new List<Item>()
                    {
                        new Item("October"),
                        new Item("November"),
                        new Item("December")
                    }
                }
            }
        });
    }
    public ObservableCollection<Item> Items { get; set; }
}

5. Register the Telerik controls through the Telerik.Maui.Controls.Compatibility.UseTelerik extension method called inside the CreateMauiApp method of the MauiProgram.cs file of your project:

• C#

using Telerik.Maui.Controls.Compatibility;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseTelerik()
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

        return builder.Build();
    }
}           

Additional Resources

• Expand and Collapse TreeView Items
• CheckBoxes in TreeView
• Styling the TreeView Item
• Scrolling options
• Multiple and Single Selection
• Events
• Available Commands in .NET MAUI TreeView