Sección de tutoriales y manuales vb

Control ListView

Volver al índice


 

 

Esta guía describe el uso de algunas de las principales características del control ListView de Visual basic

 

 

 

 

 

 

 

Contenido :

 

 

1 - Introducción

Si observamos por ejemplo el explorador de windows podemos ver que en la parte izquierda de la pantalla tenemos una vista en forma de árbol con todos los directorios del sistema y en el costado derecho podemos visualizar el contenido seleccionado, es decir las carpetas, sub carpetas y archivos. Mediante la opción "ver" del menú de windpws, podemos optar por las opciones "detalle", "lista", "iconos grandes" e "iconos pequeños".

Es exactamente esto lo que nos permite realizar el control ListView, generar listado de elementos de una forma mucho mas completa que otros controles de listado.

Para agregar este control debemos incorporarlo desde la opción agregar componentes bajo el nombre de Micosoft Windows Common Controls 6.0

Una vista previa del control ListView:

 

Vista previa del control ListView

 

Antes de comenzar a describir el funcionamiento de este control, se describen las 4 formas de visualizar los elementos

 

2 - Propiedad View - Diferentes vistas

Vista de íconos grandes: Los elementos de la lista, se mostrarán utilizando una imagen que se carga de un control image list. La imagen representa un ícono "grande" con un nombre del elemento. Los elementos se pueden arrastrar y soltar dentro del control a una nueva ubicación, cambiarles el nombre del elemento, como si fuese un ícono común y corriente al mejor estilo del escritorio de windows. Sin ir mas lejos el control que utiliza windows para mostrar el escritorio es un control list view pero que obviamente no fue programado en visual basic.

Vista de íconos pequeños: La vista es igual a la Vista de íconos grandes, con la diferencia que el elemento se asocia a una imagen mas pequeña que se encuentra cargada en un Image list.

Vista lista: los elementos se visualizan en una lista sin poder arrastrar los elementos en el control.

Vista detallada: los elementos poseen una vista detallada de la información. El mejor ejemplo para entender este listado sería observar el explorador de windows en vista detalle, donde cada archivo o directorio nos muestra información extra del mismo, como por ejemplo el tamaño, la fecha de modificación y el tipo de archivo. Es decir que en la vista detalle cada elemento del listado posee además sub elementos o sub ítems asociados al elemento.

Cabe aclarar que el uso de imágenes para asociar los elementos en los distintos tipo de listado es opcional.

 

3 - Cargar imágenes en un control imagelist para poder utilizarlo con el ListView

 

Una vez que incorporamos el control ListView a un formulario, este presenta un aspecto simple similar al control listbox.

Para cambiar las propiedades mas comunes podemos acceder al cuadro de diálogo "propiedades" o "personalizado" desde la ventana de propiedades de Visual Basic, o también haciendo Click derecho sobre el control y elegir dicha opción.

La imagen de la ventana de propiedades es la siguiente

 

Página de propiedades para configurar el control ListView

 

Antes de comenzar a configurar el control, si se va a utilizar imágenes para los elementos, debemos cargar las mismas en un control imageList.

Para ello tendremos que cargar 3 tipos de gráficos, es decir una imagen que representará los íconos grandes y pequeños y otra que representará la imagen en los encabezados de columna si es que deseamos mostrar imágenes en una vista detallada.

Para hacer esto podemos utilizar un ImageList para cargar los gráficos de los íconos Grandes , para los íconos pequeños utilizar otro Imagelist, y otro ImageList aparte para los Encabezado de columna.

Una vez que cargamos las imágenes en el control ImageList, conviene colocarles un nombre en la propiedad key de las mismas y no utilizar la propiedad index para hacer referencia a ellas, ya que luego es mas fácil trabajar de esta manera en el código, como muestra el gráfico:

 

Vista pervia de la página de propiedades del ImageList

El otro ImageList que contiene las imágenes de encabezado de columna:

 

