Tutorial: Crear una interfaz de tipo Explorador con los controles ListView y TreeView mediante el diseñadorWalkthrough: Creating an Explorer Style Interface with the ListView and TreeView Controls Using the Designer

Una de las ventajas de Visual Studio es la capacidad para crear aplicaciones de Windows Forms con aspecto profesional en muy poco tiempo.One of the benefits of Visual Studio is the ability to create professional-looking Windows Forms applications in a short of amount of time. Un escenario común es crear una interfaz de usuario (UI) con ListView y TreeView los controles que se parece a la característica Explorador de Windows de los sistemas operativos de Windows.A common scenario is creating a user interface (UI) with ListView and TreeView controls that resembles the Windows Explorer feature of Windows operating systems. El Explorador de Windows muestra una estructura jerárquica de los archivos y carpetas en el equipo del usuario.Windows Explorer displays a hierarchical structure of the files and folders on a user's computer.

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 los valores de configuración o de edición activos.The dialog boxes and menu commands you see might differ from those described in Help depending on your active settings or edition. Para cambiar la configuración, elija la opción Importar y exportar configuraciones del menú Herramientas .To change your settings, choose Import and Export Settings on the Tools menu. Para más información, vea Personalizar el IDE de Visual Studio.For more information, see Personalize the Visual Studio IDE.

Para crear el formulario que contiene un control ListView y TreeViewTo create the form containing a ListView and TreeView control

  1. En el menú Archivo , elija Nuevoy haga clic en Proyecto.On the File menu, point to New, and then click Project.

  2. En el nuevo proyecto diálogo cuadro, realice lo siguiente:In the New Project dialog box, do the following:

    1. En las categorías, elija Visual Basic o Visual C#.In the categories, choose either Visual Basic or Visual C#.

    2. En la lista de plantillas, elija aplicación de Windows Forms.In the list of templates, choose Windows Forms Application.

  3. Haga clic en Aceptar.Click OK. Se crea un nuevo proyecto de Windows Forms.A new Windows Forms project is created.

  4. Agregar un SplitContainer control al formulario y establezca su Dock propiedad Fill.Add a SplitContainer control to the form and set its Dock property to Fill.

  5. Agregar un ImageList denominado imageList1 al formulario y usar la ventana de propiedades para agregar dos imágenes: una imagen de una carpeta y una imagen de documento, en ese orden.Add an ImageList named imageList1 to the form and use the Properties window to add two images: a folder image and a document image, in that order.

  6. Agregar un TreeView control denominado treeview1 al formulario y colóquelo en el lado izquierdo de la SplitContainer control.Add a TreeView control named treeview1 to the form, and position it on the left side of the SplitContainer control. En la ventana Propiedades para treeView1 haga lo siguiente:In the Properties window for treeView1 do the following:

    1. Establezca la propiedad Dock en Fill.Set the Dock property to Fill.

    2. Establezca la propiedad ImageList en imagelist1..Set the ImageList property to imagelist1.

  7. Agregar un ListView control denominado listView1 al formulario y colóquelo en el lado derecho de la SplitContainer control.Add a ListView control named listView1 to the form, and position it on the right side of the SplitContainer control. En la ventana Propiedades para listview1 haga lo siguiente:In the Properties window for listview1 do the following:

    1. Establezca la propiedad Dock en Fill.Set the Dock property to Fill.

    2. Establezca la propiedad View en Details.Set the View property to Details.

    3. Abra el Editor de la colección ColumnHeader haciendo clic en el botón de puntos suspensivos (los puntos suspensivos (...) en la ventana Propiedades de Visual Studio.) en el Columns propiedad .Open the ColumnHeader Collection Editor by clicking the ellipses (The Ellipsis button (...) in the Properties window of Visual Studio.) in the Columns property . Agregue tres columnas y establezca sus Text propiedad Name, Type, y Last Modified, respectivamente.Add three columns and set their Text property to Name, Type, and Last Modified, respectively. Haga clic en Aceptar para cerrar el cuadro de diálogo.Click OK to close the dialog box.

    4. Establezca la propiedad SmallImageList en imageList1..Set the SmallImageList property to imageList1.

  8. Implemente el código para rellenar el TreeView con nodos y subnodos.Implement the code to populate the TreeView with nodes and subnodes. Agregue este código a la clase Form1.Add this code to the Form1 class.

    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. Puesto que el código anterior usa el espacio de nombres System.IO, el uso adecuada de agregar o importar instrucción en la parte superior del formulario.Since the previous code uses the System.IO namespace, add the appropriate using or import statement at the top of the form.

    using System.IO;
    
    Imports System.IO
    
  10. Llame al método de instalación desde el paso anterior en el constructor del formulario o Load el método de control de eventos.Call the set-up method from the previous step in the form's constructor or Load event-handling method. Agregue este código al constructor del formulario.Add this code to the form constructor.

    public Form1()
    {
        InitializeComponent();
        PopulateTreeView();
    }
    
    Public Sub New() 
        InitializeComponent()
        PopulateTreeView()
    
    End Sub 'New
    
    
  11. Controlar la NodeMouseClick eventos para treeview1 , e implemente el código para rellenar listview1 con contenido de un nodo cuando se hace clic en un nodo.Handle the NodeMouseClick event for treeview1, and implement the code to populate listview1 with a node's contents when a node is clicked. Agregue este código a la clase Form1.Add this code to the Form1 class.

    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
    
    

    Si está utilizando C#, asegúrese de que tiene el NodeMouseClick evento asociado a su método de control de eventos.If you are using C#, make sure you have the NodeMouseClick event associated with its event-handling method. Agregue este código al constructor del formulario.Add this code to the form constructor.

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

Probar la aplicaciónTesting the Application

Puede comprobar el formulario para asegurarse de que se comporta de la forma prevista.You can now test the form to make sure it behaves as expected.

Para comprobar el formularioTo test the form

  • Presione F5 para ejecutar la aplicación.Press F5 to run the application.

    Verá un formulario dividido que contenga un TreeView control que muestra el directorio del proyecto en el lado izquierdo, y un ListView control a la derecha con tres columnas.You will see a split form containing a TreeView control that displays your project directory on the left side, and a ListView control on the right side with three columns. Puede recorrer el TreeView seleccionando los nodos del directorio y el ListView se rellena con el contenido del directorio seleccionado.You can traverse the TreeView by selecting directory nodes, and the ListView is populated with the contents of the selected directory.

Pasos siguientesNext Steps

Esta aplicación le ofrece un ejemplo de cómo puede usar TreeView y ListView controles juntos.This application gives you an example of a way you can use TreeView and ListView controls together. Para obtener más información sobre estos controles, vea los temas siguientes:For more information on these controls, see the following topics:

Vea tambiénSee also