Figure 15.2

A traditional explorer-style interface displaying photo albums.

15.2.1CREATING A TREE VIEW

There is, in fact, an issue here with how a tree view and list view are arranged on the form. The gray vertical bar in the middle of our interface is a special control called a splitter to separate the two controls. We will talk about splitters in a moment. First, let’s add a TreeView to our form and see what happens.

Set the version number for the MyAlbumExplorer application to 15.2.

So far, so good. We have a TreeView on the left and a ListView on the right. If you run this program, you will see the interface shown in figure 15.3. The tree control is on the left, and the list view on the right. We have not added any nodes to our tree yet, but the photo albums from the default album directory appear in the list view as was discussed in chapter 14. Note here that the ListView must be brought to the top of the z-order in step 2 to ensure it is not obscured by the TreeView control.

TRY IT! Send the ListView control to the bottom of the z-order using the Send to Back menu item. Run the application to see what happens. Because the controls are placed on the form starting at the bottom of the z-order, the ListView in this case fills the entire client window. The TreeView is then docked to the left of the form. When the ListView is at the top, the TreeView is docked first, and then the ListView fills the remaining area.

You will note that if you resize the form in figure 15.3, the size of the tree view does not change. In addition, the line between the two controls cannot be dragged as is the case in other explorer-style programs such as Windows Explorer.

We can enable this behavior by adding a Splitter control to our form. We will do this next, after which we will look at populating our tree with some items.

Figure 15.3

The ListView control here works as before, just within a smaller area.

15.2.2USING THE SPLITTER CLASS

As a short aside to our discussion on tree views, the Splitter class is useful for dividing all or part of a form or other container into two resizable sections. While some readers may not consider a splitter control to be an advanced concept, it fits nicely into our discussion of the MyAlbumExplorer application, so this is where it goes.

Typically a splitter provides separate areas for two collection or container controls, normally one of the ListBox, ListView, TreeView, or Panel controls. An overview of the Splitter class is given in .NET Table 15.2.

A splitter can appear horizontally or vertically. When docked to the top or bottom of a container, it is a horizontal splitter; when docked to the left or right, it is a vertical

splitter. We will create a vertical splitter in our MyAlbumExplorer application, and then discuss how to turn this into a horizontal splitter.

.NET Table 15.2 Splitter class

The Splitter class represents a control that divides a container into two sections. Each section contains a docked control, and the splitter permits the user to resize each section at runtime. This class is part of the System.Windows.Forms namespace, and inherits from the Control class. See .NET Table 4.1 on page 104 for a list of members inherited by this class.

The steps to create a vertical splitter are detailed in the following table.

ADD A SPLITTER CONTROL

Compile the application to see the splitter in action. Figure 15.4 shows our window with the splitter dragged far to the right. The MinExtra property setting ensures that the items in the ListView cannot be obscured by dragging the splitter all the way to the right side of the window. The ListView can still disappear when the form is resized, which we will fix in a moment.

Figure 15.4

The splitter control permits the user to resize the display areas as required for the specific contents.

Before we make some additional changes to our application, let’s talk briefly about how the splitter is positioned. Here is an excerpt of the InitializeComponent method generated by Visual Studio .NET for our form.

private void InitializeComponent()

{

. . .

this.listViewMain.Dock = System.Windows.Forms.DockStyle.Fill;

. . .

this.treeViewMain.Dock = System.Windows.Forms.DockStyle.Left; this.treeViewMain.Size = new System.Drawing.Size(100, 253);

. . .

//

//splitter1

this.splitter1.Location = new System.Drawing.Point(100, 0); this.splitter1.MinExtra = 100;

this.splitter1.Size = new System.Drawing.Size(3, 253);

. . .

//MainForm

//

this.ClientSize = new System.Drawing.Size(392, 253); this.Controls.AddRange(new System.Windows.Forms.Control[] {

this.listViewMain,

this.splitter1,

this.treeViewMain});

. . .

}

In the AddRange call made within this code, note how the Splitter control “splits” the Control array added to the Controls property for the form. This establishes the proper z-order for the form so that the controls appear properly. We can change this to a vertical splitter by changing the Dock property for both the Splitter and the TreeView controls to DockStyle.Top. Visual Studio .NET

automatically adjusts the zontal orientation.

While this is not part of our final application, these changes are shown in the following code. The corresponding application window appears in figure 15.5.

private void InitializeComponent()

{

//Changes to configure the application with a horizontal splitter

//( not part of our final application )

. . .

this.listViewMain.Dock = System.Windows.Forms.DockStyle.Fill;

. . .

this.treeViewMain.Dock = System.Windows.Forms.DockStyle.Top; this.treeViewMain.Size = new System.Drawing.Size(392, 100);

. . .

//

// splitter1

//

this.splitter1.Dock = System.Windows.Forms.DockStyle.Top; this.splitter1.Location = new System.Drawing.Point(100, 0); this.splitter1.MinExtra = 100;

this.splitter1.Size = new System.Drawing.Size(392, 3);

. . .

}

Figure 15.5

This figure displays a horizontal splitter between a tree view and list view control (not our approach).

If you make these changes in your code, make certain you undo them before continuing, as we would like to have a vertical splitter in our final application. Let’s get back to our TreeView object and add some nodes to this control.

15.2.3USING THE TREENODE CLASS

Now that the list and tree views on our form are separated by a splitter control, we will get back to the tree view itself. Tree views contain nodes, which may contain other nodes, which may contain still other nodes, and so forth. Each node in the tree is represented by a TreeNode object. This class is summarized in .NET Table 15.3. In the Windows Explorer application, for example, each directory is represented as a tree node, and may contain other directories or files.

.NET Table 15.3 TreeNode class

The TreeNode class represents a marshal by reference object that acts as an element, or a node, within a TreeView control. A TreeNode object can contain other nodes to represent a hierarchy of objects within a tree view. Contained nodes are called child nodes. A top-level node in a TreeView object is called a root node of the tree. Each TreeNode object can be contained by exactly one TreeView or TreeNode object. This class is part of the System.Windows.Forms namespace, and inherits from the System.MarshalByRefObject class.