Layout
Última actualización
Última actualización
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:
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.
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.
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.
Esta propiedad nos permite documentar el uso del control.
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.
Muestra la anchura en píxels del control; es posible modificar su contenido o bien escribiendo directamente un número o bien usando los microscrollers: , que permiten aumentar/disminuir en una unidad el valor actual.
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:
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.
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.
Espacio de separación en píxeles entre los layouts y controles que se distribuyen en el layout.
Espacio de separación en píxeles entre el borde izquierdo del formulario y los layouts y controles que se distribuyen en el layout.
Espacio de separación en píxeles entre el borde derecho del formulario y los layouts y controles que se distribuyen en el layout.
Espacio de separación en píxeles entre el borde superior del formulario y los layouts y controles que se distribuyen en el layout.
Espacio de separación en píxeles entre el borde inferior del formulario y los layouts y controles que se distribuyen en el layout.
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:
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.
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.
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.
Esta propiedad nos permite documentar el uso del control.
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.
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.
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:
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.
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.
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.
Esta propiedad nos permite documentar el uso del control.
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.
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.
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.
Muestra la altura en píxels del control; es posible modificar su contenido o bien escribiendo directamente un número o bien usando los microscrollers: , que permiten aumentar/disminuir en una unidad el valor actual.
Muestra la posición del control, en píxeles, en el eje X (horizontal) dentro del formulario.Es posible modificar su contenido o bien escribiendo directamente un número o bien usando los microscrollers: , que permiten aumentar/disminuir en una unidad el valor actual.
Muestra la posición del control, en píxeles, en el eje Y (vertical) dentro del formulario.Es posible modificar su contenido o bien escribiendo directamente un número o bien usando los microscrollers: , que permiten aumentar/disminuir en una unidad el valor actual.
Muestra la anchura en píxels del control; es posible modificar su contenido o bien escribiendo directamente un número o bien usando los microscrollers: , que permiten aumentar/disminuir en una unidad el valor actual.
Muestra la altura en píxels del control; es posible modificar su contenido o bien escribiendo directamente un número o bien usando los microscrollers: , que permiten aumentar/disminuir en una unidad el valor actual.
Muestra la posición del control, en píxeles, en el eje X (horizontal) dentro del formulario.Es posible modificar su contenido o bien escribiendo directamente un número o bien usando los microscrollers: , que permiten aumentar/disminuir en una unidad el valor actual.
Muestra la posición del control, en píxeles, en el eje Y (vertical) dentro del formulario.Es posible modificar su contenido o bien escribiendo directamente un número o bien usando los microscrollers: , que permiten aumentar/disminuir en una unidad el valor actual.
Muestra la anchura en píxels del control; es posible modificar su contenido o bien escribiendo directamente un número o bien usando los microscrollers: , que permiten aumentar/disminuir en una unidad el valor actual.
Muestra la altura en píxels del control; es posible modificar su contenido o bien escribiendo directamente un número o bien usando los microscrollers: , que permiten aumentar/disminuir en una unidad el valor actual.
Muestra la posición del control, en píxeles, en el eje X (horizontal) dentro del formulario.Es posible modificar su contenido o bien escribiendo directamente un número o bien usando los microscrollers: , que permiten aumentar/disminuir en una unidad el valor actual.
Muestra la posición del control, en píxeles, en el eje Y (vertical) dentro del formulario.Es posible modificar su contenido o bien escribiendo directamente un número o bien usando los microscrollers: , que permiten aumentar/disminuir en una unidad el valor actual.
La opción de aplicar layout de la barra de herramientas nos permite ver cómo se organizará el formulario en ejecución. Pulsando en el fondo del formulario y usando la tecla Fin podremos ver también cómo se adaptarán los controles del formulario en ejecución tanto al tamaño como a las etiquetas, incluyendo multi-idioma, pudiendo modificar el tamaño del formulario para ver cómo se adaptan los controles al nuevo tamaño.
