Sección de controles Ocx para Visual basic , Dll , Activex

221 - Control UC - Thumbnail Scroll

Links

Descripción
Descargar
Notas
Capturas de pantalla
Propiedades
Funciones y métodos
Eventos

Descripción

Este es un control para usar una barra de Scroll en la que se puede cargar una tira de imágenes y visualizarlas como Thumbnails o vista en miniatura.

La barra es similar a la que utiliza el programa Google Picasa, aunque por supuesto no tan profesional y con algunas o varias limitaciones, pero puede funcionar perfectamente para algún programa de Visual basic en el que se quiera mostrar gráficos de esta forma.

Barra de Thumbnails de Google Picasa

Descargar

>> - Código fuente con un formulario de ejemplo

Créditos

Paul Caton : Por el módulo completo ( clase cTimer. )
Leandro Ascierto : Por el código de la función DrawSkin para dibujar los estilos con la función de windows bitBlt
Gonchuki : Autor del control Chamaleon Button (por algunas líneas de la función mUpdateBtn)

Notas

Cargar muchas imágenes

El control puede ser muy lento si se cargan muchos gráficos, o se cargan pocos archivos pero de gran tamaño. Por este motivo puede que no sirva para poder explorar carpetas del disco duro, como lo hace el control del programa Google Picasa y otros similares, es decir mas bien el UC puede ser útil para cargar imágenes que de antemano sabemos que no van a ser demasiadas o muy pesadas.

Aunque "creo" que esto último se podría realizar, si se creara alguna especie de paginación de imágenes, es decir si se quiere listar muchos gráficos, por ejemplo una carpeta que contiene 500 o 1000 archivos, crear un array o colección de 10 elementos, y en cada elemento colocar 50 imágenes. Luego se podría crear una botonera para moverse entre las páginas. ( Algo similar a la paginación de registros de una base de datos)

Formatos gráficos

Otra limitación que tiene, es la que de no poder leer formatos gráficos que no sean los que acepta Visual basic. Es decir solo se pueden agregar : Jpg, Gif, Bmp, Ico (algunos), Wmf.. Para cargar por ejemplo Pngs, se tendría que convertir la imagen previamente a un objeto tipo stdPicture. ya que el UC no tiene ninguna función implementada para realizar esto.

Timer

El control utiliza dos Timers, pero solo funcionan mientras se interactúa con el control, de modo de que no consume recursos por ese lado mientras no se utilice. Uno de los timers es para crear el scroll, luego al soltar el mouse o al finalizar el se deshabilita. El otro Timer, es para crear los botones (las flechas ) y estos se activan cuando se produce el MouseOver, se presiona, etc .., pero cuando se sale del área del mismo, también se desactiva.

Referencias

Para usar el control en un nuevo proyecto, se debe:

Importar la clase cTimer : Desde el menú Proyecto > Opción Agregar módulo de clase > Opción Existente , Luego incluir el archivo cTimer.cls
Importar el archivo de recursos que contiene las imágenes para los estilos ( : Menú Proyecto > Opción Agregar archivo , y buscar el fichero skins.res )
Importar el archivo WinSubHook2.tlb. Este archivo lo utiliza la clase cTimer. Se debe importar desde el Menú Proyecto > Opción Referencias

Errores

El control no está muy depurado, asi que seguramente contiene algunos errores. También quedan por agregar algunas otras opciones, como por ejemplo

Agregar Algunos eventos que faltan
Poder mostrar un puntero para el mouse cuando se está sobre un thumbnail, por ejemplo como el de un enlace web.
Añadir una opción, que al poner el enabled del control en False, la tira de imágenes se deshabilite, por ejemplo se podria generar el área visible de la imagen como escala de grises, o aplicarle transparencia (creo que se podria usar la función de windows AlphaBlend para esto último.)
Crear una propiedad para que que acepte DragDrop de archivos automáticamente, y no tener que hacerlo colocando código en el formulario, de modo que con un True/False se pueda aceptar las imágenes.

Capturas de pantalla del control

Funciones y métodos

Agregar imágenes

Para cargar los thumbnails se usa el método AddThumb . Se debe enviar como parámetro obligatorio la imagen, y una clave opcional para identificarla. (Nota. Si se asigna una clave no debe ser un valor numérico )

ucThumb1.AddThumb(LoadPicture(Ruta de la imagen), Clave)

O también se puede enviar cualquier gráfico cargado en otro control, por ejemplo de un picturebox, de un ImageList etc ..

ucThumb1.AddThumb(ImageList.ListImages(indice).Picture)

Luego de agregarlas, para poder mostrarlas se debe llamar a la función ShowThumbnails

    With ucThumb1
        Call .AddThumb(LoadPicture("c:\imagen.jpg"))
        Call .ShowThumbnails
    End With

Nota. Si se cargan los gráficos dentro de un bucle For , While etc .., no se debe llamar a la función showThumbnails dentro del bucle, si no cuando termine.

Modificar un item

ChangeThumb(NewStdPicture as StdPicture ,Index as Long,NewKey as String )

NewStdPicture : La nueva imagen

Index: Parámetro obligatorio que indica el índice del gráfico a modificar

NewKey : Parámetro opcional para la clave

Nota: No es necesario ejecutar el método ShowThumbnails luego de cambiar el item.

Eliminar

Eliminar un gráfico

    With ucThumb1
        Call .RemoveThumb("Indice o Key del Thumbnail")
    End With

Eliminar todos

    With ucThumb1
        Call .RemoveThumbnails
    End With

Seleccionar

