Поделиться через

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

  • Статья

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

Примечание

Отображаемые диалоговые окна и команды меню могут отличаться от описанных в справке в зависимости от текущих настроек или выпуска.Чтобы изменить параметры, выберите в меню Сервис пункт Импорт и экспорт параметров.Дополнительные сведения см. в разделе Работа с параметрами.

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

  1. В меню Файл последовательно выберите пункты Создать и Проект.

  2. В диалоговом окне Новый проект выполните следующие действия:

    1. В области категорий выберите Visual Basic или Visual C#.

    2. В списке шаблонов выберите Приложение Windows Forms.

  3. Нажмите кнопку ОК. Создается новый проект Windows Forms.

  4. Добавьте к форме элемент управления SplitContainer и присвойте его свойству Dock значение Fill.

  5. Добавьте в форму объект ImageList с именем imageList1 и используйте окно свойств для добавления изображения папки и изображения документа (в указанном порядке).

  6. Добавьте к форме элемент управления TreeView с именем treeview1 и расположите его в левой части элемента управления SplitContainer. В окне свойств treeView1 задайте следующие значения свойств.

    1. Задайте для свойства Dock значение Fill.

    2. Задайте для свойства ImageList значение imagelist1..

  7. Добавьте к форме элемент управления ListView с именем listView1 и расположите его в правой части элемента управления SplitContainer. В окне свойств listview1 задайте следующие значения свойств.

    1. Задайте для свойства Dock значение Fill.

    2. Задайте для свойства View значение Details.

    3. Откройте редактор коллекции ColumnHeader, нажав кнопку с многоточием (Снимок экрана VisualStudioEllipsesButton) в свойстве Columns. Добавьте три столбца и присвойте их свойству 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, добавьте соответствующий элемент или импортируйте оператор в начало формы.

    Imports System.IO

    using System.IO;

  10. В конструкторе форм вызовите метод настройки из предыдущего шага или метод обработки событий Load. Добавьте следующий код в конструктор формы.

    Public Sub New() 
    InitializeComponent()
    PopulateTreeView()

End Sub 'New


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

  11. Обработайте событие NodeMouseClick для значения treeview1и создайте код, заполняющий 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 и ListView. Для получения дополнительных сведений об этих элементах управления см. следующие разделы:

См. также

Задачи

Практическое руководство. Добавление и удаление узлов элемента управления TreeView в Windows Forms

Практическое руководство. Добавление и удаление элементов с помощью элемента управления ListView в Windows Forms

Практическое руководство. Добавление столбцов в элемент управления ListView в Windows Forms

Ссылки

ListView

TreeView

Другие ресурсы

Элемент управления ListView (Windows Forms)