Home

Windows Control: The Tree View
 

Introduction

A tree view is a control that resembles an upside down tree and displays a hierarchical list of items. Like a normal tree, a tree view starts in the top section with an object referred to as the root. Under the root, a real tree is made of branches and leaves. In an application, a tree view is only made of branches and each branch is called a node. In real world, a leaf cannot have a branch as its child, only a branch can have another branch as its child and a branch can have a leaf as a child. In an application, a node (any node) can have a node as a child.

Like a real world tree, the branches or nodes of a tree view use a type of relationship so that they are not completely independent. For example, a tree view can be based on a list that has a parent item and other child items that depend on that parent. In real world, if you cut a branch, the branches and leaves attached to it also disappear. This scenario is also valid for a tree view.

Most of the time, a tree has only one root but a tree in an application can have more than one root.

 

Tree View Creation

In a Windows application a tree view is primarily a control like any other. To use it in your application, you can click the TreeView button in the Toolbox and click a form or other control in your application. This is equivalent to programmatically declaring a variable of type TreeView, using the new operator to instantiate it and adding it to its container's list of controls through a call to the Controls.Add() method. Here is an example: 

using System;
using System.Drawing;
using System.Windows.Forms;

public class Exercise : System.Windows.Forms.Form
{
    TreeView tvwCountries;

    public Exercise()
    {
        InitializeComponent();
    }

    private void InitializeComponent()
    {
        Text = "Countries Statistics";
        Size = new Size(242, 280);

        tvwCountries = new TreeView();

        tvwCountries.Location = new Point(12, 12);
        tvwCountries.Width = 210;
        tvwCountries.Height = 230;

        Controls.Add(tvwCountries);
    }
}

public class Program
{
    static int Main()
    {
        System.Windows.Forms.Application.Run(new Exercise());
        return 0;
    }
}

This would produce:

Countries Statistics

Using a TreeView variable only adds a rectangular empty control to your application. The next action you probably take is to add one or more branches to the tree.
 

Practical LearningPractical Learning: Introducing the Tree View Control
  1. Start Microsoft Visual C#
  2. Create a new Windows Application named CollegeParkAutoParts2
  3. In the Solution Explorer, right-click Form1.cs and click Rename
  4. Type Central.cs and press Enter
  5. Design the form as follows:
     
    College Park Auto Parts - Form Design
    Control Text Name Other Properties
    Label Label College Park Auto-Parts   Font: Times New Roman, 20.25pt, style=Bold
    Panel     Height: 2
    TreeView TreeView   tvwAutoParts  
    GroupBox GroupBox      
    ListView ListView   lvwAutoParts View: Details
    Columns   (Name) Text TextAlign Width
    colPartNumber Part #    
    colPartName Part Name   300
    colUnitPrice Unit Price Right 80
    GroupBox GroupBox Selected Parts    
    Label Label Part #    
    Label Label Part Name    
    Label Label Unit Price    
    Label Label Qty    
    Label Label Sub Total    
    TextBox TextBox   txtPartNumber1  
    TextBox TextBox   txtPartName1  
    TextBox TextBox 0.00 txtUnitPrice1 TextAlign: Right
    TextBox TextBox 0 txtQuantity1 TextAlign: Right
    TextBox TextBox 0.00 txtSubTotal1 TextAlign: Right
    Button Button Remove btnRemove1  
    TextBox TextBox   txtPartNumber2  
    TextBox TextBox   txtPartName2  
    TextBox TextBox 0.00 txtUnitPrice2 TextAlign: Right
    TextBox TextBox 0 txtQuantity2 TextAlign: Right
    TextBox TextBox 0.00 txtSubTotal2 TextAlign: Right
    Button Button Remove btnRemove2  
    TextBox TextBox   txtPartNumber3  
    TextBox TextBox   txtPartName3  
    TextBox TextBox 0.00 txtUnitPrice3 TextAlign: Right
    TextBox TextBox 0 txtQuantity3 TextAlign: Right
    TextBox TextBox 0.00 txtSubTotal3 TextAlign: Right
    Button Button Remove btnRemove3  
    TextBox TextBox   txtPartNumber4  
    TextBox TextBox   txtPartName4  
    TextBox TextBox 0.00 txtUnitPrice4 TextAlign: Right
    TextBox TextBox 0 txtQuantity4 TextAlign: Right
    TextBox TextBox 0.00 txtSubTotal4 TextAlign: Right
    Button Button Remove btnRemove4  
    TextBox TextBox   txtPartNumber5  
    TextBox TextBox   txtPartName5  
    TextBox TextBox 0.00 txtUnitPrice5 TextAlign: Right
    TextBox TextBox 0 txtQuantity5 TextAlign: Right
    TextBox TextBox 0.00 txtSubTotal5 TextAlign: Right
    Button Button Remove btnRemove5  
    TextBox TextBox   txtPartNumber6  
    TextBox TextBox   txtPartName6  
    TextBox TextBox 0.00 txtUnitPrice6 TextAlign: Right
    TextBox TextBox 0 txtQuantity6 TextAlign: Right
    TextBox TextBox 0.00 txtSubTotal6 TextAlign: Right
    Button Button Remove btnRemove6  
    GroupBox GroupBox Order Summary    
    Button Button New Auto-Part... btnNewAutoPart  
    Label Label Total Order:    
    TextBox TextBox 0.00 txtTotalOrder  
    Button Button Close btnClose  
  6. Execute the application to test it
  7. Close the form and return to your programming environment
Home Copyright © 2007-2010 FunctionX, Inc. Next