Para seleccionar una imagen desde el código , se puede usar la función selectedThumbnail, enviando el índice del Thumbnail

    With ucThumb1
        ' seleccionar la primera
        Call .SelectedThumnail(1)
    End With
    
    With ucThumb1
        ' seleccionar la última
        Call .SelectedThumnail(.ImageCount)
    End With

Para poder obtener la colección de thumbnails una forma puede ser

    ' Crear una nueva colección temporal
    Dim cThumbnails As New Collection
    
    ' Obtenerla
    Set cThumbnails = ucThumb1.GetThumbnailColection
    
    ' Recorrerla
    ' -----------------------------------------------
    Dim i As Integer
    With cThumbnails
        For i = 1 To cThumbnails.Count
            ' Mostrar propiedades de cada imagen ( picture, Ancho, alto, tipo, etc ..)
            Me.Picture = .Item(i)
            Debug.Print .Item(i).Handle
            Debug.Print .Item(i).Height
            Debug.Print .Item(i).Type
            Debug.Print .Item(i).Width
        Next
    End With
    
    Set cThumbnails = Nothing

Propiedades

BackColor

Es el color de fondo del área de los thumbnails. Nota. Si se cambia en tiempo de ejecución , el control tiene que volver a recorrer la colección de gráficos y redibujar todas las imágenes nuevamente. Por eso no conviene cambiar el color si hay muchas.

BorderColorSel

Color del rectángulo de selección. Este se puede cambiar en tiempo de ejecución por que no tiene que redibujar toda la lista de imágenes nuevamente

Nota. Por defecto para cada estilo usa un color de selección. Si se quiere cambiar los valores de color, se puede hacer desde la propiedad Skin en el código fuente del control , por ejemplo

    If Skin = GooglePicasa Then
       picThumb.ForeColor = "El Color"
    ElseIf Skin = XP Then
       picThumb.ForeColor = "El Color"
    End If
    'etc ...

ImageCount

Para saber la cantidad de Thumbnails

ScrollMode

Propiedad que tiene dos valores para los modos de Scroll. ( eNormal y eThumbnail )

Si está en eNormal, al presionar los botones de flechas, la tira de imágenes se desplaza en forma continua.

Si está con el valor eThumb, al presionar los botones, se desplaza imagen por imagen. También la imagen actual se visualiza en el centro. Nota. Para cambiar los valores de desplazamiento, por otros personalizados, modificar los valores de la variable mValueScrollSel, en la propiedad ThumbnailSize del código fuente del control.

SelectedIndex

Para saber el índice del Thumbnail seleccionado

Skin

Para cambiar los estilos. Nota. Se pueden crear skin propios

SkinCustomPicture

Para cargar un Skin desde un archivo. Se debe cargar con Set, y también cambiar la propiedad Skin con el valor Custom

Set UC.SkinCustomPicture = LoadPicture(App.Path & "\skin\skin.bmp")

ThumbnailContainerMargin

Es el margen lateral entre el botón de scroll y el control.

ThumbnailMargin

Margen interior para los thumbnail

ThumbnailSize

Tamaños de los Thumbnails. Ya contiene una lista de valores definidos para usar : de 20, 24, 32, 48, 64, 128 etc .. hasta 256 pixeles.

Nota. Si se cambia este valor en tiempo de ejecución , se debe volver a cargar toda la lista y dibujar nuevamente las imágenes , por eso no conviene cambiarlo en tiempo de ejecución si hay muchos gráficos por que puede llegar a ser lento ( igual para las propiedades ThumbnailMargin, y ThumbnailContainer )

Eventos

ThumbnailClick

Evento principal del control, que sirve para recuperar la imagen al hacer clic en el Thumbnail

ThumbnailMouseDown

Se puede usar para mostrar un popup menú

Nota. Para desplegar el menú sobre el Thumbnail, la propiedad scrollMode debe estar con el valor -> Normal , ya que si está con el valor eThumb , al realizar el scroll y desplazarse el gráfico hacia el centro, el menú popup queda en otra ubicación distinta a la del puntero del mouse.

Private Sub ucThumb1_ThumbnailMouseDown( _
    Index As Integer, _
    Button As Integer, _
    Shift As Integer, x As Single, Y As Single)
    
    Me.PopupMenu Un_menú

End Sub

Progress, ProgressEnd y ProgressInit

Se pueden usar para mostrar un progreso al cargar los gráficos. Ejemplo:

'\\ Inicio - hacer visible la barra
' ------------------------------------------------
Private Sub ucThumb1_ProgressInit()
    ProgressBar.Visible = True
End Sub

'\\ Progreso - Mostrar la carga
' ------------------------------------------------

Private Sub ucThumb1_Progress( _
    ByVal lValue As Integer, _
    ByVal lMaxValue As Integer)
    
    With ProgressBar
        .Max = lMaxValue
        .Value = lValue
    End With
    
End Sub

'\\ Fin de Progreso - Ocultar el control
' ------------------------------------------------

Private Sub ucThumb1_ProgressEnd()
    ProgressBar.Visible = False
End Sub

Key Down

Se puede usar este evento por ejemplo para desplazar las imágenes mediante las flechas del teclado ( Nota. el control debe tener el foco).

Private Sub ucThumb1_KeyDown(KeyCode As Integer, Shift As Integer)
    With ucThumb1
        Select Case KeyCode
            Dim lIndex As Integer
            ' izquierda
            Case vbKeyLeft
                lIndex = .SelectedIndex - 1
            ' derecha
            Case vbKeyRight
                lIndex = .SelectedIndex + 1
            ' Primer imagen
            Case vbKeyUp
                lIndex = 1
            ' ir a la última
            Case vbKeyDown
                lIndex = .ImageCount
        End Select
        If lIndex Then Call .SelectedThumnail(lIndex)
    End With

End Sub

Buscar en Recursos vb con Google