Listbox - ¿Cómo puedo implementar esta idea?

Hola.

Tengo un Listbox en una aplicación Desktop que muestra un listado de tareas. Este Listbox tiene una cabecera con el título “Tareas” y una única columna con el nombre de cada tarea.

Lo que me gustaría es poder añadir un botón o etiqueta o gráfico a la derecha del título (dentro de la cabecera), de manera que al pincharlo con el ratón atrape el evento y muestre la ventana o panel de “Alta de tarea”.

¿Cómo podría hacer algo parecido? ¿Algún artículo o enlace que me pueda servir para seguir investigando?

Un saludo,
Óscar.

Tal vez te sirva este video:

Gracias por el vídeo, Alberto.

Lo he visto de principio a fin y lo cierto es que me aclara cómo insertar una imagen acompañada de un texto para reemplazar el texto por defecto de la cabecera.

Ahora lo que tengo que averiguar es cómo puedo atrapar el evento de hacer click con el ratón sobre dicha imagen.

Un saludo,
Óscar

No sé si se pueda indicar sólo sobre la imagen, tal vez sólo se pueda identificar el click en la columna completa del listbox con https://documentation.xojo.com/api/deprecated/listbox.html#listbox-headerpressed

Hola,

Si no consigues atrapar el click usando solo el listbox podrías poner un canvas transparente sobre la zona de interés y atrapar el click con el canvas.

Siempre he leído que superponer controles da problemas en Windows, así que tendrías que hacer pruebas.

Julen

Hola @Óscar_Jesús_López_Sierra

La opción más sencilla sería la siguiente.

  • En el IDE, con el ListBox seleccionado, arrastra un botón desde la Librería sobre el ListBox. Deberías de ver que el contorno del ListBox se resalta de color rojo indicando que el nuevo botón estará contenido en la vista del propio ListBox.

  • Sitúa el botón en la posición de la cabecera que desees y asegúrate de marcar los anclajes superior y derecho.
  • Cambia el estilo del botón (por ejemplo “Recesed”)
  • Implementa el evento “Action” del botón para añadir el código que desees (en este ejemplo simplemente muestra un mensaje).
    BotonListBox
1 Like

Gracias, Javier. Creo que me va a servir. Ya había pensado en superponer otro componente, pero no me atrevía a hacerlo porque podría tapar el símbolo de ordenación de la cabecera que se dibuja cuando pinchas sobre ella para reordenar la columna.

He puesto en práctica la técnica que se muestra en este vídeo y lo cierto es que tiene un fallo: para que la cabecera se dibuje inicialmente a mayor tamaño que el icono, en el editor tienes que indicarle un tamaño de fuente superior a la altura en píxeles del icono. Por ejemplo, para un icono de 32x32 tienes que elegir un tamaño de fuente 35. Luego, en el evento que se describe para la cabecera, reduces el tamaño con el que dibujas el título. El problema es que el cambio de tamaño de fuente del editor no solo afecta a la cabecera, también afecta a los elementos de la lista, por lo que debajo de la cabecera todos los items se dibujan con tamaño 35.

El ListBox de la librería Graffiti me permite separar el tamaño de la fuente para cabecera y celdas, pero por desgracia no incluye los eventos del repintado de la cabecera que se han añadido recientemente.

Me respondo a mí mismo:

Mirando detenidamente la documentación me he fijado en un evento llamado CellTextPaint y lo he implementado de esta manera:

g.FontSize = 14
g.DrawText(Me.CellValueAt(row, column), x, y)

Return True

Ahora el ListBox ya dibuja cabecera y celdas a tamaño distinto.

Otra cosa nueva que he aprendido. :smile:

1 Like