Passo a passo: criando uma interface no estilo do Explorer com os controles ListView e TreeView usando o Designer

Um dos benefícios do Visual Studio é a capacidade de criar aplicativos dos Windows Forms com aparência profissional em pouco tempo. Um cenário comum é a criação de uma interface do usuário (UI) com ListView e TreeView controles que se assemelha ao recurso Windows Explorer dos sistemas operacionais Windows. O Windows Explorer exibe uma estrutura hierárquica de arquivos e pastas no computador do usuário.

Para criar o formulário contendo controles ListView e TreeView

1. No menu Arquivo , aponte para Novoe clique em Projeto.

2. Na caixa de diálogo Novo Projeto , faça o seguinte:

   1. Em categorias, escolha Visual Basic ou Visual C#.

   2. Na lista de modelos, escolha Aplicativo dos Windows Forms.

3. Clique em OK. Um novo projeto dos Windows Forms é criado.

4. Adicione um SplitContainer controle ao formulário e defina sua Dock propriedade como Fill.

5. Adicione um ImageList nome imageList1 ao formulário e use a janela Propriedades para adicionar duas imagens: uma imagem de pasta e uma imagem de documento, nessa ordem.

6. Adicione um TreeView controle nomeado treeview1 ao formulário e posicione-o no lado esquerdo do SplitContainer controle. Na janela Propriedades para treeView1, faça o seguinte:

   1. Defina a propriedade Dock como Fill.

   2. Defina a propriedade ImageList como imagelist1.

7. Adicione um ListView controle nomeado listView1 ao formulário e posicione-o no lado direito do SplitContainer controle. Na janela Propriedades para listview1, faça o seguinte:

   1. Defina a propriedade Dock como Fill.

   2. Defina a propriedade View como Details.

   3. Abra o Editor de Coleção ColumnHeader clicando nas reticências () na Columns propriedade**.** Adicione três colunas e defina sua Text propriedade como Name, e Last Modified, Typerespectivamente. Clique em OK para fechar a caixa de diálogo.

   4. Defina a propriedade SmallImageList como imageList1.

8. Implemente o código para preencher os TreeView nós e subnós com. Adicione este código à classe 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. Uma vez que o código anterior usa o namespace System.IO, adicione as instruções using ou import adequadas na parte superior do formulário.

   using System.IO;
   

   Imports System.IO
   

10. Chame o método de configuração da etapa anterior no construtor do formulário ou Load no método de manipulação de eventos. Adicione este código ao construtor de formulário.

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

    Public Sub New() 
        InitializeComponent()
        PopulateTreeView()
    
    End Sub
    
    

11. Manipule o evento para e implemente o código para treeview1preencher listview1 com o NodeMouseClick conteúdo de um nó quando um nó for clicado. Adicione este código à classe 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
    
    

    Se você estiver usando C#, certifique-se de ter o evento associado ao NodeMouseClick seu método de manipulação de eventos. Adicione este código ao construtor de formulário.

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

Testando o aplicativo

Agora, é possível testar o formulário para garantir que ele se comporta da forma esperada.

Para testar o formulário

• Pressione F5 para executar o aplicativo.

  Você verá um formulário dividido contendo um controle que exibe o diretório do projeto no lado esquerdo e um TreeViewListView controle no lado direito com três colunas. Você pode percorrer o selecionando nós de diretório, e o é preenchido com o TreeViewListView conteúdo do diretório selecionado.

Próximas etapas

Esta aplicação dá-lhe um exemplo de uma maneira que você pode usar TreeView e ListView controles juntos. Para obter mais informações sobre esses controles, consulte os seguintes tópicos:

• Como adicionar informações personalizadas a um controle TreeView ou ListView (Windows Forms)

• Como Adicionar Recursos de Pesquisa a um Controle ListView

• Como anexar um menu de atalho a um nó TreeView

Confira também

• ListView
• TreeView
• Controle ListView
• Como adicionar e remover nós com o controle TreeView dos Windows Forms
• Como adicionar e remover itens com o controle ListView do Windows Forms
• Como Adicionar Colunas ao Controle ListView dos Windows Forms