How to customize appearance of Item based in .NET MAUI TreeView (SfTreeView)?

You can customize the ItemTemplate based on the node by using DataTemplateSelector in .NET MAUI TreeView.

<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:MAUITreeView"
             x:Class="MAUITreeView.MainPage">

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

    <ContentPage.Resources>
        <ResourceDictionary>
            <local:ItemTemplateSelector x:Key="ItemTemplateSelector" />
        </ResourceDictionary>
    </ContentPage.Resources>
    
    <ContentPage.Content>
        <syncfusion:SfTreeView x:Name="treeView" Indentation="15"
                               AutoExpandMode="AllNodesExpanded" 
                               ItemTemplateContextType="Node" 
                               ChildPropertyName="SubFiles"
                               ItemHeight="25"
                               ItemsSource="{Binding ImageNodeInfo}" 
                               ItemTemplate="{StaticResource ItemTemplateSelector}"/>

    </ContentPage.Content>
</ContentPage>

public class ItemTemplateSelector : DataTemplateSelector
{
    public DataTemplate _ParentTemplate { get; set; }
    public DataTemplate _ChildTemplate { get; set; }
    public ItemTemplateSelector()
    {
        this._ParentTemplate = new DataTemplate(typeof(ParentTemplate));
        this._ChildTemplate = new DataTemplate(typeof(ChildTemplate));
    }
    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        var node = item as TreeViewNode;
        var treeviewItem = node.Content as FileManager;
        if (treeviewItem == null)
            return null;
        if (treeviewItem.SubFiles != null)
            return _ParentTemplate;
        else
            return _ChildTemplate;
    }
}

Output

Download the complete sample from GitHub

Conclusion

I hope you enjoyed learning how to customize the appearance of an item based in .NET MAUI TreeView.

You can refer to our .NET MAUI TreeView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications.

You can also explore our .NET MAUI TreeView example to understand how to create and manipulate data.

You can check out our components from the License and Downloads page for current customers. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.

If you have any queries or require clarification, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!