Asignación de imágenes a los elementos de ListView Tutorial-03

El control ActiveX ImageList.

Para Asignar Imágenes al control ListView, necesitamos la ayuda de otro Control ActiveX:el ImageList Control. Hemos visto íconos en la vista del Explorador de Windows, imágenes similares a carpetas en el estado de carpeta cerrada, cuando hace clic en la carpeta, muestra una imagen de carpeta abierta y diferentes tipos de imágenes según el tipo de archivo. No tenemos tanta flexibilidad aquí, pero podemos mostrar imágenes de íconos en los Encabezados de columna del control ListView. , Elementos de la lista y ListSubItems miembros del objeto mientras completa su contenido.

Las imágenes de demostración de muestra.

La imagen de muestra de la lista de empleados de NorthWind Trading con sus fotos (imágenes pequeñas) en ListView Control:

Los tamaños de imagen más grandes aumentarán la altura de las filas de los registros, pero las fotos pueden ser más grandes que esto.

A continuación se proporciona una imagen de muestra del control ListView (en el panel del lado derecho) que hemos utilizado junto con el control TreeView. El control TreeView ActiveX se le presentó en una serie anterior de tutoriales sobre el control TreeView. Puede encontrar la lista de enlaces de la serie de tutoriales de control TreeView en la parte inferior de esta página.

En la imagen de arriba, he usado imágenes de íconos en todas las columnas de datos y en las etiquetas de encabezado de columna para demostrar la posibilidad de mostrar imágenes en ListView Control.

Los estados de cierre y apertura de la carpeta se muestran en el panel izquierdo de los nodos de control de TreeView y funcionan de manera diferente que en los elementos de ListView. La carpeta abierta La imagen se muestra cuando el nodo TreeView recibe un clic. Un segundo clic en el mismo Nodo muestra la carpeta cerrada imagen.

La serie de tutoriales de programación de control ListView.

Espero que haya pasado por las Sesiones Tutoriales 1 y 2 anteriores de ListView Control y esté listo para comenzar este nuevo episodio sobre el uso de ImageList Control junto con el ListView Control. Los enlaces del tutorial anterior se proporcionan a continuación para su revisión y preparación para continuar con esta sesión. Algunos de los conceptos básicos de ListView Control ya se presentan y explican allí con el código VBA y estará en una mejor posición para continuar aquí y comprender lo que está sucediendo aquí.

Tutorial de control ListView-01.
Tutorial de control ListView-02.

Datos de origen y formulario de demostración.

Comencemos con un nuevo formulario y la tabla de empleados para nuestro nuevo proyecto de demostración de control ListView. Importe la tabla de empleados de la base de datos de muestra NorthWind.accdb.

Cree una nueva consulta SELECT con el SQL que se proporciona a continuación y guárdela con el nombre EmployeesQ .

SELECCIONE [Título de cortesía] &" " &[Nombre] &" " &[Apellido] COMO [Nombre del empleado], Empleados.Id. de empleado, Empleados.Título, Empleados.Fecha de contratación, Empleados.Dirección, Empleados.Ciudad, Empleados.Región , Empleados.Código postal, Empleados.País, Empleados.Teléfono particular, Empleados.Extensión, Empleados.NotasDE Empleados;

Si la estructura de su tabla de empleados es diferente, no importa. Para el valor de la primera columna, solo he combinado tres valores de columna para formar el [Nombre de los empleados] como la primera columna. Puede tomar otros valores de nombre de columna tal como los tiene y en cualquier orden, todos o menos, según lo desee.
Cree un nuevo formulario y ábralo en la vista de diseño.
Insertar un Control ListView de Microsoft de la lista de controles ActiveX.
Inserte un Control ImageList de Microsoft también desde la lista de controles ActiveX.
Cambie el tamaño del control ListView como la imagen de muestra en el formulario que se muestra a continuación. Mueva el control ImageList y colóquelo en la esquina superior derecha del control ListView como se muestra en la imagen. Puede colocarlo en cualquier lugar conveniente del formulario. No aparecerá en el Formulario cuando el Formulario esté en la vista Normal.
- Seleccione el Control ListView y mostrar la hoja de propiedades.
- Cambiar el Nombre Valor de propiedad para ListView1.
- Seleccione el Control ImageList , muestre su Hoja de propiedades y cambie el Nombre Valor de propiedad para ImageList0 .
- Nota: Los dos controles anteriores tienen sus propias hojas de propiedades dedicadas. Los nombres y valores de sus propiedades también pueden aparecer en la hoja de propiedades de Access. Si hacemos algunos cambios en la hoja de propiedades de acceso, es posible que no se actualicen todos en los controles ListView e ImageList. Tenemos que hacer cambios en la propia Hoja de Propiedades del Control.
  
  Hoja de propiedades del control ListView.
