Пошаговое руководство. Создание интерфейса стиля обозревателя с элементами управления ListView и TreeView с помощью конструктора

Одним из преимуществ Visual Studio является возможность создавать профессиональные приложения Windows Forms в течение короткого времени. Распространенный сценарий — создание пользовательского интерфейса с ListView и TreeView элементами управления, которые напоминают функцию Проводника в операционных системах Windows. Обозреватель Windows отображает иерархическую структуру файлов и папок на компьютере пользователя.

Чтобы создать форму, содержащую элементы управления ListView и TreeView

В меню Файл выберите пункт Создать и затем пункт Проект.
В диалоговом окне "Новый проект" сделайте следующее:
1. В категориях выберите Visual Basic или Visual C#.
2. В списке шаблонов выберите приложение Windows Forms.
Нажмите кнопку ОК. Создается новый проект Windows Forms.
Добавьте элемент управления SplitContainer в форму и задайте его свойству Dock значение Fill.
ImageList Добавьте имя imageList1 в форму и используйте окно "Свойства", чтобы добавить два изображения: изображение папки и изображение документа в этом порядке.
TreeView Добавьте элемент управления с именем treeview1 в форму и поместите его слева SplitContainer от элемента управления. В окне "Свойства" выполните следующие действия с treeView1:
1. Задайте для свойства Dock значение Fill.
2. Задайте для свойства ImageList значение imagelist1.
ListView Добавьте элемент управления с именем listView1 в форму и поместите его справа SplitContainer от элемента управления. В окне "Свойства" выполните следующие действия с listview1:
1. Задайте для свойства Dock значение Fill.
2. Задайте для свойства View значение Details.
3. Откройте редактор коллекции ColumnHeader, нажав многоточие (Columns свойстве**.** Добавьте три столбца и задайте для свойства значение TextName, Typeи Last Modifiedсоответственно. Нажмите кнопку ОК, чтобы закрыть диалоговое окно.
4. Задайте для свойства SmallImageList значение imageList1.

Реализуйте код для заполнения 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 методе обработки событий. Добавьте этот код в конструктор формы.
```
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 управления. Дополнительные сведения об этих элементах управления см. в следующих разделах:

См. также

Обратная связь

Были ли сведения на этой странице полезными?

Last updated on 2025-05-07