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


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

Одним из преимуществ Visual Studio является возможность создавать профессионально оформленные приложения Windows Forms за короткий промежуток времени. Распространенный сценарий — создание пользовательского интерфейса с элементами управления ListView и TreeView, похожими на функцию проводника Windows в операционной системе 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, щелкнув многоточие (The Ellipsis button (...) in the Properties window of Visual Studio.) в Columns свойстве**.** Добавьте три столбца и задайте для свойства значение NameText , Typeи Last Modifiedсоответственно. Чтобы закрыть диалоговое окно, нажмите кнопку ОК .

    4. Задайте свойству SmallImageList значение 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. Добавьте этот код в конструктор форм.

    public Form1()
    {
        InitializeComponent();
        PopulateTreeView();
    }
    
    Public Sub New() 
        InitializeComponent()
        PopulateTreeView()
    
    End Sub
    
    
  11. Обработайте событие 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 вместе и управлять ими. Дополнительные сведения об этих возможностях см. в следующих разделах:

См. также