Posición y diseño de los controles

El control determina la colocación del control en formularios Windows Forms, sino también el elemento primario del control. En este artículo se describen las distintas configuraciones proporcionadas por los controles y los distintos tipos de contenedores primarios que afectan al diseño.

Posición y tamaño fijos

La posición que aparece un control en un elemento primario viene determinado por el valor de la Location propiedad en relación con la parte superior izquierda de la superficie primaria. La coordenada de posición superior izquierda de un control del elemento primario es (x0,y0). El tamaño del control viene determinado por la Size propiedad y representa el ancho y el alto del control.

Cuando se agrega un control a un elemento primario que aplica la colocación automática, se cambia la posición y el tamaño del control. En este caso, es posible que la posición y el tamaño del control no se ajusten manualmente, en función del tipo de elemento primario.

Las MaximumSize propiedades y MinimumSize ayudan a establecer el espacio mínimo y máximo que puede usar un control.

Margen y relleno

Hay dos propiedades de control que ayudan con la colocación precisa de los controles: Margin y Padding.

La Margin propiedad define el espacio alrededor del control que mantiene otros controles a una distancia especificada desde los bordes del control.

La Padding propiedad define el espacio en el interior de un control que mantiene el contenido del control (por ejemplo, el valor de su Text propiedad) una distancia especificada desde los bordes del control.

En la ilustración siguiente se muestran las Margin propiedades y Padding en un control .

El Diseñador de Visual Studio respeta estas propiedades al colocar y cambiar el tamaño de los controles. Las líneas de ajuste aparecen como guías para ayudarle a permanecer fuera del margen especificado de un control. Por ejemplo, Visual Studio muestra la línea de ajuste al arrastrar un control junto a otro control:

Selección automática de ubicación y tamaño

Los controles se pueden colocar automáticamente dentro de su elemento primario. Algunos contenedores primarios fuerzan la colocación, mientras que otros respetan la configuración de control que guía la colocación. Hay dos propiedades en un control que ayudan con la colocación y el ajuste automático del tamaño dentro de un elemento padre: Dock y Anchor.

El orden en que se dibuja puede influir en la colocación automática. El orden en el que se dibuja un control está determinado por el índice del control en la colección del elemento primario Controls. Este índice se conoce como .Z-order Cada control se dibuja en el orden inverso en que aparecen en la colección. Es decir, la colección es una en la que el primer elemento en entrar es el último en ser utilizado, y el último elemento en entrar es el primero en ser utilizado.

Las MinimumSize propiedades y MaximumSize ayudan a establecer el espacio mínimo y máximo que puede usar un control.

Dársena

La Dock propiedad establece qué borde del control se alinea con el lado correspondiente del elemento primario y cómo se cambia el tamaño del control dentro del elemento primario.

Cuando se acopla un control, el contenedor determina el espacio que debe ocupar y redimensiona y posiciona el control. El ancho y el alto del control siguen siendo respetados en función del estilo de acoplamiento. Por ejemplo, si el control está acoplado a la parte superior, se respeta el Height del control, pero se ajusta automáticamente el Width. Si un control está acoplado a la izquierda, se respeta el Width del control, pero el Height se ajusta automáticamente.

El Location del control no se puede establecer manualmente, ya que el acoplamiento de un control establece automáticamente su posición.

El Z-order del control sí afecta al acoplamiento. A medida que se diseñan los controles acoplados, usan el espacio que tienen disponible. Por ejemplo, si un control se dibuja primero y se acopla a la parte superior del contenedor, ocupa todo el ancho del contenedor. Si el siguiente control se acopla a la izquierda, tiene menos espacio vertical disponible.

Si el control Z-order se invierte, el control que está acoplado a la izquierda ahora tiene más espacio inicial disponible. El control usa todo el alto del contenedor. El control que está acoplado a la parte superior tiene menos espacio horizontal disponible.

A medida que el contenedor crece y se reduce, los controles acoplados al contenedor se vuelven a colocar y cambian de tamaño para mantener sus posiciones y tamaños aplicables.

Si se acoplan varios controles al mismo lado del contenedor, se apilan de acuerdo con su Z-order.

