You are on page 1of 22

Contenido

:

Introducción

Propiedad View - Diferentes vistas

Cargar imágenes en el ListView

Cambiar los tipos de vista - Propiedad View

Encabezados de columna

Trabajando en el código - Agregar y eliminar Items

Agregar subítems para una vista detalle o reporte

Ejemplo que añade elementos en un bucle

Ejemplo - Recorrer los items y SubItems

Propiedad Selecteditem - El elemento seleccionado

Otras propiedades

Eventos

Enlaces relacionados

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:

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.

La imagen de la ventana de propiedades es la siguiente . Para cambiar las propiedades mas comunes podemos acceder al cuadro de diálogo "propiedades" o "personalizado" desde la ventana de propiedades de Visual Basic. Cabe aclarar que el uso de imágenes para asociar los elementos en los distintos tipo de listado es opcional.Cargar imágenes en un control imagelist para poder utilizarlo con el ListView Una vez que incorporamos el control ListView a un formulario. Vista lista: los elementos se visualizan en una lista sin poder arrastrar los elementos en el control. 3 . con la diferencia que el elemento se asocia a una imagen mas pequeña que se encuentra cargada en un Image list. como por ejemplo el tamaño. El mejor ejemplo para entender este listado sería observar el explorador de windows en vista detalle. Es decir que en la vista detalle cada elemento del listado posee además sub elementos o sub ítems asociados al elemento. o también haciendo Click derecho sobre el control y elegir dicha opción. donde cada archivo o directorio nos muestra información extra del mismo. este presenta un aspecto simple similar al control listbox. la fecha de modificación y el tipo de archivo.Vista de íconos pequeños: La vista es igual a la Vista de íconos grandes. Vista detallada: los elementos poseen una vista detallada de la información.

debemos cargar las mismas en un control imageList. Para ello tendremos que cargar 3 tipos de gráficos. Una vez que cargamos las imágenes en el control ImageList. y otro ImageList aparte para los Encabezado de columna. ya que luego es mas fácil trabajar de esta manera en el código. para los íconos pequeños utilizar otro Imagelist. si se va a utilizar imágenes para los elementos. 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. como muestra el gráfico: . Para hacer esto podemos utilizar un ImageList para cargar los gráficos de los íconos Grandes . conviene colocarles un nombre en la propiedad key de las mismas y no utilizar la propiedad index para hacer referencia a ellas.Antes de comenzar a configurar el control.

En la opción "normal" apuntaremos al ImageList que mostrará los íconos grandes. Para ello desde el cuadro de diálogo propiedades.El otro ImageList que contiene las imágenes de encabezado de columna: luego debemos enlazar el listview con las imágenes. en la pestaña "ImageList". en la opción "small" seleccionar el ImageList con los . debemos indicar el ImageList correspondiente para cada vista.

