Continuando con la creación de elementos típicos de aplicaciones, vamos a crear un cuadro de lista o ListBox.

Los cuadros de lista contienen un conjunto de opciones en una lista, por la que nos podremos desplazar mediante unos botones, ya sea en sentido vertical, como en horizontal o en ambos, mediante unos botones (barra de desplazamiento).

Voy a mostrar cómo crear un cuadro de lista con barra de desplazamiento vertical ya que es el más común.

Comenzaremos dibujando mediante la herramienta Figura un rectángulo donde irá nuestra lista.


 En el Explorador de propiedades le damos los siguientes valores:

• Contorno: Estilo= Sólido; Color RGB= 192, 192, 192; Ancho= 2.
• Relleno: Estilo= Sólido; Color RGB= 255, 255, 255.
• Contenedor: Puede contener= Cualquier cosa; Regla de contenedor= Completamente contenido.
• Restricciones: Puede moverse: Verticalmente.

A continuación, mediante la herramienta Texto, escribimos al lado del rectángulo cada una de las opciones. Cuando las tengamos todas, las seleccionamos y llevamos todas nuestras opciones sobre el rectángulo. Comprobamos que si desplazamos el rectángulo su contenido también lo hace.

El siguiente paso que debemos realizar es dibujar mediante la herramienta Figura un rectángulo en la parte superior de nuestro primer rectángulo y otro en la parte inferior, ocultando parte de la lista.

Si utilizamos un color degradado o una imagen como fondo de página, tendríamos que utilizar la herramienta Cámara para tomar una instantánea de la parte donde irá el rectángulo para que quede disimulado con el fondo.


Mediante la herramienta Figura dibujamos un rectángulo para dibujar la barra de desplazamiento. En el Explorador de propiedades le damos los siguientes valores:

• Contorno: Estilo= Sólido; Color RGB= 192, 192, 192; Ancho= 2.
• Relleno: Estilo= Sólido; Color RGB= 255, 255, 255.

Después dibujaremos dos pequeños rectángulos a modo de botones con unos triángulos en su interior y agrupamos cada botón con su respectivo triángulo.

Ahora vamos con la parte más delicada. Dibujaremos una línea horizontal en la parte superior de la lista, justo donde finalizaría si desplazásemos la lista hasta el máximo y lo mismo en la parte inferior.


En el Explorador de propiedades para ambas líneas horizontales debemos poner:

• Restricciones: Puede bloquear= Verdadero.

Estas líneas nos ayudan a parar la lista cuando se desplace ya se hacia arriba o hacia abajo. Mediante el Control deslizante de translucidez las hacemos transparentes.

Ahora, vamos a colocar el botón central de la barra de desplazamiento justo encima del botón inferior de la barra de desplazamiento. Desgraciadamente, no he conseguido que funcione exactamente igual que un cuadro de lista (ListBox), ya que cuando desplazamos este botón, la lista se debe mover en sentido contrario al botón.

En el Explorador de propiedades ponemos la propiedad:

• Restricciones: Puede moverse: Verticalmente.

Una vez dibujado lo agrupamos con el rectángulo de la lista.

En el Explorador de propiedades les damos a los botones con el triángulo la propiedad:

• Restricciones: Puede bloquear= Verdadero.

Ahora, seleccionamos el botón superior de la barra de desplazamiento y en el Explorador de acciones seleccionamos Acciones de objeto y elegimos Colocar de forma incremental, ponemos los siguientes valores:


El objetivo es la última agrupación que hemos realizado, la del botón central con la lista. Para el botón inferior haremos lo mismo pero poniendo el valor Y en negativo.

Dibujaremos dos líneas horizontales del color del borde de la lista para que quede cerrada por la parte superior e inferior.


La parte final consistiría en crear una acción para cada una de las opciones o poner el comando Arrastrar una copia, eso lo dejo a la elección de cada uno.