Layout

Los controles de layout del objeto formulario permiten distribuir, ajustar el tamaño y alinear, de manera organizada y automática, los controles que contienen, permitiendo además organizar otros controles de layout contenidos. Facilitan el ajuste de los controles al contenido, adaptándose a los nombres y contenidos, incluyendo multi-idioma, ajustándose los tamaños en función de la traducción correspondiente, además de ajustar el alto y ancho en función del tamaño del formulario, según la pantalla o el tamaño a que se redimensione éste en modal.

También distribuyen los controles en el formulario teniendo en cuenta condiciones de visibilidad, haciendo que unos controles ganen el espacio de los controles que no se visualizan.

Las propiedades de un control de tipo layout son:

Identificador

Etiqueta alfanumérica que identifica al control. Este identificador será el que se usa para referenciarlo en los inspectores y en las propiedades de otros objetos.

Nombre

Etiqueta alfanumérica que servirá como descriptor del control. Es el texto que se presentará al usuario final de la aplicación para referenciar el control. Podemos definir una etiqueta por cada idioma presente en el proyecto.

Estilos

Podemos definir el estilo privado que limita el acceso del usuario final al sub-objeto desde puntos donde no se haya programado el acceso al mismo.

Comentarios

Esta propiedad nos permite documentar el uso del control.

Tipo

Muestra el tipo de control de que se trata. En este caso es layout, aunque podremos modificarlo. Si modificamos el tipo de control perderemos las propiedades específicas de éste.

Ancho

Alto

Posición X

Posición Y

Tipo de layout

Permite configurar el tipo de layout para la distribución, organización y gestión del tamaño de los layouts y controles que contenga.

Horizontal

Los layouts y controles que contiene el layout se distribuyen horizontalmente.

Vertical

Los layouts y controles que contiene el layout se distribuyen verticalmente.

Grid

Los layouts y controles que contiene el layout se distribuyen como celdas en una rejilla.

Flujo horizontal

Los controles contenidos en el layout se distribuirán horizontalmente si el ancho del formulario lo permite. Por ejemplo, si a un formulario le asignamos este layout como valor y diseñamos el formulario con todos los controles en una única columna, en ejecución, si el ancho del formulario lo permite, los controles se irán pintando horizontalmente en el espacio disponible:

Flujo vertical

Los controles contenidos en el layout se distribuirán verticalmente si la altura del formulario lo permite. Por ejemplo, si a un formulario le asignamos este layout como valor y diseñamos el formulario con todos los controles en una única fila, si en ejecución el alto del formulario lo permite, los controles se irán pintando verticalmente a medida que vayamos ampliando la altura del formulario:

Si los controles contenidos dentro de un layout de flujo horizontal o vertical no tienen ancho fijo, éstos se expandirán también par ocupar el ancho disponible:

Alineamiento horizontal

Los layouts y controles que contiene el layout se distribuyen horizontalmente en función de los valores posibles:

  • Izquierda: los layouts y controles se distribuyen horizontalmente alineados hacia la izquierda.

  • Derecha: los layouts y controles se distribuyen horizontalmente alineados hacia la derecha.

  • Centrado: los layouts y controles se distribuyen horizontalmente centrados.

  • Justificado: los layouts y controles se distribuyen horizontalmente justificados.

Alineamiento vertical

Los layouts y controles que contiene el layout se distribuyen verticalmente en función de los valores posibles:

  • Arriba: los layouts y controles se distribuyen verticalmente alineados hacia arriba.

  • Abajo: los layouts y controles se distribuyen verticalmente alineados hacia abajo.

  • Centrado: los layouts y controles se distribuyen verticalmente centrados.

Espaciado

Espacio de separación en píxeles entre los layouts y controles que se distribuyen en el layout.

Margen izquierdo

Espacio de separación en píxeles entre el borde izquierdo del formulario y los layouts y controles que se distribuyen en el layout.

Margen derecho

Espacio de separación en píxeles entre el borde derecho del formulario y los layouts y controles que se distribuyen en el layout.

Margen superior

Espacio de separación en píxeles entre el borde superior del formulario y los layouts y controles que se distribuyen en el layout.

Margen inferior

Espacio de separación en píxeles entre el borde inferior del formulario y los layouts y controles que se distribuyen en el layout.

Espaciador fijo

Control de layouts que permite establecer una separación fija entre dos layouts o dos controles. Las propiedades de un control de tipo espaciador son:

Identificador

Etiqueta alfanumérica que identifica al control. Este identificador será el que se usa para referenciarlo en los inspectores y en las propiedades de otros objetos.

Nombre

Etiqueta alfanumérica que servirá como descriptor del control. Es el texto que se presentará al usuario final de la aplicación para referenciar el control. Podemos definir una etiqueta por cada idioma presente en el proyecto.

Estilos

Podemos definir el estilo privado que limita el acceso del usuario final al sub-objeto desde puntos donde no se haya programado el acceso al mismo.

Comentarios

Esta propiedad nos permite documentar el uso del control.

Tipo