luego debemos enlazar el listview con las imágenes. Para ello desde el cuadro de diálogo propiedades, en la pestaña "ImageList", debemos indicar el ImageList correspondiente para cada vista. En la opción "normal" apuntaremos al ImageList que mostrará los íconos grandes, en la opción "small" seleccionar el ImageList con los gráficos para los íconos pequeños y en "Columns headers" el ImageList con los gráficos de encabezado para la vista detalle.

Como muestra la imagen:

 

Nota : No es obligatorio añadir las imágenes para los tres ( Normal, pequeño y encabezados ). Es decir, si nosotros queremos utilizar solo gráficos para los encabezados de columna o solo para los íconos "Normal", podemos hacerlo

 

4 - Cambiar los tipos de vista - Propiedad View

Para que el usuario pueda cambiar el tipo de vista, ya sea en tiempo de ejecución o en tiempo de diseño, se utiliza la propiedad View que admite los siguientes valores para cada vista:

Para establecer las vistas en tiempo de ejecución, podemos utilizar un arreglo de Option Button, en total 4, Option1(0), Option1(1), Option1(2) y Option1(3)

Nota importante: para poder visualizar los elementos cuando el ListView tiene la vista en "Reporte", el ListView debe tener creadas las columnas ( Sigue a continuación )

Ejemplo :

Private Sub Form_Load()
Option1(0).Caption = "Icono"
Option1(1).Caption = " Icono Pequeño"
Option1(2).Caption = "Listado"
Option1(3).Caption = "Vista de reporte"
End Sub

Private Sub Option1_Click(Index As Integer)
'Cambia el tipo de vista
ListView1.View = Index
End Sub 

 

En cambio para establecerlo en tiempo de diseño, hay que modificarlo desde la ventana de propiedades del control en la opción View en la ficha " General "

 

5 - Encabezados de columna del Listview

 

Para crear los encabezados de columna para poder mostrar la vista detallada ( lvwREport ) , debemos ir a la pestaña "Encabezados de columna" y desde allí mediante la opción "Agregar columna", añadimos una nueva columna y también tenemos la opción de eliminarla .

Luego a cada columna se le puede configurar las propiedades mas importantes:

 

Importante: los encabezados no se visualizarán completamente hasta que ejecutemos el programa, es decir que desde el " modo diseño " , el control ListView siempre se visualizará como un control vacío hasta que ejecutemos el programa.

Nota: También es posible agregar y eliminar los encabezados de columna en tiempo de ejecución ( mas adelante hay un ejemplo )

 

6 - Trabajando en el código - Agregar y eliminar Items

 

Mediante el objeto Listitems que posee el control ListView, podemos acceder y manipular los elementos del listado. Este objeto posee los siguientes métodos:

 

Método add: Agrega elementos nuevos al listado. sus parámetros son:

listview1.listitem.add (índice), (clave), (texto), (icono), (icono pequeño)

 

El parámetro índice representa el número donde ubicar el elemento en el listado. Este parámetro es opcional, y si no especificamos uno, se agregará dicho elemento al final de la lista cada ves que agreguemos uno nuevo.

La clave es para identificar a cada elemento en el listado (opcional).

En parámetro Texto, debemos indicar el texto del elemento.

En el cuarto y quinto parámetro, ( ícono e ícono pequeño ), representa la clave de los íconos respectivamente para cada elemento que añadimos.

Por Ejemplo, lo siguiente añade un nuevo elemento o Item, con el texto "Carlos", y luego se le especifíca las claves para los íconos

listview1.listitem.add , ,"Carlos", "normal", "pequeño"

 

Método Remove: mediante este método podemos eliminar elementos de la lista. Su único parámetro es el índice del Item a eliminar, por ejemplo esto elimina el elemento 4 de la lista

listview1.listitem.remove 3

 

Importante: Si el elemento no existe se producirá un error en tiempo de ejecución.

Para eliminar el elemento seleccionado del control Listview, por ejemplo al presionar un botón, podemos hacerlo con Remove y el objeto SelectedItem

Ejemplo:

