逐步解說:使用設計工具以 ListView 和 TreeView 控制項建立檔案總管風格的介面
Visual Studio 的優點之一是能夠在短時間內建立專業型式的 Windows Forms 應用程式。 常見的案例是使用 和 控制項來建立使用者 ListView 介面 (UI),其 TreeView 類似于 Windows 作業系統的 Windows 檔案總管功能。 Windows 檔案總管會顯示使用者電腦上檔案和資料夾的階層式結構。
建立包含 ListView 和 TreeView 控制項的表單
在 [檔案] 功能表上,指向 [開新檔案] ,然後按一下 [專案] 。
在 [ 新增專案 ] 對話方塊中,執行下列動作:
在類別中,選擇 Visual Basic 或 Visual C# 。
在範本清單中,選擇 [Windows Forms 應用程式 ]。
按一下 [確定]。 會建立新的 Windows Forms 專案。
SplitContainer將控制項新增至表單,並將其 屬性設定 Dock 為 Fill 。
將具名
imageList1
新增 ImageList 至表單,並使用屬性視窗來新增兩個影像:資料夾影像和檔影像,依該順序。TreeView將名為
treeview1
的控制項新增至表單,並將它放置在控制項的 SplitContainer 左側。 在 屬性視窗treeView1
中,執行下列動作:ListView將名為
listView1
的控制項新增至表單,並將它放置在控制項右側 SplitContainer 。 在 屬性視窗listview1
中,執行下列動作:實作程式碼,以節點和子節點填入 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
由於先前的程式碼使用 System.IO 命名空間,因此請在表單頂端新增適當的 using 或 import 語句。
using System.IO;
Imports System.IO
從表單建構函式或 Load 事件處理方法中的上一個步驟呼叫 set-up 方法。 將此程式碼新增至表單建構函式。
public Form1() { InitializeComponent(); PopulateTreeView(); }
Public Sub New() InitializeComponent() PopulateTreeView() End Sub
NodeMouseClick處理 的事件
treeview1
, 並實作程式碼,以在按一下節點時填入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 控制項。 如需這些控制項的詳細資訊,請參閱下列主題:
另請參閱
意見反應
https://aka.ms/ContentUserFeedback。
即將登場:在 2024 年,我們將逐步淘汰 GitHub 問題作為內容的意見反應機制,並將它取代為新的意見反應系統。 如需詳細資訊,請參閱:提交並檢視相關的意見反應