WPF TreeView Example

Introduction

The WPF TreeView control provides a way to display information in a hierarchical structure by using collapsible nodes. This blog introduces the TreeView and demonstrates how to create TreeView, add a child using XAML and C# language. We will see a code example of loading XML content into WPF TreeView.

WPF TreeView

Getting Started

WPF TreeView is an ItemsControl that nests the items by using TreeViewItem controls in a hierarchy structure. A TreeViewItem control is a HeaderedItemsControl that has a Header and an Item collection. If an item is not a TreeViewItem control, it is automatically enclosed by a TreeViewItem control when the TreeView control is displayed.

The ItemsSource can be specified for TreeView control as a data source and then specify a HeaderTemplate and ItemTemplate to define the TreeViewItem content. To define the layout of a TreeViewItem control, you can also use HierarchicalDataTemplate objects.

Create a WPF TreeView using XAML

The following example creates a simple TreeView using the XAML code.

 <TreeView Name="tveStudents" >  
      <TreeViewItem Header="Kailash Behera"/>  
      <TreeViewItem Header="Radhika Behera"/>  
 </TreeView>  

WPF TreeView Example

Create a WPF TreeView using C#

Like other WPF controls WPF TreeView can also be created at run time using C# code. The following example creates the same TreeView in c# what we have created using the XAML code

 TreeView treeView = new TreeView();  
       TreeViewItem treeViewItem1 = new TreeViewItem();  
       treeViewItem1.Header = "Student1";  
       treeViewItem1.IsSelected = true;  
       TreeViewItem treeViewItem2 = new TreeViewItem();  
       treeViewItem2.Header = "Student1";  
       treeViewItem2.IsSelected = true;  
       treeView.Items.Add(treeViewItem1);  
       treeView.Items.Add(treeViewItem2);  

WPF TreeView Example

Hierarchical WPF TreeView

The following two code example creates a hierarchical TreeView control using XAML and C# code.

XML

 <TreeView Name="tveStudents" >  
  <TreeViewItem Header="Student1" IsSelected="True">  
   <TreeViewItem Header="Kailash Behera"/>  
   <TreeViewItem Header="Student ID">  
    <TreeViewItem Header="ST20200901"/>  
   </TreeViewItem>  
   <TreeViewItem Header="Pet Days">  
    <TreeViewItem Header="Monday"/>  
    <TreeViewItem Header="Tuesday"/>  
    <TreeViewItem Header="Thursday"/>  
   </TreeViewItem>  
  </TreeViewItem>  
  <TreeViewItem Header="Student2">  
   <TreeViewItem Header="Radhika Behera"/>  
   <TreeViewItem Header="Student ID">  
    <TreeViewItem Header="ST20200902"/>  
   </TreeViewItem>  
   <TreeViewItem Header="Pet Days">  
    <TreeViewItem Header="Tuesday"/>  
    <TreeViewItem Header="Wednesday"/>  
    <TreeViewItem Header="Friday"/>  
   </TreeViewItem>  
  </TreeViewItem>  
 </TreeView>  

