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

Artigo
08/25/2010

Um dos benefícios de Visual Studio 2005 é a capacidade de criar aplicativos do Windows Forms profissional em um curto período de time. Um cenário comum é criando uma interface do usuário (UI) com ListView e TreeView controles que se parece com o Windows Explorer recurso dos sistemas operacionais Windows. 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 descritas na Ajuda, dependendo das configurações ativas ou configurações de edição.Para alterar as configurações, escolher Importar e exportar configurações on the Ferramentas menu.Para obter mais informações, consulte Configurações do Visual Studio.

Para criar o 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 diálogo caixa, faça o seguinte:
1. No Tipos de projeto painel, escolher um dos Projetos do Visual Basic or Projetos do Visual translation from VPE for Csharp.
2. No Modelos painel, escolher aplicativos do Windows.
Clique em OK.Um novo projeto Windows Forms é criado.
Adicionar um SplitContainer controle ao formulário e conjunto seu Dock propriedade para Fill.
Adicionar um ImageList chamada imageList1 para o formulário e use o navegador de propriedade para adicionar duas imagens: uma pasta e uma imagem do documento, nessa ordem.
Adicionar um TreeView controle de chamada treeview1 para o formulário e posicione-a no lado esquerdo das SplitContainer controle. No navegador de propriedade para treeView1 Faça o seguinte:
1. Defina a propriedade Dock como Fill.
2. conjunto o ImageList propriedade para imagelist1.
Adicionar um ListView controle de chamada listView1 para o formulário e posicione-a no lado direito das SplitContainer controle. No navegador de propriedade para listview1 Faça o seguinte:
1. Defina a propriedade Dock como Fill.
2. Defina a propriedade View como Details.
3. em em aberto o ColumnHeader coleção Editor clicando nas elipses () na Columns propriedade**.** Adicione três colunas e conjunto seus Text propriedade para Name, Type, e Last Modified, respectivamente. Clique OK para fechar a caixa de diálogo.
4. conjunto o SmallImageList propriedade para imageList1.

Implementar o código para popular o TreeView conosco e subnós. O código de exemplo lê a partir do sistema de arquivos e requer a existência de dois ícones, folder.ico e doc.ico que foram adicionados anteriormente à imageList1.

Private Sub PopulateTreeView() 
    Dim rootNode As TreeNode

    Dim info As New DirectoryInfo("C:\Documents and Settings")
    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(@"C:\Documents and Settings");
            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 sistema.IO, adicione o uso apropriado ou importar demonstrativo 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.

Public Sub New() 
    InitializeComponent()
    PopulateTreeView()

End Sub 'New

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

Handle the NodeMouseClick event for treeview1**,** and implement the code to populatelistview1with a node'scontents when a node is clicked.

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 translation from VPE for Csharp, verifique se que você tem o NodeMouseClick evento associado ao seu método de manipulação de eventos.

           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 dividido que contenha um TreeView controle que exibe um diretório chamado c:\Documents and Settings no lado esquerdo e um ListView controle do lado direito com três colunas. Você pode percorrer o TreeView selecionando nós do diretório e oListView é preenchido com o Sumário do diretório selecionado.

Próximas etapas

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

Consulte também

Demonstra Passo a passo: Criando uma interface de estilo do Explorer com ListView e TreeView controles 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óximas etapas

Consulte também

Tarefas

Referência

Outros recursos

Recursos adicionais