Haga clic derecho en el Control ListView, resalte el Objeto ListViewCtrl opción en la lista que se muestra y seleccione Propiedades. El General La pestaña de la hoja de propiedades del control ListView se verá como la imagen que se muestra a continuación.
Cambie los valores de propiedad en la pestaña General como se muestra en la imagen de arriba.

En primer lugar, cargaremos los datos de los Empleados en el Control ListView.

El código VBA del módulo de formulario

Copie y pegue el siguiente código VBA en el módulo de clase del formulario:

Option Compare DatabaseOption ExplicitDim lvwList As MSComctlLib.ListViewDim lvwItem As MSComctlLib.ListItemDim ObjImgList As MSComctlLib.ImageListDim db As DAO.DatabaseDim rst As DAO.RecordsetPrivate Sub cmdClose_Click() DoCmd.Close acForm, Me.NameEnd SubPrivate Sub Form_Load() Call LoadListView("EmployeesQ")End SubPrivate Sub LoadListView(ByVal tblName As String) Dim strFldName As String Dim intCounter As Integer Dim j As Integer Dim strLabel As String'Assign ListView Control on Form to lvwList ObjectSet lvwList =Me.ListView1.Object'Establecer ObjImgList =Me.ImageList0.Object 'Asignar etiquetas de encabezado de formulario Texto de título strLabel =UCase(tblName) &" " &"IN LISTVIEW CONTROL - TUTORIAL-03" Me.Label8.caption =strLabel Me.Label9.caption =strLabel With lvwList '.Icons =ObjImgList  '.SmallIcons =ObjImgList '.ColumnHeaderIcons =ObjImgList .Font ="Verdana" .Font.Size =10 .Font.Bold =True End With Set db =CurrentDb Set rst =db.OpenRecordset(tblName, dbOpenSnapshot) 'Crear encabezados de columna para ListView con lvwList .ColumnHeaders.Clear 'iniciar encabezado área For j =0 To rst.Fields.Count - 1 strFldName =rst.Fields(j).Name 'Syntax:'.ColumnHeaders.Add Índice, Clave, Texto, Ancho, Alineación, Icono .ColumnHeaders.Add , , strFldName, iif(j=0,3200,2000) Next End With 'Inicializa el control ListView mientras lvwList.ListItems.Count> 0 lvwList.ListItems.Remove (1) Wend With lvwList Do While Not rst.EOF And Not rst.BOF 'Syntax . ListItems.Add(Index, Key, Text, Icon, SmallIcon) Set lvwItem =.ListItems.Add(, , CStr(Nz(rst.Fields(0).Value, ""))) 'Agregar las siguientes columnas de datos como sub -elementos de ListItem con lvwItem 'Syntax .Add Index,Key,Text,Report Icon,TooltipText For j =1 To rst.Fields.Count - 1 .ListSubItems.Add , , CStr(Nz(rst.Fields(j).Value , "")) Siguiente final con rst.MoveNextLooprst.Close 'reset lvwItem object Set lvwItem =NothingEnd WithSet rst =NothingSet db =NothingEnd Sub

Nota: Las líneas VBA de color rojo del control ImageList están comentadas para que no se ejecuten por el momento y las habilitaremos en breve.

Guarde su formulario con el nombre frmEmployees.
Abra el formulario en vista normal.

Los empleados Q Query Records Listing se verá como la siguiente imagen:

Revisión del Código VBA

Ya hemos revisado el código VBA anterior en las sesiones anteriores del tutorial de control ListView-01 y 02, a excepción de algunas líneas sobre la declaración e inicialización del control ImageList y algunas líneas para el nombre de fuente, el tamaño de fuente y el tamaño de fuente. Ajustes de estilo. Otro cambio que hemos realizado en el Código VBA anterior aquí es el LoadListView() programa, necesita un nombre de tabla/consulta como parámetro. Todos los tipos de consulta, excepto consultas de acción, tablas de acceso y nombres de tablas vinculadas, son válidos. El nombre de la tabla o consulta se pasa cuando se llama al programa desde Form_Load() Procedimiento del evento.

Todos los nombres de campo de tabla/consulta se utilizan como etiqueta de encabezado de columna Texto (el tercer parámetro) en ColumnHeaders.Add() método. El primer parámetro Índice y segundo parámetro Clave No se utilizan valores. Los números de secuencia del Índice serán insertados por el sistema automáticamente.