C#

 TreeView treeView = new TreeView();  
   
       // First Node  
       TreeViewItem treeViewItem1 = new TreeViewItem();  
       treeViewItem1.Header = "Student1";  
       treeViewItem1.IsSelected = true;  
   
       TreeViewItem treeViewItem1_1 = new TreeViewItem();  
       treeViewItem1_1.Header = "Kailash Behera";  
   
       treeViewItem1.Items.Add(treeViewItem1_1);  
   
       TreeViewItem treeViewItem1_2 = new TreeViewItem();  
       treeViewItem1_2.Header = "Student ID";  
   
       TreeViewItem treeViewItem1_2_1 = new TreeViewItem();  
       treeViewItem1_2_1.Header = "ST20200901";  
   
       treeViewItem1_2.Items.Add(treeViewItem1_2_1);  
   
       treeViewItem1.Items.Add(treeViewItem1_2);  
   
       TreeViewItem treeViewItem1_3 = new TreeViewItem();  
       treeViewItem1_3.Header = "Pet Days";  
   
       TreeViewItem treeViewItem1_3_1 = new TreeViewItem();  
       treeViewItem1_3_1.Header = "Monday";  
   
       treeViewItem1_3.Items.Add(treeViewItem1_3_1);  
   
       TreeViewItem treeViewItem1_3_2 = new TreeViewItem();  
       treeViewItem1_3_2.Header = "Tuesday";  
   
       treeViewItem1_3.Items.Add(treeViewItem1_3_2);  
   
       TreeViewItem treeViewItem1_3_3 = new TreeViewItem();  
       treeViewItem1_3_3.Header = "Thursday";  
   
       treeViewItem1_3.Items.Add(treeViewItem1_3_3);  
   
       treeViewItem1.Items.Add(treeViewItem1_3);  
   
       // Second Node  
       TreeViewItem treeViewItem2 = new TreeViewItem();  
       treeViewItem2.Header = "Student1";  
       treeViewItem2.IsSelected = true;  
   
       TreeViewItem treeViewItem2_1 = new TreeViewItem();  
       treeViewItem2_1.Header = "Kailash Behera";  
   
       treeViewItem2.Items.Add(treeViewItem2_1);  
   
       TreeViewItem treeViewItem2_2 = new TreeViewItem();  
       treeViewItem2_2.Header = "Student ID";  
   
       TreeViewItem treeViewItem2_2_1 = new TreeViewItem();  
       treeViewItem2_2_1.Header = "ST20200901";  
   
       treeViewItem2_2.Items.Add(treeViewItem2_2_1);  
   
       treeViewItem2.Items.Add(treeViewItem2_2);  
   
       TreeViewItem treeViewItem2_3 = new TreeViewItem();  
       treeViewItem2_3.Header = "Pet Days";  
   
       TreeViewItem treeViewItem2_3_1 = new TreeViewItem();  
       treeViewItem2_3_1.Header = "Monday";  
   
       treeViewItem2_3.Items.Add(treeViewItem2_3_1);  
   
       TreeViewItem treeViewItem2_3_2 = new TreeViewItem();  
       treeViewItem2_3_2.Header = "Tuesday";  
   
       treeViewItem2_3.Items.Add(treeViewItem2_3_2);  
   
       TreeViewItem treeViewItem2_3_3 = new TreeViewItem();  
       treeViewItem2_3_3.Header = "Thursday";  
   
       treeViewItem2_3.Items.Add(treeViewItem2_3_3);  
   
       treeViewItem2.Items.Add(treeViewItem2_3);  
   
   
       treeView.Items.Add(treeViewItem2);  
       treeView.Items.Add(treeViewItem2);  

Custom WPF TreeView

The following code example creates a custom TreeView control by modifying the TreeViewItem control. It basically displays a checkbox and image control in the hierarchy.

 <TreeView Name="tveStudents" >  
       <TreeViewItem Header="Kailash">  
         <TreeViewItem>  
           <TreeViewItem.Header>  
             <StackPanel Orientation="Horizontal">  
               <TextBlock Text="Details"/>  
               <CheckBox Content="Edit" Name="ckbedit"/>  
             </StackPanel>  
           </TreeViewItem.Header>  
           <StackPanel Orientation="Vertical">  
             <Image Source="kailashsblogs.jpg" Stretch="Fill" Height="300" Width="300"/>  
             <TextBlock VerticalAlignment="center" Text ="{Binding ElementName=txtCaption, Path=Text, Mode=OneWay}" HorizontalAlignment="Center"/>  
             <StackPanel Orientation="Horizontal">  
               <TextBlock Text="Change Caption"/>  
               <TextBox Name="txtCaption" Text="MyPhoto" Width="210"/>  
               <StackPanel.Style>  
                 <Style TargetType="StackPanel">  
                   <Setter Property="Visibility" Value="Collapsed"/>  
                   <Style.Triggers>  
                     <DataTrigger Binding="{Binding ElementName=ckbedit, Path=IsChecked, Mode=OneWay}" Value="true">  
                       <Setter Property="Visibility" Value="Visible"/>  
                     </DataTrigger>  
                   </Style.Triggers>  
                 </Style>  
               </StackPanel.Style>  
             </StackPanel>  
           </StackPanel>  
         </TreeViewItem>  
       </TreeViewItem>  
       <TreeViewItem Header="Radhika"/>  
     </TreeView>  

Styling TreeView WPF

WPF Styles are used to change appearance of any WPF Control. To customize the appearance of a TreeViewItem control, set the Style property to a custom Style.The following example shows how to set the Foreground and FontSize property values for a TreeViewItem control by using a Style.

 <TreeView Name="tveStudents" >  
       <TreeView.ItemContainerStyle>  
         <Style TargetType="{x:Type TreeViewItem}">  
           <Setter Property="Foreground" Value="Blue"/>  
           <Setter Property="FontSize" Value="12"/>  
         </Style>  
       </TreeView.ItemContainerStyle>  
       <TreeViewItem Header="Kailash Behera"/>  
       <TreeViewItem Header="Radhika Behera"/>  
     </TreeView>  

Summary

In the above, we saw the various code example in XAML and C# for WPF TreeView, hierarchical and custom treeview. we also learn how to style a treeview using xaml. I hope you have enjoyed it a lot.

Thanks