Uso de avanzado de contenedores: Creando un entorno de controles parecido a Thunderbird

Uso de avanzado de  contenedores: 

Creando un entorno de controles parecido a Thunderbird

Cuando uno se inicia en crear los formularios y añadirles controles, se suele "arrastrar y soltar" los controles en el formulario, colocándolos de forma manual en él. 

Esto tiene una limitación, la cual  es que cuando el formulario cambie de tamaño (se aumente o disminuye de tamaño), los controles se quedan en el mismo sitio, dejando espacios vacíos sin rellenar o en el caso contrario (disminuir las dimensiones del formulario) se queden ocultos a la vista  del usuario.

Para evitar esto, se usan los "contenedores", y sus propiedades "expand" y "arrangement"

Con la propiedad "expand" establecida con valor True, se establece que si se cambia el tamaño donde esta incluido  el contenedor (ya sea un formulario u otro contenedor), este organizará su contenido (controles (label,textbox,buttón, etc) u otros contenedores) que estuvieran dentro de él.

Con la propiedad "arrangement" ( ver gambaswiki), se establece la forma de adaptar los controles o contenedores "hijos" (los que estén en su interior). Tiene varios valores, y según estos, los elementos que estén en su interior se ordenaran:

• Column o TopBottom: Se ordenan en columnas
• Fill: Ampliarán sus dimensiones al área que tenga el contenedor
• Horizontal: Se ordenan a la altura (height) que tenga el contenedor
• Row o LeftRight: Se ordena en filas
• None: No se ordenan los elementos.
• Vertical: Se ordenan por el ancho (width) que tenga el contenedor.

En este post, pondré de ejemplo como usar los contenedores de controles para conseguir un entorno parecido al programa Thunderbird.

Video introductorio:

Empezamos:

 El formulario inicial, tendrá dos contenedores:  un tabstrip (tendrá las pestañas)  y un panel (zona inferior)

Para que los contenedores, ocupen todo el formulario, tiene que tener la propiedad arrangement como Vertical. Asi tomarán en ancho del formulario.

Además el TabStrip, tendrá que expandirse (.expand=true) y el panel inferior, permanecer con el mismo alto.

En el TabStrip, su propiedad arrangement será "Fill", para que los controles hijos que contengan lo ocupen completamente. Y en panel inferior, tendra el arrangement igual a Horizontal para que se ordenen horizontalmente.

Luego continuaremos definiendo otros contenedores,Vsplit, para dividir el contenido mediante barras horizontales, Hsplit para hacer divisiones en vertical. Usando la propiedad .layout que tienes estos contenedores del tipo _split, se le  asigna un array de números enteros para definir como se reparte el espacio dentro de ellos..

Por ejemplo [1,3,3],  definiria 2 subdivisiones (barras que se pueden mover), asignadole el espacio a los contenedores o controles que contendría cada subdivisión el siguiente tamaño:

• 1, sería 1/6 del espacio disponible (16,6%)
• 3, seria 3/6 del espacio disponible (50%)
• 2, seria  2/6 del espacio disponible (33,4%)

La organización de los controles la haremos según esta jerarquía de controles y contenedores:

Jerarquía de Controles

Quedando el formulario así:

Formulario con los controles y contenedores añadido

A la vez iremos definiendo las distintas propiedades, quedando como sigue:

De esta manera, el formulario se comportaría de una manera similar a como lo hace el formulario principal del programa Thunderbird, cuando cambiamos de tamaño el formulario, o desplazamos las distintas barras de separación, con el consiguiente adaptación al tamaño de los controles y/o contenedores  contenidos dentro de ellos.

Os podeis descargar el ejemplo aqui:

Descargar

Saludos