Jul 1, 2013

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

To create the form containing a ListView and TreeView control

  1. On the File menu, point to New, and then click Project.
  2. In the New Project dialog box, do the following:
    1. In the categories, choose either Visual Basic or Visual C#.
    2. In the list of templates, choose Windows Forms Application.
  3. Click OK. A new Windows Forms project is created.
  4. Add a SplitContainer control to the form and set its Dock property to Fill.
  5. Add an ImageList named imageList1 to the form and use the Properties window to add two images: a folder image and a document image, in that order.
  6. Add a TreeView control named treeview1 to the form, and position it on the left side of the SplitContainer control. In the Properties window for treeView1 do the following:
    1. Set the Dock property to Fill.
    2. Set the ImageList property to imagelist1.
  7. Add a ListView control named listView1 to the form, and position it on the right side of the SplitContainer control. In the Properties window 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 (VisualStudioEllipsesButton screenshot) 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.
  8. Implement the code to populate the TreeView with nodes and subnodes. Add this code to the Form1 class.
            private void PopulateTreeView()
                TreeNode rootNode;
       DirectoryInfo info = new DirectoryInfo(@"../..");
                if (info.Exists)
                    rootNode = new TreeNode(info.Name);
                    rootNode.Tag = info;
                    GetDirectories(info.GetDirectories(), 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);
  9. Since the previous code uses the System.IO namespace, add the appropriate using or import statement at the top of the form.
    using System.IO;
  10. Call the set-up method from the previous step in the form's constructor or Load event-handling method. Add this code to the form constructor.
      public Form1()
  11. Handle the NodeMouseClick event for treeview1, and implement the code to populatelistview1with a node'scontents when a node is clicked. Add this code to the Form1 class.
      void treeView1_NodeMouseClick(object sender,
       TreeNodeMouseClickEventArgs e) 
       TreeNode newSelected = e.Node;
       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, 
       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, 
    If you are using C#, make sure you have the NodeMouseClick event associated with its event-handling method. Add this code to the form constructor.
       this.treeView1.NodeMouseClick += 
        new TreeNodeMouseClickEventHandler(this.treeView1_NodeMouseClick);
You can now test the form to make sure it behaves as expected.

To test the form


Post a Comment

Nam Le © 2014 - Designed by Templateism.com, Distributed By Templatelib