Ancla

Anclar un control permite vincular el control a uno o varios lados del contenedor padre. A medida que cambia el tamaño del contenedor, los controles secundarios anclados mantienen su distancia al lado anclado.

Un control se puede anclar a uno o varios lados, sin restricción. El ancla se establece con Anchor la propiedad.

Ajuste de tamaño automático

La AutoSize propiedad permite a un control cambiar su tamaño, si es necesario, para ajustarse al tamaño especificado por la PreferredSize propiedad . Ajusta el comportamiento de tamaño de controles específicos estableciendo la propiedad AutoSizeMode.

Solo algunos controles admiten la AutoSize propiedad . Además, algunos controles que admiten la AutoSize propiedad también admiten la AutoSizeMode propiedad .

Comportamiento siempre verdadero	Descripción
El ajuste automático de tamaño es una característica durante la ejecución.	Esto significa que nunca crece o reduce un control y, a continuación, no tiene ningún efecto adicional.
Si un control cambia el tamaño, el valor de su Location propiedad siempre permanece constante.	Cuando el contenido de un control provoca que se expanda, el control crece hacia la derecha y hacia abajo. Los controles no se expanden hacia la izquierda.
Las Dock propiedades y Anchor se respetan cuando AutoSize es true.	El valor de la propiedad del Location control se ajusta al valor correcto. El Label control es la excepción a esta regla. Al establecer el valor de la propiedad Label de un control AutoSize acoplado en true, el control Label no se estirará.
Las propiedades MaximumSize y MinimumSize de un control siempre se respetan, independientemente del valor de su propiedad AutoSize.	Las propiedades MaximumSize y MinimumSize no se ven afectadas por la propiedad AutoSize.
De forma predeterminada, no hay ningún tamaño mínimo establecido.	Esto significa que si un control se establece para reducir en AutoSize y no tiene contenido, el valor de su Size propiedad es (0x,0y). En este caso, el control se reduce a un punto y no será visible fácilmente.
Si un control no implementa el GetPreferredSize método , el método devuelve el GetPreferredSize último valor asignado a la Size propiedad .	Esto significa que establecer AutoSize en true no tiene ningún efecto.
Un control de una TableLayoutPanel celda siempre se reduce para ajustarse a la celda hasta que se alcance.MinimumSize	Este tamaño se aplica como un tamaño máximo. Este no es el caso cuando la celda forma parte de una AutoSize fila o columna.

Propiedad AutoSizeMode

La AutoSizeMode propiedad proporciona un control más específico sobre el comportamiento predeterminado AutoSize . La AutoSizeMode propiedad especifica cómo un control ajusta su tamaño para ajustarse a su contenido. El contenido, por ejemplo, podría ser el texto de un Button control o los controles secundarios de un contenedor.

En la lista siguiente se muestran los AutoSizeMode valores y su comportamiento.

• AutoSizeMode.GrowAndShrink

  El control crece o se reduce para abarcar su contenido.

  Los valores de MinimumSize y MaximumSize son respetados, pero se omite el valor actual de la propiedad Size.

  Este es el mismo comportamiento que los controles con la AutoSize propiedad y ninguna AutoSizeMode propiedad.

• AutoSizeMode.GrowOnly

  El control crece tanto como sea necesario para abarcar su contenido, pero no se reducirá más pequeño que el valor especificado por su Size propiedad.

  Este es el valor predeterminado de AutoSizeMode.

Controles que admiten la propiedad AutoSize

En la tabla siguiente se describe el nivel de compatibilidad con el ajuste de tamaño automático por control:

