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(); } }