Прочитать на английском

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

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

  • 07.05.2025

Одним из преимуществ 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, нажав многоточие (кнопка многоточия (...) в окне свойств Visual Studio.) вColumns свойстве**.** Добавьте три столбца и задайте для свойства значение TextName, 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);
    }
}

  9. Так как предыдущий код использует пространство имен System.IO, добавьте соответствующую инструкцию using или import в верхней части формы.

    using System.IO;

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

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

  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);
}

    Если вы используете C#, убедитесь, что у вас есть NodeMouseClick событие, связанное с его методом обработки событий. Добавьте этот код в конструктор формы.

    this.treeView1.NodeMouseClick +=
    new TreeNodeMouseClickEventHandler(this.treeView1_NodeMouseClick);

Тестирование приложения

Теперь вы можете протестировать форму, чтобы убедиться, что она работает должным образом.

Тестирование формы

  • Нажмите клавишу F5, чтобы запустить приложение.

    Вы увидите разделенную TreeView форму, содержащую элемент управления, отображающий каталог проекта слева, и ListView элемент управления справа с тремя столбцами. Вы можете выбрать TreeView узлы каталога и ListView заполнить его содержимым выбранного каталога.

Дальнейшие шаги

Это приложение дает пример способа совместного использования TreeView и ListView управления. Дополнительные сведения об этих элементах управления см. в следующих разделах:

См. также