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

  • Artículo

Una de las ventajas de Visual Studio es la posibilidad de crear aplicaciones de Windows Forms de aspecto profesional en un corto tiempo. Un escenario común consiste en crear una interfaz de usuario (UI) con controles ListView y TreeView que recuerdan a la característica del Explorador de Windows de los sistemas operativos Windows. El Explorador de Windows muestra una estructura jerárquica de los archivos y carpetas en el equipo de un usuario.

Para crear el formulario que contiene un control ListView y TreeView:

  1. En el menú Archivo , seleccione Nuevoy haga clic en Proyecto.

  2. En el cuadro de diálogo Nuevo proyecto , haga lo siguiente:

    1. En las categorías, elija Visual Basic o Visual C#.

    2. En la lista de plantillas, elija Aplicación de Windows Forms.

  3. Haga clic en Aceptar. Se crea un nuevo proyecto de Windows Forms.

  4. Agregue un control SplitContainer al formulario y establezca su propiedad Dock en Fill.

  5. Agregue un control ImageList llamado imageList1 al formulario y use el ventana de propiedades para agregar dos imágenes: una imagen de carpeta y una imagen de documento, en ese orden.

  6. Agregue un control TreeView llamado treeview1 al formulario y colóquelo a la derecha del control SplitContainer. En la ventana de propiedades de treeView1, haga lo siguiente:

    1. Establezca la propiedad Dock en Fill.

    2. Establezca la propiedad ImageList en imagelist1..

  7. Agregue un control ListView llamado listView1 al formulario y colóquelo a la derecha del control SplitContainer. En la ventana de propiedades de listview1, haga lo siguiente:

    1. Establezca la propiedad Dock en Fill.

    2. Establezca la propiedad View en Details.

    3. Abra el editor de colección de ColumnHeader haciendo clic en los puntos suspensivos (El botón de puntos suspensivos (...) de la ventana ) 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..

  8. Implemente el código para rellenar TreeView con nodos y subnodos. Agregue este código a la clase Form1.

    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.

    using System.IO;

    Imports System.IO

  10. Llame al método de configuración desde el paso anterior en el constructor del formulario o el método de control de eventos Load. Agregue este código al constructor del formulario.

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

    Public Sub New() 
    InitializeComponent()
    PopulateTreeView()

End Sub

  11. Administre el evento NodeMouseClick de treeview1, e implemente el código para rellenar listview1 con el contenido de un nodo cuando se hace clic en él. Agregue este código a la clase Form1.

    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 evento NodeMouseClick asociado a su método de control de eventos. Agregue este código al constructor del formulario.

    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 el directorio del proyecto en el lado izquierdo y un control ListView en el lado derecho con tres columnas. Puede recorrer el control TreeView mediante la selección de nodos de directorio, y el control ListView se rellena con el contenido del directorio seleccionado.

Pasos siguientes

Esta aplicación proporciona un ejemplo de una manera de usar los controles TreeView y ListView juntos. Para más información sobre estos controles, consulte los temas siguientes:

Consulte también