Supervisión	AutoSize soportado	AutoSizeMode soportado
Button	✔️	✔️
CheckedListBox	✔️	✔️
FlowLayoutPanel	✔️	✔️
Form	✔️	✔️
GroupBox	✔️	✔️
Panel	✔️	✔️
TableLayoutPanel	✔️	✔️
CheckBox	✔️	❌
DomainUpDown	✔️	❌
Label	✔️	❌
LinkLabel	✔️	❌
MaskedTextBox	✔️	❌
NumericUpDown	✔️	❌
RadioButton	✔️	❌
TextBox	✔️	❌
TrackBar	✔️	❌
CheckedListBox	❌	❌
ComboBox	❌	❌
DataGridView	❌	❌
DateTimePicker	❌	❌
ListBox	❌	❌
ListView	❌	❌
MaskedTextBox	❌	❌
MonthCalendar	❌	❌
ProgressBar	❌	❌
PropertyGrid	❌	❌
RichTextBox	❌	❌
SplitContainer	❌	❌
TabControl	❌	❌
TabPage	❌	❌
TreeView	❌	❌
WebBrowser	❌	❌
ScrollBar	❌	❌

AutoSize en el entorno de diseño

En la tabla siguiente se describe el comportamiento de ajuste de tamaño de un control en tiempo de diseño, en función del valor de sus AutoSize propiedades y AutoSizeMode .

Sobrescriba la propiedad SelectionRules para determinar si un control dado está en un estado redimensionable por el usuario. En la tabla siguiente, "no se puede cambiar el tamaño" significa Moveable solo, "puede cambiar el tamaño" significa AllSizeable y Moveable.

configuración de AutoSize	configuración de AutoSizeMode	Comportamiento
true	Propiedad no disponible.	El usuario no puede cambiar el tamaño del control en tiempo de diseño, excepto los siguientes controles: - TextBox - MaskedTextBox - RichTextBox - TrackBar
true	GrowAndShrink	El usuario no puede cambiar el tamaño del control en tiempo de diseño.
true	GrowOnly	El usuario puede cambiar el tamaño del control en tiempo de diseño. Cuando se establece la Size propiedad , el usuario solo puede aumentar el tamaño del control.
false o AutoSize está oculto	No aplicable.	El usuario puede cambiar el tamaño del control en tiempo de diseño.

Nota:

Para maximizar la productividad, el Diseñador de Windows Forms en Visual Studio sombrea la AutoSize propiedad de la Form clase . En tiempo de diseño, el formulario se comporta como si la propiedad AutoSize estuviera configurada en false, independientemente de su configuración real. En tiempo de ejecución, no se realiza ningún ajuste especial y la AutoSize propiedad se aplica tal como lo especifica la configuración de la propiedad.

Contenedor: Formulario

Form es el objeto principal de Windows Forms. Normalmente, una aplicación de Windows Forms tiene un formulario mostrado en todo momento. Los formularios contienen controles y respetan las propiedades Location y Size del control para la colocación manual. Los formularios también responden a la propiedad Dock para la colocación automática.

La mayoría de las veces un formulario tiene agarres en los bordes que permiten al usuario cambiar el tamaño del formulario. La Anchor propiedad de un control permite que el control crezca y se reduzca a medida que se cambia el tamaño del formulario.

Contenedor: Panel

El Panel control es similar a un formulario en el que simplemente agrupa los controles. Admite los mismos estilos de colocación manual y automática que un formulario. Para obtener más información, consulte la sección Contenedor: formulario .

Un panel se combina perfectamente con el elemento principal y bloquea cualquier área de un control que caiga fuera de los límites del panel. Si un control está fuera de los límites del panel y AutoScroll se establece en true, aparecen barras de desplazamiento y el usuario puede desplazar el panel.

A diferencia del control de cuadro de grupo , un panel no tiene un título ni un borde.

La imagen anterior tiene un panel con la BorderStyle propiedad establecida para mostrar los límites del panel.

Contenedor: cuadro de grupo

El GroupBox control proporciona una agrupación identificable para otros controles. Normalmente, se usa un cuadro de grupo para subdividir un formulario por función. Por ejemplo, puede tener un formulario que represente información personal y los campos relacionados con una dirección se agruparán. En tiempo de diseño, es fácil mover el cuadro de grupo junto con los controles que contiene.

El cuadro de grupo admite los mismos estilos de colocación manual y automática como lo hace un formulario. Para obtener más información, consulte la sección Contenedor: formulario . Un cuadro de grupo también corta cualquier parte de un control que quede fuera de los límites del panel.