' Si hay un Item seleccionado ...
If Not ListView1.SelectedItem Is Nothing Then
   
   'Pregunta si lo quiere eliminar
   If MsgBox("Eliminar ??", vbQuestion + vbYesNo) = vbYes Then
        'Elimina el elemento seleccionado ( SelectedItem.Index )
        ListView1.ListItems.Remove (ListView1.SelectedItem.Index)
   End If
End If 

 

Método Clear: Permite Eliimnar todos los elementos de la lista, este método no tiene parámetros, solo basta con llamarlo para que elimine todo el contenido del ListView.

Por ejemplo:

listview.listitem.clear

 

Propiedad Item : Esta propiedad, que la accedemos desde el objeto ListItem, hace referencia a un elemento del listado mediante el índice ( Similar a la propiedad List del control ListBox ).

por ejemplo lo siquiente, primero agrega un elemento ( con Add), y luego consulta el valor de ese Item ( la propiedad Text del Item, indicando el índice 1, es decir el primer elemento )

Private Sub Form_Load()
Dim Valor As Variant
    
    ListView1.ListItems.Add , , " Un Item "
    
    Valor = ListView1.ListItems.Item(1).Text
    
    MsgBox Valor, vbInformation
    
End Sub
 

Nota: si se indica un índice que no existe, se producirá un error.

Además de la propiedad Text, hay varias otras , por ejemplo para cambiar el color de la fuente de ese elemento, las propiedades Key e Index, propiedad Checked ( para chequear los elementos ) y varias otras.

 

7 - Agregar subítems para una vista detalle o reporte

 

Para agregar subítems a un elemento lo podemos hacer de la siguiente manera

vista del formulario

 

Dim subelemento As listitem

Set subelemento = listview1.listitem.Add(, , "Carlos")

subelemento.subitems(1) = "487-8795"
subelemento.subitems(2) = "avenida libertador n° 123"
subelemento.subitems(3) = "carlos@yahoo.com"

 

En el ejemplo anterior, primero hemos creado una variable llamada subelemento de tipo Listitem para poder, además de trabajar con Los Item, hacerlo con Los SubItems

Luego mediante la instrucción Set, asignamos a la variable el nuevo elemento mediante la propiedad Subitems seguido del n° de Subitem, es decir asignamos el valor que queremos añadir, de esta forma tendremos tantos subitems como encabezados de columna, sin contar el primero que pertenece al elemento en sí.

Es decir, siguiendo al anterior ejemplo en la columna Nombre, se ubicará el Item, en la columna Telefono se ubicará el SubItem(1) , en la columna Dirección el SubItem(2), y en la columna Correo, el SubItem(3).

Importante: Aunque en el código anterior, los encabezados se añadieron mediante código, es importante saber que cuando vamos a utilizar SubItems en el ListView, el control debe tener creado los encabezados de columna, ya que si se intenta añadir subItems y los encabezados no existen se producirá un error. También se producirá un error si se intenta añadir mas SubItems que los encabezados de columna que tenga el control, por ejemplo 3 subItems, y solo hemos Agegado dos columnas.

 

8 - Ejemplo que añade en un bucle For 50 elementos

 

Colocar un control ListView y desde la ventana de propiedades establecele la vista de detalle en "lvwReport"

Ahora desde la pestaña encabezados de columna agregar 3, en la primera un texto para el elemento del Item, por ejemplo "Elemento" , para la segunda columna que será el SubItem1 de ese elemento, por ejemplo agregale "Subitem1" y para la tercer columna "SubItem2".

 

Dim SItem As ListItem
Dim i As Integer

For i = 1 To 50

Set SItem = ListView1.ListItems.Add(, , "Elemento" & i)

SItem.SubItems(1) = "Subitem " & i
SItem.SubItems(2) = "Subitem " & i

Next

Set SItem = Nothing

 

9 - Ejemplo - Recorrer los items y SubItems

El siguiente ejemplo muestra como recorrer un control ListView que tiene dos columnas. Una es la del Item (la primera), la segunda columna es para el SubItem. Además la columna de los SubItem, tiene unos valores Numéricos, y lo que hace el ejemplo es recorrer dicha columna para sumar los valores y luego ver el resultado

