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 posibilidad de crear aplicaciones de Windows Forms de aspecto profesional en 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 la creación de una interfaz de usuario ( ListView UI TreeView ) con controles y que se parece a la característica explorador de Windows de los sistemas operativos 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 de un usuario.Windows Explorer displays a hierarchical structure of the files and folders on a user's computer.

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 cuadro de diálogo nuevo proyecto , haga 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 Windows Forms aplicación.In the list of templates, choose Windows Forms Application.

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

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

  5. Agregue un ImageList denominado imageList1 al formulario y use el ventana Propiedades para agregar dos imágenes: una imagen de 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. Agregue un TreeView control denominado treeview1 al formulario y colóquelo en SplitContainer el lado izquierdo del control.Add a TreeView control named treeview1 to the form, and position it on the left side of the SplitContainer control. En el ventana Propiedades de 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. Agregue un ListView control denominado listView1 al formulario y colóquelo en SplitContainer el lado derecho del control.Add a ListView control named listView1 to the form, and position it on the right side of the SplitContainer control. En el ventana Propiedades de 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 lospuntos suspensivos (el botón de puntos suspensivos (...) en elventana Propiedades de Visual Columns Studio.) en la 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 su Text propiedad en Name, Typey 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 con los TreeView 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. Dado que el código anterior usa el espacio de nombres System.IO, agregue la instrucción using o Import adecuada 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 configuració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. Controle NodeMouseClick el evento treeview1de e implemente el código para listview1 rellenar el contenido de un nodo cuando se haga 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 usa 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 contiene un TreeView control que muestra el directorio del proyecto en el lado izquierdo y un ListView control en el lado derecho 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 atravesar 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 ofrece un ejemplo de una manera de 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