Demonstra Passo a passo: A criação de uma Interface de estilo do Explorer com os controles ListView e TreeView usando o Designer

Artigo
08/04/2011

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

Observação
As caixas de diálogo e comandos de menu demonstradas podem ser diferentes daqueles descritos na Ajuda, dependendo das configurações ativas ou configurações de edição. Para alterar as configurações, escolha Import and Export Settings sobre o Ferramentas menu. Para obter mais informações, consulte Trabalhando com configurações.

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

No menu File, aponte para New, e em seguida, clique em Project.
No Novo projeto caixa de diálogo, siga o seguinte:
1. Em categorias, escolha Visual Basic ou Visual C#.
2. Na lista de modelos, escolha Windows Forms Application.
Clique em OK. Um novo projeto Windows Forms é criado.
Adicionar um SplitContainer o controle para o formulário e defina sua Dock propriedade para Fill.
Adicionar um ImageList chamado imageList1 para o formulário e usar a janela de propriedades para adicionar duas imagens: uma imagem de pasta e uma imagem de documento, nessa ordem.
Adicionar um TreeView controle chamado treeview1 para o formulário e posicione-a no lado esquerdo do SplitContainer de controle. Na janela Properties para treeView1 , faça o seguinte:
1. Defina a propriedade Dock como Fill.
2. Definir o ImageList propriedade para imagelist1.
Adicionar um ListView controle chamado listView1 para o formulário e posicioná-la no lado direito da SplitContainer de controle. Na janela Properties 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 seus Text propriedade para Name, Type, e Last Modified, respectivamente. Clique OK para fechar a caixa de diálogo.
4. Definir o SmallImageList propriedade para imageList1.

Implementar o código para preencher o TreeView conosco e subnós. Adicione este código para o Form1 classe.

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

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

Como o código anterior usa o namespace System. IO, o uso apropriado de adicionar ou importar instrução na parte superior do formulário.
```
Imports System.IO
```
```
using System.IO;
```

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

Public Sub New() 
    InitializeComponent()
    PopulateTreeView()

End Sub 'New

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

Lidar com o NodeMouseClick evento para treeview1**,** e implementar o código para preencherlistview1com um nóde conteúdo quando um nó é clicado. Adicione este código para o Form1 classe.

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

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

Se você estiver usando o C#, verifique se você tem o NodeMouseClick evento associado com o método de manipulação de eventos. Adicione este código para o construtor do formulário.

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

Testando o aplicativo

Agora você pode testar o formulário para certificar-se de que ele funciona comforme o esperado.

Para testar o formulário

Pressione F5 para executar o aplicativo.

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

Próximas etapas

Este aplicativo fornece um exemplo de uma maneira que você pode usar TreeView e ListView controla juntos. Para obter mais informações sobre esses controles, consulte os seguintes tópicos:

Consulte também

Compartilhar via

Demonstra Passo a passo: A criação de uma Interface de estilo do Explorer com os controles ListView e TreeView usando o Designer

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

Testando o aplicativo

Para testar o formulário

Próximas etapas

Consulte também

Tarefas

Referência

Outros recursos

Recursos adicionais