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

[Cynthia Vigil]

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.

[Vijayarasan Sivanandham]

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:

<Window.Resources>

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

    <DataTemplate x:Key="firstLevelNodes">              

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

    </DataTemplate>       

    <DataTemplate x:Key="blueStyleinSecondLevelNode">

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

    </DataTemplate>

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

</Window.Resources>

 

<Grid>

    <syncfusion:SfTreeView

                x:Name="treeView"                  

                AutoExpandMode="AllNodes"                              

                ItemTemplateDataContextType="Node"

                ItemTemplateSelector="{StaticResource itemTemplateSelector}"

                ItemsSource="{Binding Items}"

                ChildPropertyName="Models"  >           

    </syncfusion:SfTreeView>

</Grid>

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;

         else

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

     }

 }

UG Link: https://help.syncfusion.com/wpf/treeview/appearance#itemtemplate-selector

https://help.syncfusion.com/wpf/treeview/appearance#bindingcontext-for-itemtemplate

Find the sample in the attachment.

Regards,

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