El cuarto parámetro es el Ancho de columna valor en píxeles y hemos asignado arbitrariamente el valor de ancho de la primera columna de 3200 píxeles y para todas las demás columnas 2000 píxeles. La primera columna muestra el nombre del empleado y necesita más ancho para mostrarlo correctamente.

La Alineación y Icono valores de parámetro para encabezados de columna que no hemos usado aquí. Por defecto, se asume la Alineación a la izquierda. Las opciones de alineación disponibles se indican a continuación.

0 - lvwColumnaIzquierda
1 - lvwColumnaDerecha
2 - lvwColumnCenter

Puede ver las opciones anteriores en los Encabezados de columna Ficha en la hoja de propiedades del control ListView. Para ver las opciones anteriores:

Haga clic en Insertar columna Botón, ingrese algún nombre de columna temporal en el cuadro de texto a continuación.
Haga clic en Alineación Propiedad y ver las opciones anteriores.
Haga clic en Eliminar columna Botón para eliminar el nombre de la columna temporal.
Nota: Si desea agregar etiquetas de encabezado de columna manualmente, en lugar de cargar nombres de campo a través del código VBA, puede escribirlos uno por uno aquí. Aparecerán como etiquetas de encabezado de columna cuando muestre datos.

La vista de muestra del Icono La imagen del lado izquierdo de la columna de encabezado Los nombres se pueden ver en el panel del lado derecho en la segunda imagen de demostración en la parte superior de esta página.

La primera columna de EmployeesQ (Nombre del empleado) se toma como ListItems.Text en su Agregar Método. En este método también hemos omitido el Índice y Clave Valores paramétricos. El sistema agregará automáticamente los números de índice como números de serie.

Desde el segundo campo en adelante, todos los valores de columna se cargan a través de ListSubItems.Add() método del control ListView.

Nota: Todos los valores se agregan a ListItems.Text y en ListSubItems.Text parámetro solo como tipo de datos de texto, independientemente de su tipo de datos original en la tabla/consulta de origen. En el Código, estamos realizando una verificación de validación en los Valores de campo, en caso de que alguno de ellos contenga un Nulo Valor y convertirlo en valor de texto con CStr() función integrada.

El control ImageList.

La Lista de imágenes Las declaraciones de inicialización de control que hemos comentado en el programa principal se muestran en color rojo en el segmento de código que se muestra a continuación. Los explicaremos y habilitaremos cuando estemos listos con nuestros preparativos para cargar imágenes en ImageList Control.

'Asignar control ListView en formulario a lvwList ObjectSet lvwList =Me.ListView1.Object'Establecer ObjImgList =Me.ImageList0.Object 'Asignar etiquetas de encabezado de formulario Texto de título strLabel =UCase(tblName) &" " &"IN LISTVIEW CONTROL - TUTORIAL-03" Me.Label8.caption =strLabel Me.Label9.caption =strLabel With lvwList '.Icons =ObjImgList  '.SmallIcons =ObjImgList '.ColumnHeaderIcons =ObjImgList .Font ="Verdana" .Font.Size =10 .Font.Bold =True End With

La primera declaración con color rojo arriba inicializa la ObjImgList Objeto con control ImageList ImageList0 en el formulario frmEmployees . Antes de realizar cambios en el Código, veamos qué opciones tenemos para cargar algunas imágenes en ImageList Control.

Acerca de la carga de imágenes.

El siguiente paso es cargar algunas imágenes de muestra en ImageList Control. Esto se puede hacer de una de dos maneras.

Antes de intentar este paso, cree u obtenga al menos dos imágenes pequeñas (cualquiera de los tipos de imágenes populares como .jpg, jpeg, .bmp, .png , etc.), preferentemente .bmp tipo. Las opciones de Tamaño de imagen disponibles en ImageList Control, en General ficha de la Hoja de propiedades, son 16 x 16 , 32x32 , 48x48 píxeles, o Personalizado Talla.

Haga clic derecho en el control ImageList, resalte la opción Objeto ImageListCtrl, y seleccione Propiedades. Antes de seleccionar cualquier imagen para cargar, seleccione uno de los tamaños de imagen anteriores en General Pestaña.

Si tiene imágenes grandes y desea conservar el tamaño de imagen original, seleccione Personalizar Opción.
Al seleccionar cualquiera de las otras opciones, la imagen se reducirá al tamaño seleccionado. Esto puede reducir la calidad de la imagen. El uso de imágenes muy grandes puede ocupar más espacio en ListView Control cuando se muestra.
Las imágenes de tipo icono serán más ideales para usar.
Experimente con imágenes grandes, pequeñas y muy pequeñas y con diferentes opciones para obtener algo de experiencia en la selección correcta de imagen/opción para sus necesidades.