pequeño y encabezados ). ya sea en tiempo de ejecución o en tiempo de diseño.Propiedad View Para que el usuario pueda cambiar el tipo de vista.Cambiar los tipos de vista .gráficos para los íconos pequeños y en "Columns headers" el ImageList con los gráficos de encabezado para la vista detalle. podemos hacerlo 4 . si nosotros queremos utilizar solo gráficos para los encabezados de columna o solo para los íconos "Normal". se utiliza la propiedad View que admite los siguientes valores para cada vista:  iconos grandes : listview1. Es decir.view = 0 . Como muestra la imagen: Nota : No es obligatorio añadir las imágenes para los tres ( Normal.

view = 3 Para establecer las vistas en tiempo de ejecución.Caption = "Listado" Option1(3).view = 1  Vista de lista : listview1.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.Caption = " Icono Pequeño" Option1(2). iconos pequeños : listview1. podemos utilizar un arreglo de Option Button. 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 . Option1(2) y Option1(3) Nota importante: para poder visualizar los elementos cuando el ListView tiene la vista en "Reporte". Option1(0).Caption = "Icono" Option1(1).view = 2  vista detalle: listview1. en total 4. el ListView debe tener creadas las columnas ( Sigue a continuación ) Ejemplo : Private Sub Form_Load() Option1(0). Option1(1).

el control ListView siempre se visualizará como un control vacío hasta que ejecutemos el programa. es decir que desde el " modo diseño " . 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:  Text: será el texto que mostrará el encabezado.Agregar y eliminar Items .Trabajando en el código . el segundo "domicilio" y en el tercero el "correo".Para crear los encabezados de columna para poder mostrar la vista detallada ( lvwREport ) . Siguiendo el ejemplo anterior aquí debemos poner en el primer encabezado "telefono". debemos ir a la pestaña "Encabezados de columna" y desde allí mediante la opción "Agregar columna". Nota: También es posible agregar y eliminar los encabezados de columna en tiempo de ejecución ( mas adelante hay un ejemplo ) 6 .  Ancho: el ancho de la columna  Alto: el alto de la columna  Alineamiento: el alineamiento del texto de la columna Importante: los encabezados no se visualizarán completamente hasta que ejecutemos el programa.  icon index: aquí debemos indicar el índice o clave de la imagen que mostrará la columna.  key: esta propiedad es opcional y sirve para identificar a cada columna mediante una clave.

(icono). representa la clave de los íconos respectivamente para cada elemento que añadimos. y luego se le especifíca las claves para los íconos listview1. por ejemplo esto elimina el elemento 4 de la lista listview1. podemos acceder y manipular los elementos del listado. debemos indicar el texto del elemento. "normal". lo siguiente añade un nuevo elemento o Item. podemos hacerlo con Remove y el objeto SelectedItem Ejemplo: .listitem. con el texto "Carlos". (icono El parámetro índice representa el número donde ubicar el elemento en el listado. ( ícono e ícono pequeño ). En el cuarto y quinto parámetro. y si no especificamos uno. La clave es para identificar a cada elemento en el listado (opcional). Por Ejemplo. se agregará dicho elemento al final de la lista cada ves que agreguemos uno nuevo. Este objeto posee los siguientes métodos: Método add: Agrega elementos nuevos al listado.Mediante el objeto Listitems que posee el control ListView. sus parámetros son: listview1. (texto). por ejemplo al presionar un botón. "pequeño" Método Remove: mediante este método podemos eliminar elementos de la lista. Para eliminar el elemento seleccionado del control Listview.listitem. (clave).add .add pequeño) (índice).listitem. En parámetro Texto. Este parámetro es opcional."Carlos". . Su único parámetro es el índice del Item a eliminar.remove 3 Importante: Si el elemento no existe se producirá un error en tiempo de ejecución.

hace referencia a un elemento del listado mediante el índice ( Similar a la propiedad List del control ListBox ).Remove (ListView1.ListItems.clear Propiedad Item : Esta propiedad. . vbQuestion + vbYesNo) = vbYes Then 'Elimina el elemento seleccionado ( SelectedItem. solo basta con llamarlo para que elimine todo el contenido del ListView.SelectedItem Is Nothing Then 'Pregunta si lo quiere eliminar If MsgBox("Eliminar ??".Item(1).Index) End If End If Método Clear: Permite Eliimnar todos los elementos de la lista. y luego consulta el valor de ese Item ( la propiedad Text del Item. este método no tiene parámetros. Por ejemplo: listview. que la accedemos desde el objeto ListItem. vbInformation End Sub .Index ) ListView1.. indicando el índice 1. por ejemplo lo siquiente.Text MsgBox Valor.Add .ListItems.. es decir el primer elemento ) Private Sub Form_Load() Dim Valor As Variant ListView1.' Si hay un Item seleccionado . primero agrega un elemento ( con Add).SelectedItem. If Not ListView1. " Un Item " Valor = ListView1.ListItems.listitem.

listitem. hacerlo con Los SubItems Luego mediante la instrucción Set. Además de la propiedad Text.Agregar subítems para una vista detalle o reporte Para agregar subítems a un elemento lo podemos hacer de la siguiente manera Dim Set subelemento subelemento = As listview1. 7 .Add(. . de esta forma tendremos tantos subitems como encabezados de columna. propiedad Checked ( para chequear los elementos ) y varias otras. por ejemplo para cambiar el color de la fuente de ese elemento.Nota: si se indica un índice que no existe. se producirá un error. además de trabajar con Los Item.subitems(2) = "avenida libertador subelemento. es decir asignamos el valor que queremos añadir. las propiedades Key e Index.com" listitem . subelemento. asignamos a la variable el nuevo elemento mediante la propiedad Subitems seguido del n° de Subitem. primero hemos creado una variable llamada subelemento de tipo Listitem para poder. sin contar el primero que pertenece al elemento en sí. "Carlos") "487-8795" n° 123" En el ejemplo anterior.subitems(1) = subelemento. hay varias otras .subitems(3) = "carlos@yahoo.

