Пример. Создание интерфейса в стиле проводника с использованием элементов управления ListView и TreeView с помощью конструктора
Обновлен: Ноябрь 2007
Одним из преимуществ Visual Studio 2005 является возможность создания профессионально выглядящих приложений Windows Forms в короткие сроки. Обычно создается пользовательский интерфейс с элементами управления ListView и TreeView, который напоминает проводник операционной системы Windows. Проводник Windows отображает иерархическую структуру файлов и папок, расположенных на компьютере пользователя.
Примечание. |
---|
Отображаемые диалоговые окна и команды меню могут отличаться от описанных в справке в зависимости от текущих настроек или выпуска среды. Для изменения настроек выберите Импорт и экспорт параметров в меню Сервис. Дополнительные сведения см. в разделе Параметры Visual Studio. |
Чтобы создать форму с элементами управления ListView и TreeView, выполните следующие действия:
В меню Файл выберите Создать, затем выберите Проект.
В диалоговом окне Создать проект выполните следующие действия:
В области Типы проектов выберите пункт Проекты Visual Basic или Проекты Visual C#.
В области Шаблоны выберите Приложение Windows.
Нажмите кнопку ОК. Создается новый проект Windows Forms.
Добавьте к форме элемент управления SplitContainer и присвойте его свойству Dock значение Fill.
Добавьте к форме элемент управления ImageList с именем imageList1 и используйте обозреватель свойств для добавления двух изображений: папки и документа (в указанном порядке).
Добавьте к форме элемент управления TreeView с именем treeview1 и расположите его в левой части элемента управления SplitContainer. Выполните следующие действия для элемента treeView1 в обозревателе свойств:
Добавьте к форме элемент управления ListView с именем listView1 и расположите его в правой части элемента управления SplitContainer. Выполните следующие действия для элемента listview1 в обозревателе свойств:
Откройте редактор коллекции ColumnHeader, нажав кнопку с многоточием () в свойстве Columns. Добавьте три столбца и присвойте их свойству Text значения Name, Type и Last Modified соответственно. Нажмите кнопку ОК, чтобы закрыть диалоговое окно.
Установите для свойства SmallImageList значение imageList1..
Создайте код для заполнения элемента TreeView узлами и подузлами. Например, код выполняет чтение данных из файловой системы и требует наличия двух значков, folder.ico и doc.ico, которые были ранее добавлены к imageList1.
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, добавьте соответствующий элемент или импортируйте оператор в начало формы.
Imports System.IO
using System.IO;
В конструкторе форм вызовите метод настройки из предыдущего шага или метод обработки событий Load.
Public Sub New() InitializeComponent() PopulateTreeView() End Sub 'New
public Form1() { InitializeComponent(); PopulateTreeView(); }
Обработайте событие NodeMouseClick для значения treeview1и создайте код, выполняющий заполнение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 и ListView. Для получения дополнительных сведений об этих элементах управления см. следующие разделы:
Практическое руководство. Добавление в элемент управления ListView возможностей поиска
Практическое руководство. Подключение контекстного меню к узлу элемента управления TreeView
См. также
Задачи
Практическое руководство. Добавление и удаление узлов элемента управления TreeView в Windows Forms
Практическое руководство. Добавление столбцов в элемент управления ListView в Windows Forms