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

Artigo
12/18/2024

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

Para criar o formulário que contém um controle ListView e TreeView

No menu Ficheiro, aponte para Novoe, em seguida, clique em Projeto.
Na caixa de diálogo Novo Projeto, faça o seguinte:
1. Nas categorias, escolha Visual Basic ou Visual C#.
2. Na lista de modelos, escolha Aplicativo do Windows Forms.
Clique OK. Um novo projeto do Windows Forms é criado.
Adicione um controle SplitContainer ao formulário e defina sua propriedade Dock como Fill.
Adicione uma ImageList chamada imageList1 ao formulário e use a janela Propriedades para adicionar duas imagens: uma imagem de pasta e uma imagem de documento, nessa ordem.
Adicione um controle TreeView chamado treeview1 ao formulário e posicione-o no lado esquerdo do controle SplitContainer. Na janela Propriedades de treeView1 faça o seguinte:
1. Defina a propriedade Dock como Fill.
2. Defina a propriedade ImageList como imagelist1.
Adicione um controle ListView chamado listView1 ao formulário e posicione-o no lado direito do controle SplitContainer. Na janela Propriedades de 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 propriedade Columns**.** Adicione três colunas e defina sua propriedade Text como Name, Typee Last Modified, respectivamente. Clique OK para fechar a caixa de diálogo.
4. Defina a propriedade SmallImageList como imageList1.

Implemente o código para preencher o TreeView com nós e subnós. 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

Como o código anterior usa o namespace System.IO, adicione a instrução using ou import apropriada na parte superior do formulário.
```
using System.IO;
```
```
Imports System.IO
```
Chame o método de inicialização da etapa anterior no construtor do formulário ou no método Load de manipulação de eventos. Adicione este código ao construtor do formulário.
```
public Form1()
{
    InitializeComponent();
    PopulateTreeView();
}
```
```
Public Sub New() 
    InitializeComponent()
    PopulateTreeView()

End Sub
```

Manipule o evento NodeMouseClick para treeview1, e implemente o código para preencher listview1 com o 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 NodeMouseClick associado ao seu método de manipulação de eventos. Adicione este código ao construtor do formulário.

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

Testando o aplicativo

Agora você pode testar o formulário para garantir que ele se comporte conforme o esperado.

Para testar o formulário

Pressione F5 para executar o aplicativo.

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

Próximos passos

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:

Partilhar via

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

Para criar o formulário que contém um controle ListView e TreeView

Testando o aplicativo

Para testar o formulário

Próximos passos

Ver também

Recursos adicionais