Puede utilizar una de las dos formas de cargar las imágenes en ImageList Control:

1. Cargue imágenes desde el disco a través del procedimiento VBA.

El procedimiento de VBA de muestra se verá como el segmento de código que se muestra a continuación, tomado del Tutorial de control de TreeView:

 Establecer objImgList =Me.ImageList0.Object objImgList.ListImages.Clear strFolder ="D:\Access\TreeView\"With objImgList With .ListImages .Add Index:=1, Key:="FolderClose", Picture:=LoadPicture (strFolder &"folderclose2.bmp") .Add Index:=2, Key:="FolderOpen", Picture:=LoadPicture(strFolder &"folderopen2.bmp") .Add Index:=3, Key:="ArrowHead", Picture:=LoadPicture(strFolder &"arrowhead.bmp") End WithFin WithWith tvw 'TreeView Control .ImageList =objImgList 'assign imagelist Object to TreeView Imagelist PropertyEnd With

La primera instrucción inicializa la objImgList Objeto con ImageList0 control en el Formulario.

La siguiente declaración asegura que las imágenes existentes en el control de la lista de imágenes, si las hay, se borran en preparación para la carga desde el disco. Para que este enfoque funcione siempre, las imágenes deben estar siempre disponibles en el disco.

El objImgList.ListImages.Add() Se llama al método para cargar imágenes desde el disco usando los parámetros nombrados. Cuando se utilizan nombres de parámetros en Add() método los valores de los parámetros se pueden dar en cualquier orden como el Índice:=1 se puede dar al final de la línea o Key:="FolderClose" como el primer elemento y así sucesivamente. Sin los nombres de los parámetros, el orden de los parámetros del método Add() será el siguiente:

 .Agregar 1, "CerrarCarpeta", CargarImagen(strFolder &"cerrarcarpeta2.bmp")

Para mostrar la imagen en nuestro listView control podemos usar el número de índice de imagen 1 o el valor de la clave "FolderClose" Texto como icono o PequeñoIcono valores de parámetros en ListItems.Add() método.

Hemos utilizado el método anterior en el tutorial de control de TreeView anteriormente. Puede visitar esa página y descargar la base de datos de demostración.

Este método carga las imágenes en la instancia de objeto ImageList en la memoria y el objeto físico en el formulario no cambia. Las imágenes de origen en el disco deben estar siempre disponibles cada vez que frmEmployees está abierto.

2. Subir imágenes desde el disco manualmente.

Este es un ejercicio de una sola vez, encontrar las imágenes en el disco y cargarlas en ImageList Control.

La principal ventaja es que una vez que las imágenes se cargan en ImageList Control, permanecen intactas. El control ImageList con imágenes se puede copiar y pegar para otros proyectos si se requieren las mismas imágenes para más de un proyecto. No es necesario volver a cargar las imágenes desde el disco. El control ImgeList con imágenes también se puede compartir con amigos.

Entonces, optemos por el mejor método de carga manual de imágenes. Cree dos .bmp imágenes de 50 x 50 píxeles de resolución (imagen1.bmp , imagen2.bmp ) y manténgalo listo en su carpeta, diga D:\Access\ como referencia.

Abra frmEmployees en vista de diseño.
Haga clic derecho en el Control ImageList, resalte Objeto ImageListCtrl y seleccione Propiedades.
En el General pestaña seleccione el Personalizado Opción de subir imágenes con la resolución original.

El General vista de pestaña de ImageList Control.

Las Imágenes pestaña Vista del control ImageList

Nota: Después de probar las imágenes cargadas en el control ListView, si desea probar otras opciones 48 x 48, 32 x 32, 16 x 16, primero debe eliminar todas las imágenes cargadas y luego ir a General pestaña, seleccione la opción requerida y luego cargue las imágenes nuevamente. Las imágenes seleccionadas se reducirán al tamaño de imagen seleccionado.

Como puede ver en la pestaña de imágenes de muestra, he subido dos imágenes seleccionando Insertar imagen. Botón de comando y seleccionando las imágenes de mi disco.

La primera imagen está en el estado seleccionado y ligeramente en la posición elevada. El control Índice muestra el valor 1 y el cuadro de texto Clave muestra el texto Primero . El valor del índice aparecerá automáticamente, pero el valor de la clave (algún valor significativo que pueda memorizar fácilmente y relacionar la imagen con los datos) puede ingresarse manualmente.

Podemos usar el número de índice o el valor de texto clave en el icono y en el PequeñoIcono Parámetro de ListItems.Add() método.

