Articles in this section
Category / Section

How to customize TreeView ItemTemplate based on the node expanded state in Xamarin.Forms (SfTreeView)

2 mins read

You can customize the TreeView ItemTemplate based on the node whether the node is expanded or not in Xamarin.Forms SfTreeView by DataTemplateSelector.

C#

Changing the node Template at runtime by using OnSelectTemplate method based on node expanded state.

public class ItemTemplateSelector : DataTemplateSelector
{
    public DataTemplate RootNodeTemplate { get; set; }
    public DataTemplate ChildNodeTemplate { get; set; }
 
    public DataTemplate CollapsedTemplate { get; set; }
 
    public ItemTemplateSelector()
    {
        this.RootNodeTemplate = new DataTemplate(typeof(RootNodeTemplate));
        this.ChildNodeTemplate = new DataTemplate(typeof(ChildNodeTemplate));
        this.CollapsedTemplate = new DataTemplate(typeof(CollapsedTemplate));
    }
    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        var treeviewNode = item as TreeViewNode;
        if (treeviewNode == null)
            return null;
        if (!treeviewNode.IsExpanded && treeviewNode.HasChildNodes && treeviewNode.Level == 0)
            return this.CollapsedTemplate;
        else if (treeviewNode.Level == 0)
            return this.RootNodeTemplate;
        else
            return this.ChildNodeTemplate;
    }
}

 

XAML

DataTemplateSelector bound to ItemTemplate property.

<ContentPage.Resources>
    <ResourceDictionary>
        <local:ItemTemplateSelector x:Key="ItemTemplateSelector" />
    </ResourceDictionary>
</ContentPage.Resources>
 
<StackLayout Orientation="Vertical" Padding="5">
    <syncfusion:SfTreeView x:Name="treeView" NotificationSubscriptionMode="CollectionChange,PropertyChange"  
                            ItemHeight="40"
                            Indentation="15"
                            ExpanderWidth="40"
                            ChildPropertyName="SubFiles"
                            ItemsSource="{Binding ImageNodeInfo}"
                            ItemTemplate="{StaticResource ItemTemplateSelector}"
                            AutoExpandMode="AllNodesExpanded">
    </syncfusion:SfTreeView>
</StackLayout>

Output

CustomizedItemTemplate

View sample in GitHub

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