Tree lines in WPF TreeView (SfTreeView)

10 Jul 20263 minutes to read

TreeView allows to show the tree lines for treeview nodes by enabling the ShowLines property to true. The default value is false.

XAML

<treeview:SfTreeView
    Name="sfTreeView"    
    ShowLines="True"
    ChildPropertyName="Childs"
    ItemTemplate="{StaticResource SfTreeView_ItemTemplate}"
    ItemsSource="{Binding Nodes1}" />

C#

sfTreeView.ShowLines = true;

Enable tree line for root nodes

The TreeView also supports showing tree lines for root nodes by enabling the ShowRootLines property to true. The default value is false.

XAML

<treeview:SfTreeView
    Name="sfTreeView"    
    ShowLines="True"
    ShowRootLines="True"
    ChildPropertyName="Childs"
    ItemTemplate="{StaticResource SfTreeView_ItemTemplate}"
    ItemsSource="{Binding Nodes1}" />

C#

sfTreeView.ShowLines = true;
sfTreeView.ShowRootLines = true;

Customizing the tree lines

Customizing the line color

TreeView allows to change the color of tree lines by using the LineStroke property. The default value is System.Windows.Media.Colors.LightSlateGray.

XAML

<treeview:SfTreeView
    Name="sfTreeView"    
    ShowLines="True"
    ShowRootLines="True"
    LineStroke="DeepSkyBlue"
    ChildPropertyName="Childs"
    ItemTemplate="{StaticResource SfTreeView_ItemTemplate}"
    ItemsSource="{Binding Nodes1}" />

C#

sfTreeView.ShowLines = true;
sfTreeView.ShowRootLines = true;
sfTreeView.LineStroke = new SolidColorBrush(Colors.DeepSkyBlue);

Customizing the line thickness

TreeView allows to change the thickness of tree lines by using the LineStrokeThickness property. The default value is 1.

XAML

<treeview:SfTreeView
            Name="sfTreeView"           
            ShowLines="True"
            ShowRootLines="True"
            LineStrokeThickness="1.5"
            ChildPropertyName="Childs"
            ItemTemplate="{StaticResource SfTreeView_ItemTemplate}"
            ItemsSource="{Binding Nodes1}" />

C#

sfTreeView.ShowLines = true;
sfTreeView.ShowRootLines = true;
sfTreeView.LineStrokeThickness = 1.5;

NOTE

You can refer to our WPF TreeView feature tour page for its key feature highlights. You can also explore our WPF TreeView example to know how to represent hierarchical data in a tree-like structure with expand and collapse node options.