Walkthrough: Creating an Explorer Style Interface with the ListView and TreeView Controls Using the Designer
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.
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:
In the categories, choose either Visual Basic or Visual C#.
In the list of templates, choose Windows Forms 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 Properties window 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 Properties window fortreeView1
do the following:Add a ListView control named
listView1
to the form, and position it on the right side of the SplitContainer control. In the Properties window forlistview1
do the following:Open the ColumnHeader Collection Editor by clicking the ellipses () in the Columns property**.** Add three columns and set their Text property to
Name
,Type
, andLast Modified
, respectively. Click OK to close the dialog box.Set the SmallImageList property to
imageList1.
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); 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); } }
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
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;
Imports System.IO
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() { InitializeComponent(); PopulateTreeView(); }
Public Sub New() InitializeComponent() PopulateTreeView() End Sub
Handle the NodeMouseClick event for
treeview1
, and implement the code to populatelistview1
with a node's contents when a node is clicked. Add this code to theForm1
class.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); }
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
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);
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:
See also
.NET Desktop feedback