Nota: ls columnas y se añaden en el código, no es necesario agregarlas en diseño

 

Código fuente en el formulario

Option Explicit

Private Sub Command1_Click()
    'Ejecuta la función que suma todos los datos de la columna 2
    MsgBox FormatCurrency(Sumar), vbInformation, "Total"
End Sub

Private Sub Form_Load()
    
    'Variable para el Item del ListView
    Dim Item As ListItem
    
    With ListView1
        ' Agrega dos columnas
        .ColumnHeaders.Add , , " Producto "
        .ColumnHeaders.Add , , "Valor "
        ' Vista de reporte
        .View = lvwReport
        .GridLines = True
        
        'Agrega cuatro elementos
        '********************************************
        
        'Item (Producto)
        Set Item = .ListItems.Add(, , "Caramelos")
            
            'SubITem (precio)
            Item.SubItems(1) = FormatCurrency("0,6")
            
        Set Item = .ListItems.Add(, , "Chocolates")
            Item.SubItems(1) = FormatCurrency("1,8")
        
        Set Item = .ListItems.Add(, , "Cigarrilos")
            Item.SubItems(1) = FormatCurrency("3,2")
    
        Set Item = .ListItems.Add(, , "Leche")
            Item.SubItems(1) = FormatCurrency("1,25")
    
    
    End With
    
        Command1.Caption = " Sumar SubItems "
    
End Sub
Private Function Sumar() As Double
    
    Dim i As Integer
    'Recorre todos los items y para sumar los SubItems
    For i = 1 To ListView1.ListItems.Count
        Sumar = Sumar + CDbl(ListView1.ListItems(i).SubItems(1))
    Next i
        
End Function
 

 

10 - Propiedad Selecteditem

 

Para conocer el elemento que se encuentra seleccionado, podemos consultar la propiedad Selecteditem.

Este ejemplo muestra mediante un mensaje el texto del Item seleccionado:

 

msgbox "Valor del elemento seleccionado es:" & ListView1.SelectedItem.Text

 

Además de la propiedad Text de SelectedItem, podemos consultar varias otras, como la lista de SubItems, el Key, el Index, la propiedad Checked, Bold para negrita, Forecolor para el color de fuente, etc...

Nota: si querés ver un ejemplo de como establecer algunas propiedades de la fuente, en este caso la propiedad FoerColor de un Item o Subitem, podés ver este ejemplo : Establecer Color de fuente por columnas

 

Este control posee varios eventos, siguiendo al ejemplo anterior, si quisiese saber el elemento seleccionado al hacer un Click sobre un Item , podemos usar el evento ItemClick. un ejemplo:

 

Private Sub ListView1_ItemClick(ByVal Item As MSComctlLib.ListItem)
MsgBox Item.Text
End Sub

 

Con la variable Item del parámetro del evento, también podemos acceder a los SubItems, de esta forma para conocer el valor de la propiedad basta con escribir el "." y seleccionar el objeto SubItems e indicar el índice del SubItems en cuestión.

El siguiente código , muestra el valor del SubItems(1) y el SubItems(2), al darle click a un elemento del ListView, ejemplo:

Private Sub ListView1_ItemClick(ByVal Item As MSComctlLib.ListItem)

MsgBox Item.SubItems(1)
MsgBox Item.SubItems(2)

End Sub

Una cosa importante es que el número del indice en el SubItem debe existir, de lo contrario dará un error en tiempo de ejecución.

 

11 - Otras propiedades del control listview

 

Ejemplo de Sorted y SortOrder

Colocar en un formulario un listview