Incluso si planea usar la secuencia de números de índice, la secuencia de carga de la imagen debe sincronizarse con los datos que planea cargar en el control ListView, como el nombre de los empleados debe coincidir con sus fotos en la secuencia correcta.

Un método mejor en el caso de los empleados, su nombre puede usarse como texto clave y es muy fácil de relacionar con el registro. Las imágenes generalizadas no necesitan coincidir con este tipo de verificación de relaciones, pero sus nombres clave ayudarán a indicar lo que hacen, como carpeta_cerrada o carpeta_abierta .
Haga clic en las Imágenes pestaña.
Haga clic en Insertar imagen y encuentra tu D:\Access\Image1.bmp imagen y selecciónela, haga clic en Abrir Botón para cargar la imagen en ImageList Control.
Escriba algún valor de texto en la Clave cuadro de texto (los valores clave deben ser únicos).
Repita los pasos 5 y 6 para la segunda imagen, escriba el valor-clave.

Estamos listos con nuestro Control ImageList con imágenes de muestra y listos para mostrarlas en el Control ListView.

Asignación del objeto ImageList a las propiedades del objeto ListView.

Las siguientes propiedades del objeto ListView deben asignarse con el objeto ImageList para usar las referencias de imagen en el control ListView:
1. Vista de lista.Iconos de encabezado de columna
2. Vista de lista.Iconos
3. Vista de lista.Iconos pequeños
El siguiente paso es asignar el Objeto ImageList al objeto ListView requerido en código VBA a través de las propiedades del objeto:lvwList .Iconos de encabezado de columna , lvwLista .Iconos , lvwLista .iconospequeños antes de que podamos usar las referencias de imagen (índice o valores clave) en ColumnHeaders.Add() , ListItems.Add() y ListSubItems.Add() métodos. Ya hemos agregado el Código VBA requerido en el programa principal y los mantuvimos deshabilitados. Todo lo que tenemos que hacer es habilitar esas líneas de código eliminando el símbolo de comentario de ellas y agregando las referencias de imagen requeridas en el Agregar anterior. parámetros del método.
Elimine los símbolos de comentario (') de las cuatro líneas de código VBA que se muestran arriba con color rojo en LoadListView() Procedimiento.
Modifique las siguientes declaraciones, que se muestran en color rojo en el programa principal LoadListView() como se muestra con el Índice de iconos número 1 y 2 en el Icono y PequeñoIcono las posiciones de los parámetros, respectivamente, como en el segmento de código con letras negras en negrita que se indican a continuación:b>Establecer lvwItem =.ListItems.Add(, , CStr(Nz(rst.Fields(0).Value,""))) 'Cambiar a Establecer lvwItem =.ListItems.Add(, , CStr(Nz(rst.Fields(0).Value,"")), 1, 2) 'Agregue las siguientes columnas de datos como subelementos de ListItem con lvwItem 'Syntax .Add Index,Key,Text,Report Icon,TooltipText For j =1 To rst.Fields.Count - 1 ' .ListSubItems.Add , , CStr(Nz(primero.Campos(j).Valor, "")) 'Cambiar a .ListSubItems.Add , , CStr(Nz(rst.Fields(j).Value, "")),,"Click" Siguiente final con rst.MoveNextLooprst.Close

Dado que solo tiene dos imágenes, la primera imagen con número de índice 1 se utiliza como icono Parámetro y 2 está en el PequeñoIcono posición del parámetro. El icono La imagen se muestra solo cuando cambia la opción de visualización ListView a 0 - lvwIcon. En el método ListSubItems.Add() no hemos agregado una referencia de imagen y para el siguiente parámetro Tool-Tip text "Click " se agrega. El texto de clic se mostrará cuando el puntero del mouse descanse en cualquiera de las columnas, en la segunda columna en adelante.

Después de realizar los cambios anteriores en el código VBA, guarde el formulario frmEmployees con los cambios.

Abra el formulario en vista normal. La vista debe parecerse a la imagen de muestra en la parte superior de esta página.

El pequeño icono será visible en todas las demás opciones de ListView. Verifique los datos de muestra de las imágenes de ListView de los empleados que se proporcionan a continuación.

0 - Vista de iconos lvw

2 - lvwVista de lista

La primera imagen en la parte superior de esta página es el 03 - lvwReport Vista. Solo en esta vista, todos los valores de columna se muestran en la hoja de datos como una pantalla.

Cambie el formulario a vista de diseño. Muestre la hoja de propiedades del control ListView. Cambie las opciones de vista y pruebe cada vista y descubra cómo se ven las diferentes vistas.