共用方式為

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

  • 發行項

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

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

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

  2. 在 [新增專案] 對話方塊中，執行下列操作：

    1. 在類別中，選擇 Visual Basic 或 Visual C#。

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

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

  4. 將 SplitContainer 控制項新增至表單並將其 Dock 屬性設為 Fill。

  5. 將名為 imageList1 的 ImageList 新增至表單，並使用 [屬性] 視窗依序新增兩個影像：資料夾影像和文件影像。

  6. 將名為 treeview1 的 TreeView 控制項新增至表單，並將它放置在 SplitContainer 控制項的左側。 在 treeView1 的 [屬性] 視窗中，執行下列步驟：

    1. 將 Dock 屬性設為 Fill。

    2. 將 ImageList 屬性設定為 imagelist1.

  7. 將名為 listView1 的 ListView 控制項新增至表單，並將它放置在 SplitContainer 控制項的右側。 在 treeView1 的 [屬性] 視窗中，執行下列步驟：

    1. 將 Dock 屬性設為 Fill。

    2. 將 Dock 屬性設為 Fill。

    3. 按一下 Columns 屬性中的省略符號 (The Ellipsis button (...) in the Properties window of Visual Studio.Visual Studio [屬性] 視窗中的 [省略符號] 按鈕 (...)。)，開啟 ColumnHeader 集合編輯器。新增三個資料行並將其 Text 屬性分別設定為 Name、Type 和 Last Modified。 按一下 [確定] ，關閉對話方塊。

    4. 將 ImageList 屬性設定為 imagelist1.

  8. 實作程式碼，將節點和子節點填入 TreeView。 將此程式碼新增至 Form1 類別。

    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

  9. 由於先前的程式碼使用 System.IO 命名空間，因此在表單頂端新增適當的 using 或 import 陳述式。

    using System.IO;

    Imports System.IO

  10. 從表單的建構函式或 Load 事件處理方法中的前一個步驟呼叫 set-up 方法。 將此程式碼新增至表單建構函式。

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

    Public Sub New() 
    InitializeComponent()
    PopulateTreeView()

End Sub

  11. 處理 treeview1 的 NodeMouseClick 事件並實作程式碼，以在點選節點時將節點的內容填入 listview1。 將此程式碼新增至 Form1 類別。

    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

    如果您使用 C#，請確定您有與其事件處理方法相關聯的 NodeMouseClick 事件。 將此程式碼新增至表單建構函式。

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

測試應用程式

您現在可以測試表單，以確保其如預期般運作。

測試表單

  • 按 F5 執行應用程式。

    您會看到一個分割表單，其中包含左側顯示專案目錄的 TreeView 控制項，以及右側有三個資料行的 ListView 控制項。 您可以選取目錄節點來周遊 TreeView，而 ListView 會填入所選目錄的內容。

後續步驟

此應用程式提供一個範例，讓您能一起使用 TreeView 和 ListView 控制項。 如需這些控制項的詳細資訊，請參閱下列主題：

另請參閱