Xojo 2020r1: ¡Personaliza las Cabeceras de tu ListBox!

Fijo, Xojo 2020r1 incorpora algunas de las características más esperadas y solicitadas de los últimos años, pero también está plagado con otras pequeñas joyas aquí y allá; como por ejemplo la capacidad de personalizar las cabeceras de los ListBox.

Estoy seguro de que esta capacidad logrará que el diseño de tus ListBox brille aun más, gracias al trabajo del Ingeniero de Xojo William Yu. Y lo mejor de todo es que sólo tendrás que implementar un par de eventos para ello (realmente como los que ya conoces y utilizas para el dibujado de las celdas del ListBox).

Pero incluso en el caso de que no precises personalizar el encabezado de tus ListBox justo ahora, ya recibirás una mejora: la altura de las cabeceras se ajustarán en macOS de modo que se presente correctamente el texto asignado y con el tamaño de fuente que hayas seleccionado (algo que ya se hacía en anteriores versiones del producto sobre Windows y Linux).

Además, ahora es realmente fácil añadir cualquier combinación de imagen, color de fondo y texto que necesites/quieras utilizar en las cabeceras; y el modo de hacerlo es añadiendo estos dos Manejadores de Evento sobre tus instancias de ListBox:

HeaderBackgroundPaint(g As Graphics, column As Integer) as Boolean

HeaderContentPaint(g As Graphics, column As Integer) as Boolean

¿Te resultan familiares? ¡Debería! Como puedes ver, la signatura de los Manejadores de Eventos son muy parecidos a los utilizados a la hora de personalizar el dibujado sobre las celdas de las filas:

CellBackgroundPaint(g As Graphics, row As Integer, column As Integer) as Boolean

CellTextPaint(g As Graphics, row As Integer, column As Integer, x as Integer, y as Integer) as Boolean

Por tanto, ya sabes que el contexto gráfico "g" que recibe el evento es relativo a cada cabecera con las coordenadas (0,0) situadas en la esquina superior izquierda, mientras que los valores g.width y g.height son la anchura y altura respectivas de la cabecera propiamente dicha. Por tanto, puedes utilizar cualquiera de los métodos y propiedades disponibles en la clase Graphics para dibujar los contenidos que desees justo ahí.

Quizá te preguntes si hay alguna propiedad que puedas utilizar para definir la altura de la cabecera. El truco aquí consiste en utilizar FontSize en la sección de Atributos del Panel Inspector.

Por ejemplo, digamos que quieres dibujar algunos imágenes que tienen una altura de 32 píxeles, mientras que quieres utilizar un tamaño de 20 puntos para el texto.

Por tanto, en este caso, deberías definir 32 puntos como el tamaño de texto en el ListBox… y luego ajustar esa misma propiedad de tamaño de texto a 20 puntos para el texto durante su dibujado, utilizando para ello probablemente el Manejador de Evento HeaderContentPaint… ¡y no olvides de definir también el valor de FontSize al deseado cuando se trate de dibujar el texto en las celdas de las filas!

Como resultado, obtendrás una cabecera con el tamaño esperado tanto para que se dibuje correctamente tanto tus imágenes como el texto; tal y como se muestra en la captura de pantalla.