逐步解說：使用設計工具以 ListView 和 TreeView 控制項建立檔案總管風格的介面

發行項
08/21/2008

更新：2007 年 11 月

Visual Studio 2005 的優點之一是具備在短時間內建立外觀專業的 Windows Form 應用程式的能力。常見的案例是使用 ListView 和 TreeView 控制項來建立使用者介面 (UI)，這些控制項與 Windows 作業系統的 [Windows 檔案總管] 功能相似。[Windows 檔案總管] 會顯示使用者電腦上檔案和資料夾的階層式結構。

注意事項：
根據您目前使用的設定或版本，您所看到的對話方塊與功能表指令可能會與 [說明] 中描述的不同。如果要變更設定，請從 [工具] 功能表中選擇 [匯入和匯出設定]。如需詳細資訊，請參閱 Visual Studio 設定。

若要建立包含 ListView 和 TreeView 控制項的表單

在 [檔案] 功能表上，指向 [新增]，然後按一下 [專案]。
在 [新增專案] 對話方塊中，執行下列動作：
1. 在 [專案類型] 窗格中，選擇 [Visual Basic 專案] 或 [Visual C# 專案]。
2. 在 [範本] 窗格中選擇 [Windows 應用程式]。
按一下 [確定]。新的 Windows Form 專案隨即建立。
將 SplitContainer 控制項加入至表單，並將 Dock 屬性設定為 Fill。
將名為 imageList1 的 ImageList 加入至表單，並使用 [屬性瀏覽器] 加入兩個影像：資料夾和文件影像 (依此順序)。
將名為 treeview1 的 TreeView 控制項加入至表單，並將它放置在 SplitContainer 控制項的左邊。在 treeView1 的 [屬性瀏覽器] 中執行下列步驟：
1. 將 Dock 屬性設為 Fill。
2. 將 ImageList 屬性設定為 imagelist1.
將名為 listView1 的 ListView 控制項加入至表單，並將它放置在 SplitContainer 控制項的右邊。在 listview1 的 [屬性瀏覽器] 中執行下列步驟：
1. 將 Dock 屬性設為 Fill。
2. 將 View 屬性設定為 Details。
3. 按一下 Columns 屬性中的省略符號 ()，藉此開啟 [ColumnHeader 集合編輯器]。加入三個資料行，並將它們的 Text 屬性分別設定為 Name、Type 和 Last Modified。按一下 [確定] 以關閉對話方塊。
4. 將 SmallImageList 屬性設定為 imageList1.

實作程式碼，以節點和子節點填入 TreeView。範例程式碼會從檔案系統讀取，並需要存在兩個圖示：即先前加入至 imageList1 的 folder.ico 和 doc.ico。

Private Sub PopulateTreeView() 
    Dim rootNode As TreeNode

    Dim info As New DirectoryInfo("C:\Documents and Settings")
    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(@"C:\Documents and Settings");
            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);
            }
        }

由於之前的程式碼是使用 System.IO 命名空間 (Namespace)，因此請加入適當的使用，或是在表單頂端位置匯入陳述式 (Statement)。
```
Imports System.IO
```
```
using System.IO;
```

在表單建構函式中呼叫上一個步驟的設定方法或 Load 事件處理方法。

Public Sub New() 
    InitializeComponent()
    PopulateTreeView()

End Sub 'New

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

處理 treeview1 的 NodeMouseClick 事件，並實作程式碼，在按一下節點時以節點的內容填入 listview1。

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);
        }

如果您是使用 C#，請確定已將 NodeMouseClick 事件與其事件處理方法相關聯。

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

測試應用程式

您現在可以測試表單以確定它的行為表現如預期般。

若要測試表單

請按 F5 以執行應用程式。

您將會看到分隔表單，此表單包含 TreeView 控制項 (此控制項位在左邊，顯示標記為 c:\Documents and Settings 的目錄) 以及 ListView 控制項 (位於右邊，擁有三個資料行)。您可以藉由選取目錄節點以周遊 TreeView，而選取的目錄內容會填入 ListView。

後續步驟

這個應用程式提供您可以同時使用 TreeView and ListView 控制項的方法案例。如需這些控制項的詳細資訊，請參閱下列主題：

請參閱

Share via