How to Customize the TreeNavigator Item in the TreeNavigator Control

This article explains how to customize TreeNavigator items in the TreeNavigator control.

You can achieve this customization by setting the value of a property within the TreeNavigator’s Item-ContainerStyle. This style allows you to customize the container element responsible for displaying each respective item within the TreeNavigator control.

XAML

<syncfusion:sftreenavigator itemssource="{Binding Models}" header="Enterprise Toolkit" width="300" height="400" horizontalalignment="Center" verticalalignment="Center" selecteditem="{Binding SelectedItem,Mode=TwoWay}">
           <syncfusion:sftreenavigator.itemtemplate>
               <hierarchicaldatatemplate itemssource="{Binding Models}">
                   <stackpanel orientation="Vertical">
                       <textblock text="{Binding Header}" height="20" verticalalignment="Center" margin="10">                             
                       </textblock></stackpanel>
               </hierarchicaldatatemplate>
           </syncfusion:sftreenavigator.itemtemplate>
           <syncfusion:sftreenavigator.itemcontainerstyle>
               <Style TargetType="{x:Type syncfusion:SfTreeNavigatorItem}">
                   <Setter Property="Height" Value="100" />
                   <Setter Property="Foreground" Value="Red"/>
                   <Setter Property="FontWeight" Value="DemiBold"/>
                   <Setter Property="FontStyle" Value="Italic"/>    
                   <Setter Property="Width" Value="300"/>            
               </Style>
           </syncfusion:sftreenavigator.itemcontainerstyle>
</syncfusion:sftreenavigator> 

Output: