Walkthrough: Creating an Explorer Style Interface with the ListView and TreeView Controls Using the Designer

Article
01/22/2011

One of the benefits of Visual Studio is the ability to create professional-looking Windows Forms applications in a short of amount of time. A common scenario is creating a user interface (UI) with ListView and TreeView controls that resembles the Windows Explorer feature of Windows operating systems. Windows Explorer displays a hierarchical structure of the files and folders on a user's computer.

Note

The dialog boxes and menu commands you see might differ from those described in Help depending on your active settings or edition. To change your settings, choose Import and Export Settings on the Tools menu. For more information, see Visual Studio Settings.

To create the form containing a ListView and TreeView control

On the File menu, point to New, and then click Project.
In the New Project dialog box, do the following:
1. In the Project Types pane, choose either Visual Basic Projects or Visual C# Projects.
2. In the Templates pane, choose Windows Application.
Click OK. A new Windows Forms project is created.
Add a SplitContainer control to the form and set its Dock property to Fill.
Add an ImageList named imageList1 to the form and use the property browser to add two images: a folder image and a document image, in that order.
Add a TreeView control named treeview1 to the form, and position it on the left side of the SplitContainer control. In the property browser for treeView1 do the following:
1. Set the Dock property to Fill.
2. Set the ImageList property to imagelist1.
Add a ListView control named listView1 to the form, and position it on the right side of the SplitContainer control. In the property browser for listview1 do the following:
1. Set the Dock property to Fill.
2. Set the View property to Details.
3. Open the ColumnHeader Collection Editor by clicking the ellipses () in the Columns property**.** Add three columns and set their Text property to Name, Type, and Last Modified, respectively. Click OK to close the dialog box.
4. Set the SmallImageList property to imageList1.

Implement the code to populate the TreeView with nodes and subnodes. The example code reads from the file system and requires the existence of two icons, folder.ico and doc.ico that were previously added to imageList1.

Private Sub PopulateTreeView() 
    Dim rootNode As TreeNode

    Dim info As New DirectoryInfo("../..")
    If info.Exists Then
        rootNode = New TreeNode(info.Name)
        rootNode.Tag = info
        GetDirectories(info.GetDirectories(), rootNode)
        treeView1.Nodes.Add(rootNode)
    End If

End Sub

Private Sub GetDirectories(ByVal subDirs() As DirectoryInfo, _
    ByVal nodeToAddTo As TreeNode)

    Dim aNode As TreeNode
    Dim subSubDirs() As DirectoryInfo
    Dim subDir As DirectoryInfo
    For Each subDir In subDirs
        aNode = New TreeNode(subDir.Name, 0, 0)
        aNode.Tag = subDir
        aNode.ImageKey = "folder"
        subSubDirs = subDir.GetDirectories()
        If subSubDirs.Length <> 0 Then
            GetDirectories(subSubDirs, aNode)
        End If
        nodeToAddTo.Nodes.Add(aNode)
    Next subDir

End Sub

        private void PopulateTreeView()
        {
            TreeNode rootNode;

            DirectoryInfo info = new DirectoryInfo(@"../..");
            if (info.Exists)
            {
                rootNode = new TreeNode(info.Name);
                rootNode.Tag = info;
                GetDirectories(info.GetDirectories(), rootNode);
                treeView1.Nodes.Add(rootNode);
            }
        }

        private void GetDirectories(DirectoryInfo[] subDirs, 
            TreeNode nodeToAddTo)
        {
            TreeNode aNode;
            DirectoryInfo[] subSubDirs;
            foreach (DirectoryInfo subDir in subDirs)
            {
                aNode = new TreeNode(subDir.Name, 0, 0);
                aNode.Tag = subDir;
                aNode.ImageKey = "folder";
                subSubDirs = subDir.GetDirectories();
                if (subSubDirs.Length != 0)
                {
                    GetDirectories(subSubDirs, aNode);
                }
                nodeToAddTo.Nodes.Add(aNode);
            }
        }

Since the previous code uses the System.IO namespace, add the appropriate using or import statement at the top of the form.
```
Imports System.IO
```
```
using System.IO;
```

Call the set-up method from the previous step in the form's constructor or Load event-handling method.

