How to customize the nodes or items with unbound mode in .NET MAUI TreeView (SfTreeView)?

You can customize TreeViewNodes in unbound mode using the ItemTemplate in .NET MAUI TreeView.

Customize the TextColor of the TreeViewNode by using a converter applied to the elements loaded in the ItemTemplate.

<syncfusion:SfTreeView x:Name="treeView" 
                       ItemHeight="25">
    <syncfusion:SfTreeView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Label Text="{Binding Content}" 
                       VerticalOptions="Center"
                       TextColor="{Binding Level, Converter={StaticResource textColorConverter}}"/>
            </Grid>
        </DataTemplate>
    </syncfusion:SfTreeView.ItemTemplate>
 
    <syncfusion:SfTreeView.Nodes>
        <treeviewengine:TreeViewNode Content="Australia" IsExpanded="True">
            <treeviewengine:TreeViewNode.ChildNodes>
                <treeviewengine:TreeViewNode Content="New South Wales">
                    <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>

Here is the converter to return the color value based on the Level of the TreeViewNode.

 public class TextColorConverter : IValueConverter
 {
     public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
     {
         var level = (int)value;
         if (level == 0) return Colors.Red;
         else if (level == 1) return Colors.Blue;
         else return Colors.Green;
     }

     public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
     {
         throw new NotImplementedException();
     }
 }

Output

Download the complete sample from GitHub.

Conclusion

I hope you enjoyed learning how to customize the nodes or items with unbound 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. 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!