A diferencia del control del panel , un cuadro de grupo no tiene la capacidad de desplazar el contenido y mostrar las barras de desplazamiento.

Contenedor: Diseño de flujo

El FlowLayoutPanel control organiza su contenido en una dirección de flujo horizontal o vertical. Puede ajustar el contenido del control de una fila a la siguiente o de una columna a la siguiente. Como alternativa, puede recortar en lugar de encapsular su contenido.

Puede especificar la dirección del flujo estableciendo el valor de la FlowDirection propiedad . El FlowLayoutPanel control invierte correctamente su dirección de flujo en diseños de derecha a izquierda (RTL). También puede especificar si el contenido del FlowLayoutPanel control se ajusta o se recorta estableciendo el valor de la propiedad WrapContents.

El FlowLayoutPanel control cambia automáticamente su tamaño según el contenido cuando establece la propiedad AutoSize a true. También proporciona una FlowBreak propiedad a sus controles secundarios. Si se establece el valor de la FlowBreak propiedad en true, el control FlowLayoutPanel deja de colocar controles en la dirección del flujo actual y procede a la siguiente fila o columna.

La imagen anterior tiene dos FlowLayoutPanel controles con la BorderStyle propiedad establecida para mostrar los límites del control.

Contenedor: Diseño de tabla

El TableLayoutPanel control organiza su contenido en una cuadrícula. Dado que el diseño se realiza en tiempo de diseño y tiempo de ejecución, puede cambiar dinámicamente a medida que cambia el entorno de la aplicación. Esto proporciona a los controles del panel la capacidad de cambiar el tamaño proporcionalmente, por lo que pueden responder a cambios como el cambio de tamaño del control primario o el cambio de longitud de texto debido a la localización.

Cualquier control de Windows Forms puede ser un elemento secundario del TableLayoutPanel control, incluidas otras instancias de TableLayoutPanel. Esto le permite construir diseños sofisticados que se adapten a los cambios en tiempo de ejecución.

También puede controlar la dirección de expansión (horizontal o vertical) después de que el control TableLayoutPanel esté lleno de controles secundarios. De forma predeterminada, el TableLayoutPanel control se expande hacia abajo agregando filas.

Puede controlar el tamaño y el estilo de las filas y columnas mediante las RowStyles propiedades y ColumnStyles . Puede establecer las propiedades de filas o columnas individualmente.

El TableLayoutPanel control agrega las siguientes propiedades a sus controles secundarios: Cell, Column, Row, ColumnSpany RowSpan.

La imagen anterior tiene una tabla con la CellBorderStyle propiedad establecida para mostrar los límites de cada celda.

Contenedor: contenedor dividido

El control de Windows Forms SplitContainer se puede considerar como un control compuesto; se trata de dos paneles separados por una barra extraíble. Cuando el puntero del mouse está sobre la barra, el puntero cambia la forma para mostrar que la barra es extraíble.

Con el SplitContainer control , puede crear interfaces de usuario complejas; a menudo, una selección en un panel determina qué objetos se muestran en el otro panel. Esta disposición es eficaz para mostrar y explorar información. Tener dos paneles le permite agregar información en áreas, y la barra, o "divisor", facilita a los usuarios cambiar el tamaño de los paneles.

La imagen anterior tiene un contenedor dividido para crear un panel izquierdo y derecho. El panel derecho contiene un segundo contenedor dividido con el Orientation establecido a Vertical. La BorderStyle propiedad se establece para mostrar los límites de cada panel.

Contenedor: control de pestañas

Muestra TabControl pestañas múltiples, como divisores en un cuaderno o etiquetas en un conjunto de carpetas dentro de un archivador. Las pestañas pueden contener imágenes y otros controles. Use el control de pestaña para generar el tipo de cuadro de diálogo de varias páginas que aparece en muchos lugares del sistema operativo Windows, como el Panel de control y las propiedades de visualización. Además, TabControl se puede usar para crear páginas de propiedades, que se usan para establecer un grupo de propiedades relacionadas.

La propiedad más importante de TabControl es TabPages, que contiene las pestañas individuales. Cada pestaña individual es un TabPage objeto .