Muestra el tipo de control de que se trata. En este caso es espaciador, aunque podremos modificarlo. Si modificamos el tipo de control perderemos las propiedades específicas de éste.

Ancho

Alto

Posición X

Posición Y

Tipo de espaciador

El espacio que ocupa el espaciador se gestiona en función de los valores posibles:

Espaciador fijo

El espacio es fijo y no permite ni crecer ni que se haga más pequeño como consecuencia de la modificación de tamaño del formulario.

Espaciador expandible

El espacio es modificable, permitiendo crecer o hacerse más pequeño de acuerdo a las necesidades del resto de controles cuando se modifica el tamaño del formulario.

Aviso: los espaciadores no son funcionales dentro de layouts de tipo grid.

Espaciador expandible

Control de layouts que permite establecer una separación expandible entre dos layouts o dos controles. Las propiedades de un control de tipo espaciador son:

Identificador

Etiqueta alfanumérica que identifica al control. Este identificador será el que se usa para referenciarlo en los inspectores y en las propiedades de otros objetos.

Nombre

Etiqueta alfanumérica que servirá como descriptor del control. Es el texto que se presentará al usuario final de la aplicación para referenciar el control. Podemos definir una etiqueta por cada idioma presente en el proyecto.

Estilos

Podemos definir el estilo privado que limita el acceso del usuario final al sub-objeto desde puntos donde no se haya programado el acceso al mismo.

Comentarios

Esta propiedad nos permite documentar el uso del control.

Tipo

Muestra el tipo de control de que se trata. En este caso es espaciador, aunque podremos modificarlo. Si modificamos el tipo de control perderemos las propiedades específicas de éste.

Ancho

Alto

Posición X

Posición Y

Tipo de espaciador

El espacio que ocupa el espaciador se gestiona en función de los valores posibles:

Espaciador fijo

El espacio es fijo y no permite ni crecer ni que se haga más pequeño como consecuencia de la modificación de tamaño del formulario.

Espaciador expandible

El espacio es modificable, permitiendo crecer o hacerse más pequeño de acuerdo a las necesidades del resto de controles cuando se modifica el tamaño del formulario.

Los espaciadores no son funcionales dentro de layouts de tipo grid.

Uso de layouts

Hay dos tipos de controles de layout. Por un lado el control específico de layout, que permite tres opciones agrupadoras: layout horizontal, layout vertical, layout grid, flujo horizontal y flujo vertical, y por otro lado un control de espaciado que permite dos opciones: espaciador fijo o espaciador expandible.

Cada una de las opciones de layout distribuye los controles que contienen bien en horizontal, bien en vertical, bien en cuadrícula, pudiendo cambiar el tipo de layout en cualquier momento.

Los de tipo flujo hacen que los controles se intenten poner en una misma fila o en una misma columna, según sea flujo horizontal o flujo vertical, en función del ancho o del alto del formulario respectivamente.

La opción de espaciador fijo permite generar un espacio de tamaño fijo, mientras que el espaciador expandible genera un espacio que crecerá con el formulario.

El anidamiento de controles de layout permite organizar los controles de forma más eficiente, ya que un control de layout también organiza los controles de layout que contiene.

El formulario y los controles de formulario, además de los layouts, tienen propiedades de layout. En el formulario podemos configurar si la agrupación generada por éste será vertical, horizontal o grid.

Cómo se comportarán los controles dentro de un layout lo podemos configurar en el propio layout, usando para ello las propiedades ancho en layout y alto en layout, siendo fijo, por defecto o proporcional las opciones disponibles, bien para horizontal o bien para vertical.

Así, por defecto los controles se comportarán de acuerdo al tipo: los editores de campo crecerán a lo ancho y no a lo alto de forma proporcional, mientras que las cajas de texto lo harán tanto a lo ancho como a lo alto. Pero podremos asignarles las opciones fijo o proporcional según queramos modificar el comportamiento por defecto del control.

Tanto el formulario como los layouts indican por medio de una flecha la dirección en la que distribuyen los elementos que están incluidos. Para alinear los elementos dentro de un layout debemos definir la propiedad alineamiento vertical y horizontal, que nos permite organizar los controles hacia la izquierda, hacia la derecha, centrado o justificado. Esta opción está disponible tanto para los controles de layout como para el formulario.

En el formulario de ejemplo el tipo de layout es vertical, para que distribuya en esa dirección los controles que contiene. El primer layout es de tipo grid, para que organice los controles en forma de rejilla.

El segundo layout es el que contiene la rejilla:

Contiene un tercer layout también de tipo grid para los totales:

El último de los layout agrupa los botones, alineándolos a la derecha con ayuda de la propiedad alineamiento horizontal.

Todos los controles tienen ancho y alto en layout por defecto.

Aplicando el layout o pulsando fin sobre el fondo del formulario nos permitirá ver el resultado.

Si cambiamos el tamaño del formulario o lo visualizamos en un idioma distinto, los controles se ajustarán a la nueva configuración.

Y en ejecución, teniendo en cuenta incluso las condiciones de visibilidad de los distintos controles y ganando el resto de los controles el espacio que ocupen los que no son visibles.

Última actualización