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

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

Note

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

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

См. также