---
title: "TreeView control in WPF"  
description: "When we want to show some information in hierarchical format that is in parent child relationship then we use concept of tree view control. Example of"  
author: "Anonymous User"  
published: 2011-04-03  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/531/treeview-control-in-wpf  
category: "wpf"  
tags: ["wpf"]  
reading_time: 3 minutes  

---

# TreeView control in WPF

When we want to show some information in hierarchical format that is in parent child [relationship](https://www.mindstick.com/articles/54917/how-to-keep-her-happy-in-a-long-distance-relationship) then we use concept of tree view control. Example of tree view control is msdn [tutorial](https://yourviews.mindstick.com/view/81591/semrush-tutorial-and-review-2020-how-to-use-it-to-20x-your-website-traffic), windows [explorer](https://yourviews.mindstick.com/view/81617/now-it-is-time-to-say-goodbye-to-internet-explorer) etc. You can use [TreeView control](https://www.mindstick.com/articles/325/treeview-control-in-vb-dot-net) to display information from a wide variety of data sources such as [xml file](https://www.mindstick.com/articles/75/how-to-read-and-write-xml-file-through-c-sharp), sitemap path etc.\

<TreeView /> element in WPF represents tree view control in WPF.

##### Following code snippet represents use of TreeView control in WPF.

```
<Grid>        <Canvas Height="290" HorizontalAlignment="Left" Background="BurlyWood" Margin="12,12,0,0" x:Name="canvas1" VerticalAlignment="Top" Width="679">            <TreeView Canvas.Left="6" Canvas.Top="6" Height="278" x:Name="treeView1" Width="667" />        </Canvas>        <Canvas Background="BurlyWood" x:Name="canvas2" Width="679" Margin="12,308,12,12">            <TextBlock Canvas.Left="116" Canvas.Top="16" Height="24" x:Name="txbNodeName" Text="Enter Node Name" Width="113" />            <TextBox Canvas.Left="268" Canvas.Top="13" Height="23" x:Name="txtNodeName" Width="260" />            <Button Canvas.Left="42" Canvas.Top="50" Content="Add Parent Node" Height="23" x:Name="btnAddParent" Width="187" Click="btnAddParent_Click" />            <Button Canvas.Left="246" Canvas.Top="50" Content="Add Child Node" Height="23" x:Name="btnAddChild" Width="187" Click="btnAddChild_Click" />            <Button Canvas.Left="449" Canvas.Top="50" Content="Delete Selected Node" Height="23" x:Name="btnDeleteNode" Width="187" Click="btnDeleteNode_Click" />        </Canvas></Grid>
```

After writing these code snippets a [user interface](https://www.mindstick.com/blog/302016/what-is-user-interface-and-what-are-its-benefits) is designed with one tree view control, one text box control and three [button control](https://www.mindstick.com/articles/290/button-control-in-vb-dot-net).

##### Output of the following code snippet is as follows

![TreeView control in WPF](https://www.mindstick.com/mindstickarticle/2e32e73c-6298-4119-bd56-cf49a9b00a7f/images/baeabb3a-136f-4e9d-9e88-184871994d89.png)

##### Code for adding parent node

```
/// <summary>        /// Method for adding parent node in a tree view control.        /// When user click on add parent node button after specifying        /// node name in a text box then that node is added in        /// tree view control.        /// </summary>        /// <param name="sender"></param>        /// <param name="e"></param>          private void btnAddParent_Click(object sender, RoutedEventArgs e)        {            if (txtNodeName.Text.Trim().Length != 0)    //Checking length of text box            {                TreeViewItem newChild = new TreeViewItem(); //Creating an object of tree view item class.                newChild.Header = txtNodeName.Text;  //Setting header property of tree view item class.                treeView1.Items.Add(newChild);//Adding newly node control in tree view.                txtNodeName.Clear();   //Clearing content of text box control.            }            else            {                MessageBox.Show("Please enter name of the node.");            }        }
```

##### Code for adding child node

```
/// <summary>        /// When user click on Add child button after specifying node name in text box        /// then that child is added as a child in selected parent node.        /// </summary>        /// <param name="sender"></param>        /// <param name="e"></param>          private void btnAddChild_Click(object sender, RoutedEventArgs e)        {            if (txtNodeName.Text.Trim().Length != 0)  //Checking length of text box.            {                TreeViewItem newChild = new TreeViewItem();  //Creating an object of TreeViewItem class.                newChild.Header = txtNodeName.Text;  //Setting header property of new node.                if (treeView1.SelectedItem != null) //Checking any parent node is selected or not.                {                    TreeViewItem parentChild = (TreeViewItem)treeView1.SelectedItem;  //obtaining reference of seleceted node.                    parentChild.Items.Add(newChild); // Adding child to selected node.                }                else                {                    MessageBox.Show("Please select the parent of this child node.");                }            }            else            {                MessageBox.Show("Please enter name of the node.");            }            txtNodeName.Clear();        }
```

##### Code for deleting root node

```
/// <summary>        // When user click on Delete Node button then selected        // Node is deleted. Important in this code user can delete        //only child node.        /// </summary>        /// <param name="sender"></param>        /// <param name="e"></param>          private void btnDeleteNode_Click(object sender, RoutedEventArgs e)        {            if (treeView1.SelectedItem != null) //Checking whether any node is selected or not.            {                treeView1.Items.Remove(treeView1.SelectedItem);  //Removing the selected node.            }            else            {                MessageBox.Show("Please select the node thats need to be deleted.");            }        }
```

\

---

Original Source: https://www.mindstick.com/articles/531/treeview-control-in-wpf

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.