Home > DeveloperSection > Beginner > TreeView control in WPF

TreeView control in WPF


WPF WPF 
Ratings:
0 Comment(s)
 8180  View(s)
Rate this:

TreeView control in WPF

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 tree view control is msdn tutorial, windows explorer etc. You can use TreeView control to display information from a wide variety of data sources such as xml file, 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 is designed with one tree view control, one text box control and three button control.

Output of the following code snippet is as follows

TreeView control in WPF

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.");

            }

        }

 


Don't want to miss updates? Please click the below button!

Follow MindStick