Tutorial: Crear una interfaz de tipo Explorador con los controles ListView y TreeView mediante el Diseñador

Actualización: noviembre 2007

Una de las ventajas de Visual Studio 2005 es la capacidad de crear aplicaciones de Windows Forms con aspecto profesional en muy poco tiempo. Un escenario común es crear una interfaz de usuario con los controles ListView y TreeView que se parece a la función del Explorador de Windows de los sistemas operativos Windows. Explorador de Windows muestra una estructura jerárquica de los archivos y carpetas en el equipo de usuario.

Nota:
Los cuadros de diálogo y comandos de menú que se ven pueden diferir de los descritos en la Ayuda, en función de la configuración activa o la edición. Para cambiar la configuración, elija la opción Importar y exportar configuraciones en el menú Herramientas. Para obtener más información, vea Valores de configuración de Visual Studio.

Para crear el formulario que contiene un control ListView y TreeView

En el menú Archivo, elija Nuevo y haga clic en Proyecto.
En el cuadro de diálogo Nuevo proyecto, siga los siguientes pasos:
1. En el panel Tipos de proyecto, elija Proyectos de Visual Basic o Proyectos de Visual C#.
2. En el panel Plantillas, elija Aplicación para Windows.
Haga clic en Aceptar. Se crea un nuevo proyecto de formularios Windows Forms.
Agregue un control SplitContainer al formulario y establezca su propiedad Dock en Fill.
Agregue un ImageList denominado imageList1 al formulario y utilice el explorador de propiedades para agregar dos imágenes: una imagen de carpeta y otra de documento, por este orden.
Agregue un control TreeView denominado treeview1 al formulario y colóquelo en el lado izquierdo del control SplitContainer. En el explorador de propiedades de treeView1 siga los pasos siguientes:
1. Establezca la propiedad Dock en Fill.
2. Establezca la propiedad ImageList en imagelist1..
Agregue un control ListView denominado listView1 al formulario y colóquelo en el lado derecho del control SplitContainer. En el explorador de propiedades de listview1 siga los pasos siguientes:
1. Establezca la propiedad Dock en Fill.
2. Establezca la propiedad View en Details.
3. Abra el Editor de la colección ColumnHeader haciendo clic en los puntos suspensivos () en la propiedad Columns. Agregue tres columnas y establezca su propiedad Text en Name, Type y Last Modified, respectivamente. Haga clic en Aceptar para cerrar el cuadro de diálogo.
4. Establezca la propiedad SmallImageList en imageList1..

Implemente el código para rellenar el TreeView con nodos y subnodos. El código de ejemplo lee del sistema de archivos y necesita que haya dos iconos, folder.ico y doc.ico, previamente agregados a 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);
            }
        }

Dado que el código anterior usa el espacio de nombres System.IO, agregue la instrucción Using o Import apropiada en la parte superior del formulario.
```
Imports System.IO
```
```
using System.IO;
```

Llame al método de configuración del paso anterior en el constructor del formulario o al método de control de eventos Load.

Public Sub New() 
    InitializeComponent()
    PopulateTreeView()

End Sub 'New

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

Controle el evento NodeMouseClick para treeview1, e implemente el código para rellenar listview1 con el contenido de un nodo cuando se hace clic en un nodo.

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

Si está utilizando C#, asegúrese de que tiene el evento NodeMouseClick asociado a su método de control de eventos.

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

Probar la aplicación

Puede comprobar el formulario para asegurarse de que se comporta de la forma prevista.

Para comprobar el formulario

Presione F5 para ejecutar la aplicación.

Verá un formulario dividido que contiene un control TreeView que muestra un directorio denominado c:\Documents and Settings a la izquierda y un control ListView en la derecha con tres columnas. Puede moverse por el control TreeView seleccionando los nodos de directorio y el control ListView se rellena con el contenido del directorio seleccionado.

Pasos siguientes

Esta aplicación le da un ejemplo de cómo se utilizar juntos los controles TreeView y ListView. Para obtener más información acerca del uso de estos controles, consulte los temas siguientes:

Vea también

Last updated on 2008-10-07

Tutorial: Crear una interfaz de tipo Explorador con los controles ListView y TreeView mediante el Diseñador

Para crear el formulario que contiene un control ListView y TreeView

Probar la aplicación

Para comprobar el formulario

Pasos siguientes

Vea también

Tareas

Referencia

Otros recursos

Recursos adicionales