We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to change SfTreeview items container style - Border around item children

I want to have one big border around all the children of an item and usually you can achieve that using ItemContainerStyle.

However, SfTreeView does not contain this property so I am not sure how to achieve this.

I attached an image showing what I am trying to achieve. The yellow part would be the parent node and the items inside are the children node.


1 Reply

VS Vijayarasan Sivanandham Syncfusion Team January 24, 2023 06:50 PM UTC

Hi Cynthia Vigil,

The SfTreeView does not have built-in support for customizing the appearance of parent nodes. However, you can use the ItemTemplateSelector to create custom templates for the parent nodes and customize their appearance based on your specific requirements. Please refer to the below code snippet,

XAML Code Snippet:


    <!--Here customize template for each nodel level in SfTreeView--> 

    <DataTemplate x:Key="firstLevelNodes">              

            <TextBlock Text="{Binding Content.Header,Mode=TwoWay}" />               


    <DataTemplate x:Key="blueStyleinSecondLevelNode">

        <TextBlock Text="{Binding Content.Brand,Mode=TwoWay}" Foreground="White" Background="Blue" />


    <local:ItemTemplateSelector x:Key="itemTemplateSelector"/>








                ItemTemplateSelector="{StaticResource itemTemplateSelector}"

                ItemsSource="{Binding Items}"

                ChildPropertyName="Models"  >           



C# Code Snippet related to ItemTemplateSelector:

public class ItemTemplateSelector : DataTemplateSelector


     public override DataTemplate SelectTemplate(object item, DependencyObject container)


         var treeviewNode = item as TreeViewNode;

         var treeView = container as SfTreeView;

         if (treeviewNode == null || treeView == null)

             return null;


         //Here apply the Background color for TreeViewItem in SfTreeView

         var treeViewInfo = treeView.GetItemInfo(treeviewNode.Content);

         if (treeViewInfo != null && treeViewInfo.Element != null)

             treeViewInfo.Element.Background = new SolidColorBrush(Colors.Yellow);


         //here check the Node level and load the template based on your requirement

         if (treeviewNode.Level == 0)

             return Application.Current.MainWindow.FindResource("firstLevelNodes") as DataTemplate;


             return Application.Current.MainWindow.FindResource("blueStyleinSecondLevelNode") as DataTemplate;



UG Link:


Find the sample in the attachment.


Vijayarasan S

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Attachment: SfTreeViewDemo_e31b18b4.zip

Live Chat Icon For mobile
Up arrow icon