Articles in this section
Category / Section

How to customize the item template in an unbound Xamarin.Forms TreeView (SfTreeView)

1 min read

You can customise TreeViewNodes in the unbound mode using the ItemTemplate in Xamarin.Forms SfTreeView.

XAML

Customize the TextColor of the TreeViewNode by using the converter to the element loaded in the ItemTemplate.

<syncfusion:SfTreeView x:Name="treeView">
    <syncfusion:SfTreeView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Label Text="{Binding Content}" TextColor="{Binding Level, Converter={StaticResource textColorConverter}}" VerticalOptions="Center"/>
            </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>

C#

Converter to return the TextColor based on the Level.

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

View sample in GitHub

Demo image to customize nodes in SfTreeView UnBoundMode

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied