共用方式為


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

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

注意事項注意事項

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

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

  1. 在 [檔案] 功能表上,指向 [新增],然後按一下 [專案]。

  2. 在 [新增專案] 對話方塊中,執行下列動作:

    1. 在 [分類] 中,選擇 [Visual Basic] 或 [Visual C#]。

    2. 在範本清單中,選擇 [Windows Form 應用程式]。

  3. 按一下 [確定]。 新的 Windows Form 專案隨即建立。

  4. SplitContainer 控制項加入至表單,並將 Dock 屬性設定為 Fill

  5. 將名為 imageList1 的 ImageList 加入至表單,並使用 [屬性] 視窗加入兩個影像:資料夾影像和文件影像 (依此順序)。

  6. 將名為 treeview1 的 TreeView 控制項加入至表單,並將它放置在 SplitContainer 控制項的左邊。 在 treeView1 的 [屬性] 視窗中,執行下列操作:

    1. Dock 屬性設為 Fill

    2. ImageList 屬性設為 imagelist1.

  7. 將名為 listView1 的 ListView 控制項加入至表單,並將它放置在 SplitContainer 控制項的右邊。 在 listview1 的 [屬性] 視窗中,執行下列操作:

    1. Dock 屬性設為 Fill

    2. View 屬性設定為 Details

    3. 按一下 Columns 屬性中的省略符號 (VisualStudioEllipsesButton 螢幕擷取畫面),藉此開啟 [ColumnHeader 集合編輯器]。加入三個資料行,並將它們的 Text 屬性分別設定為 Name、Type 和 Last Modified。 按一下 [確定] 以關閉對話方塊。

    4. SmallImageList 屬性設定為 imageList1.

  8. 實作程式碼,以節點和子節點填入 TreeView。 將此程式碼加入至 Form1 類別。

    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);
                }
            }
    
  9. 由於之前的程式碼是使用 System.IO 命名空間 (Namespace),因此請加入適當的使用,或是在表單頂端位置匯入陳述式 (Statement)。

    Imports System.IO
    
    using System.IO;
    
  10. 在表單建構函式中呼叫上一個步驟的設定方法或 Load 事件處理方法。 將此程式碼加入至表單建構函式。

    Public Sub New() 
        InitializeComponent()
        PopulateTreeView()
    
    End Sub 'New
    
    
            public Form1()
            {
                InitializeComponent();
                PopulateTreeView();
            }
    
  11. 處理 treeview1 的 NodeMouseClick 事件,並實作程式碼,在按一下節點時以節點的內容填入 listview1。 將此程式碼加入至 Form1 類別。

    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 控制項,該控制項會在左邊顯示您的專案目錄,另外還有一個 ListView 控制項,該控制項位在右邊且擁有三個資料行。 您可以藉由選取目錄節點來周遊 TreeView,而 ListView 中會填入選取的目錄內容。

後續步驟

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

請參閱

工作

HOW TO:使用 Windows Form TreeView 控制項加入和移除節點

HOW TO:使用 Windows Form ListView 控制項加入和移除項目

HOW TO:將資料行加入至 Windows Form ListView 控制項

參考

ListView

TreeView

其他資源

ListView 控制項 (Windows Form)