Al hacer clic en la columna 1 se ordenará en forma ascendente y luego al volver a hacer clic en forma descendente ( El ordenamiento es basado en texto, por lo tanto para los números y fechas este método no sirve. (Ver este ejemplo que muestra como hacerlo )

Código fuente en el formulario

Private Sub Form_Load()
  
  With ListView1
    .View = lvwReport
    .ColumnHeaders.Add , , "Nombres"
    
    .ListItems.Add , , "Maria"
    .ListItems.Add , , "Jose"
    .ListItems.Add , , "Raul"
    .ListItems.Add , , "Alberto"
  End With
End Sub

Private Sub ListView1_ColumnClick( _
    ByVal ColumnHeader As MSComctlLib.ColumnHeader)
    
  'lvwAscending ' orden ascendente
  'lvwDescending ' orden descendente
  
  With ListView1
       If .SortOrder = lvwAscending Then
          .SortOrder = lvwDescending
       Else
          .SortOrder = lvwAscending
       End If
       
       .Sorted = True
       ' columna por la cual se ordena
       '( en este caso hay una sola )
       .SortKey = 0
  End With
End Sub 

 

 

Ejemplo utiliando algunas de las propiedades vistas anteriormente :

 

 

Descargar

 

12 - Eventos

 

Los principales eventos del ListView son:

Algunos ejemplos con los Eventos

Evento ItemCheck

Este evento se dispara cada ves que se hace click en un elemento que tiene la propiedad CheckedBoxes en True, es decir cuando hacemos click en la casilla de verificación. Para conocer el valor o el estado del elemento si está chequeado o no al hacer click podemos usar el elemento Item que es el parámetro del recibido en el evento. Ejemplo:

Private Sub ListView1_ItemCheck(ByVal Item As MSComctlLib.ListItem)
MsgBox Item.Checked
End Sub

 

Eso nos devolverá Falso o Verdadero dependiendo del estado de la casilla de verificación. Si quisiera conocer el valor en cualquier momento, no solo cuando hacemos click en un Check (en el evento ItemCheck), se puede hacer así:

Private Sub Command1_Click()
MsgBox ListView1.SelectedItem.Checked
End Sub

Descargar ejemplo:

En el siguiente enlace hay un ejemplo simple de como usarlo para agregar elementos y eliminar, poder modificar el tipo de vista en tiempo de ejecución, como asignarle las imágenes a los elementos, a los encabezados de columna mediante los ImageList y algunas cosas mas

Descargar ejemplo

 

Evento ItemCLick

'Nos devuelve el texto del elemento al hacer un click
Private Sub ListView1_ItemClick(ByVal Item As MSComctlLib.ListItem)
MsgBox Item.Text
End Sub

'Nos devuelve el texto de los subItems 1 y 2 del Item asociado _
al hacer un click, los subitems deben existir de lo contrario dará error
Private Sub ListView1_ItemClick(ByVal Item As MSComctlLib.ListItem)
MsgBox Item.SubItems(1)
MsgBox Item.SubItems(2)
End Sub

 

Evento ColumnClick

Esta línea nos devuelve el texto de la columna en la cual se hizo Click

Private Sub ListView1_ColumnClick(ByVal ColumnHeader As MSComctlLib.ColumnHeader)
MsgBox ColumnHeader.Text
End Sub

Nos devuelve el ancho de la columna al hacer un Click esa columna

Private Sub ListView1_ColumnClick(ByVal ColumnHeader As MSComctlLib.ColumnHeader)
MsgBox "El ancho es: " & ColumnHeader.Width
End Sub

Evento AfterLabelEdit

Esta línea muestra como poder cancelar la edición o modificación de un Item, mostrando un diálogo para poder cancelar o no la operación

Nota: la propiedad LabelEdit debe estar activada para que se pueda utilizar dicho evento

Private Sub ListView1_AfterLabelEdit(Cancel As Integer, NewString As String)

If MsgBox("Se modificó el elemento, cancelar ??", vbQuestion + vbYesNo) = vbYes Then
Cancel = True
End If
End Sub

 

 

Nota: este control posee muchos otros métodos propiedades y eventos que los que se vieron en esta guía.

 

13 - Recursos vb 6.0 - Enlaces relacionados

 

 

Buscar en Recursos vb

Recursos visual basic - Buscar - Privacidad - Copyright © 2005 - 2009 - www.recursosvisualbasic.com.ar