el control debe tener creado los encabezados de columna. los encabezados se añadieron mediante código.SubItems(1) = "Subitem " & i SItem. en la columna Dirección el SubItem(2). por ejemplo 3 subItems. "Elemento" & i) SItem. se ubicará el Item. el SubItem(3). y solo hemos Agegado dos columnas.Es decir. Dim SItem As ListItem Dim i As Integer For i = 1 To 50 Set SItem = ListView1. para la segunda columna que será el SubItem1 de ese elemento. por ejemplo "Elemento" . en la columna Telefono se ubicará el SubItem(1) .SubItems(2) = "Subitem " & i Next Set SItem = Nothing 9 . siguiendo al anterior ejemplo en la columna Nombre. es importante saber que cuando vamos a utilizar SubItems en el ListView.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. 8 . en la primera un texto para el elemento del Item. y en la columna Correo. por ejemplo agregale "Subitem1" y para la tercer columna "SubItem2". . ya que si se intenta añadir subItems y los encabezados no existen se producirá un error.ListItems. También se producirá un error si se intenta añadir mas SubItems que los encabezados de columna que tenga el control.Ejemplo .Recorrer los items y SubItems . Importante: Aunque en el código anterior.Add(.

tiene unos valores Numéricos. "Total" End Sub Private Sub Form_Load() 'Variable para el Item del ListView Dim Item As ListItem With ListView1 ' Agrega dos columnas .El siguiente ejemplo muestra como recorrer un control ListView que tiene dos columnas. 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. Una es la del Item (la primera). la segunda columna es para el SubItem. Además la columna de los SubItem.

GridLines = True 'Agrega cuatro elementos '******************************************** 'Item (Producto) Set Item = . "Leche") Item.Add(.8") Set Item = .. "Valor " ' Vista de reporte .Add . .SubItems(1) = FormatCurrency("1.Count . "Cigarrilos") Item.Add(. .SubItems(1) = FormatCurrency("0. .SubItems(1) = FormatCurrency("3. .25") End With Command1.ListItems.2") Set Item = .ListItems.View = lvwReport .ListItems.ColumnHeaders. "Chocolates") Item.ListItems. " Producto " .SubItems(1) = FormatCurrency("1. .ColumnHeaders.Add .Add(. "Caramelos") 'SubITem (precio) Item.6") Set Item = .ListItems. .Add(.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.

el Key. Forecolor para el color de fuente. podemos consultar la propiedad Selecteditem. etc. Bold para negrita.SubItems(1)) Next i End Function 10 . si quisiese saber el elemento seleccionado al hacer un Click sobre un Item .Sumar = Sumar + CDbl(ListView1. podés ver este ejemplo : Establecer Color de fuente por columnas Este control posee varios eventos.Propiedad Selecteditem Para conocer el elemento que se encuentra seleccionado. un ejemplo: . siguiendo al ejemplo anterior... en este caso la propiedad FoerColor de un Item o Subitem. el Index. Este ejemplo muestra mediante un mensaje el texto del Item seleccionado: msgbox "Valor del ListView1. como la lista de SubItems. podemos usar el evento ItemClick.ListItems(i). la propiedad Checked. podemos consultar varias otras.SelectedItem.Text elemento seleccionado es:" & Además de la propiedad Text de SelectedItem. Nota: si querés ver un ejemplo de como establecer algunas propiedades de la fuente.

11 . de lo contrario dará un error en tiempo de ejecución. El siguiente código .  FullRowSelect: Propiedad que determina si al seleccionar un elemento en la vista detalle.Private Sub ListView1_ItemClick(ByVal Item As MSComctlLib.Text End Sub Con la variable Item del parámetro del evento.ListItem) MsgBox Item.SubItems(1) Item. también podemos acceder a los SubItems." y seleccionar el objeto SubItems e indicar el índice del SubItems en cuestión.SubItems(2) End Sub Una cosa importante es que el número del indice en el SubItem debe existir. muestra el valor del SubItems(1) y el SubItems(2).Otras propiedades del control listview  LabelEdit: valor booleano que determina si el usuario puede o no cambiar el texto de los elementos ( Solo de lectura en tiempo)  Multiselect:determina si el usuario puede hacer selección múltiple de elementos  Chekboxes: establece una caja de verificación para cada elemento de la lista. se selecciona la fila completamente . ejemplo: Private Sub ListView1_ItemClick(ByVal Item As MSComctlLib.ListItem) MsgBox MsgBox Item. al darle click a un elemento del ListView. de esta forma para conocer el valor de la propiedad basta con escribir el ".

Add . "Jose" .ListItems. . GridLines: Propiedad que determina si el control muestra las líneas divisorias a modo de grilla  Font : Establece y devuelve la fuente del control  FullRowSelect : Devuelve o establece si al seleccionar una columna se resalta la fila entera. (Ver este ejemplo que muestra como hacerlo ) Código fuente en el formulario Private Sub Form_Load() With ListView1 . "Maria" . "Nombres" .View = lvwReport . "Alberto" End With End Sub . .Add . Indica si los elementos se ordenan automáticamente de forma alfabética ( utilizar con SortKey y SortOrder )  Arrange : Devuelve o establece cómo se organizan los iconos en las vistas de iconos e iconos pequeños de un 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.ColumnHeaders.  Sorted : Permite ordenar el ListView .ListItems.Add . . . . por lo tanto para los números y fechas este método no sirve.Add .ListItems.ListItems.Add . "Raul" .

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

 BeforeLabelEdit: Se dispatra cuando se intenta modificar la etiqueta del objeto ListItem seleccionado actualmente. es decir ena columna  DragDrop y DragOver: Ocurre ebn las operaciones de Arrastray colocar.  Click: Ocurre al realizar un Click en el control  ColumnClick: Se dispara al hacer realizar un click en un objeto ColumnHeader del control ListView.Eventos Los principales eventos del ListView son:  AfterLabelEdit: este evento ocurre cuando se modifica la etiqueta del objeto ListItem o Node seleccionado actualmente. .Descargar 12 .

Ejemplo: Private Sub ListView1_ItemCheck(ByVal Item As MSComctlLib.Checked End Sub Eso nos devolverá Falso o Verdadero dependiendo del estado de la casilla de verificación.ListItem) MsgBox Item.SelectedItem. ItemClick: Se ejecuta al hacer clic o seleccionar un objeto ListItem  ItemCheck: Este evento se acciona cuando se activa o desactiva un Objeto ListItem (la propiedad CheckBoxes del Listview debe estar activada)  Eventos Ole: Se accionan en una operación de arrastrar y colocar de tipo OLE. se puede hacer así: Private MsgBox End Sub Sub Command1_Click() ListView1. no solo cuando hacemos click en un Check (en el evento ItemCheck). a los encabezados de columna mediante los ImageList y algunas cosas mas Descargar ejemplo . poder modificar el tipo de vista en tiempo de ejecución. Si quisiera conocer el valor en cualquier momento. 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. como asignarle las imágenes a los elementos.Checked Descargar ejemplo: En el siguiente enlace hay un ejemplo simple de como usarlo para agregar elementos y eliminar. es decir cuando hacemos click en la casilla de verificación. En este enlace hay un ejemplo para hacer un Drag and Drop de elementos en un List view 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.

Text End Sub 'Nos devuelve el texto de los subItems 1 y 2 del Item asociado _ al hacer un click. cancelar vbYes ??".ListItem) MsgBox Item. vbQuestion + Then .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 MSComctlLib.Text Nos devuelve el ancho de la columna al hacer un Click esa columna Private Sub ListView1_ColumnClick(ByVal MSComctlLib. NewString As String) If MsgBox("Se vbYesNo) modificó el = elemento. 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.ColumnHeader) MsgBox "El ancho es: " & End Sub ColumnHeader As ColumnHeader.ColumnHeader) MsgBox End Sub ColumnHeader As ColumnHeader.Evento ItemCLick 'Nos devuelve el texto del elemento al hacer un click Private Sub ListView1_ItemClick(ByVal Item As MSComctlLib. los subitems deben existir de lo contrario dará error Private Sub ListView1_ItemClick(ByVal Item As MSComctlLib.SubItems(1) MsgBox Item.ListItem) MsgBox Item.Width Evento AfterLabelEdit Esta línea muestra como poder cancelar la edición o modificación de un Item.

Cancel End End Sub = True If .