Public Sub New() 
    InitializeComponent()
    PopulateTreeView()

End Sub 'New

     public Form1()
        {
            InitializeComponent();
            PopulateTreeView();
        }

Handle the NodeMouseClick event for treeview1**,** and implement the code to populatelistview1with a node'scontents when a node is clicked.

Private Sub treeView1_NodeMouseClick(ByVal sender As Object, _
    ByVal e As TreeNodeMouseClickEventArgs) _
        Handles treeView1.NodeMouseClick

    Dim newSelected As TreeNode = e.Node
    listView1.Items.Clear()
    Dim nodeDirInfo As DirectoryInfo = _
    CType(newSelected.Tag, DirectoryInfo)
    Dim subItems() As ListViewItem.ListViewSubItem
    Dim item As ListViewItem = Nothing

    Dim dir As DirectoryInfo
    For Each dir In nodeDirInfo.GetDirectories()
        item = New ListViewItem(dir.Name, 0)
        subItems = New ListViewItem.ListViewSubItem() _
            {New ListViewItem.ListViewSubItem(item, "Directory"), _
            New ListViewItem.ListViewSubItem(item, _
            dir.LastAccessTime.ToShortDateString())}

        item.SubItems.AddRange(subItems)
        listView1.Items.Add(item)
    Next dir
    Dim file As FileInfo
    For Each file In nodeDirInfo.GetFiles()
        item = New ListViewItem(file.Name, 1)
        subItems = New ListViewItem.ListViewSubItem() _
            {New ListViewItem.ListViewSubItem(item, "File"), _
            New ListViewItem.ListViewSubItem(item, _
            file.LastAccessTime.ToShortDateString())}

        item.SubItems.AddRange(subItems)
        listView1.Items.Add(item)
    Next file

    listView1.AutoResizeColumns(ColumnHeaderAutoResizeStyle.HeaderSize)

End Sub

     void treeView1_NodeMouseClick(object sender,
            TreeNodeMouseClickEventArgs e) 
        {
            TreeNode newSelected = e.Node;
            listView1.Items.Clear();
            DirectoryInfo nodeDirInfo = (DirectoryInfo)newSelected.Tag;
            ListViewItem.ListViewSubItem[] subItems;
            ListViewItem item = null;

            foreach (DirectoryInfo dir in nodeDirInfo.GetDirectories())
            {
                item = new ListViewItem(dir.Name, 0);
                subItems = new ListViewItem.ListViewSubItem[]
                    {new ListViewItem.ListViewSubItem(item, "Directory"), 
                     new ListViewItem.ListViewSubItem(item, 
                        dir.LastAccessTime.ToShortDateString())};
                item.SubItems.AddRange(subItems);
                listView1.Items.Add(item);
            }
            foreach (FileInfo file in nodeDirInfo.GetFiles())
            {
                item = new ListViewItem(file.Name, 1);
                subItems = new ListViewItem.ListViewSubItem[]
                    { new ListViewItem.ListViewSubItem(item, "File"), 
                     new ListViewItem.ListViewSubItem(item, 
                        file.LastAccessTime.ToShortDateString())};

                item.SubItems.AddRange(subItems);
                listView1.Items.Add(item);
            }

            listView1.AutoResizeColumns(ColumnHeaderAutoResizeStyle.HeaderSize);
        }

If you are using C#, make sure you have the NodeMouseClick event associated with its event-handling method.

          this.treeView1.NodeMouseClick += 
                new TreeNodeMouseClickEventHandler(this.treeView1_NodeMouseClick);

Testing the Application

You can now test the form to make sure it behaves as expected.

To test the form

Press F5 to run the application.

You will see a split form containing a TreeView control that displays your project directory on the left side, and a ListView control on the right side with three columns. You can traverse the TreeView by selecting directory nodes, and the ListView is populated with the contents of the selected directory.

Next Steps

This application gives you an example of a way you can use TreeView and ListView controls together. For more information on these controls, see the following topics:

Walkthrough: Creating an Explorer Style Interface with the ListView and TreeView Controls Using the Designer

To create the form containing a ListView and TreeView control

Testing the Application

To test the form

Next Steps

See Also

Tasks

Reference

Other Resources

Additional resources