Compartir a través de

Tutorial: Diseñar controles con relleno, márgenes y la propiedad AutoSize

La colocación precisa de controles en el formulario es una prioridad alta para muchas aplicaciones. El Diseñador de Windows Forms en Visual Studio proporciona muchas herramientas de diseño para lograrlo. Tres de las propiedades más importantes son Margin, Padding y AutoSize, que están presentes en todos los controles de Windows Forms.

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

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

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

Relleno y margen para controles de formularios Windows Forms

La AutoSize propiedad indica a un control que ajuste su tamaño automáticamente según su contenido. No cambiará su tamaño para que sea menor que el valor de su propiedad original Size, y tendrá en cuenta el valor de su propiedad Padding.

Prerrequisitos

Necesitará Visual Studio para completar este tutorial.

Creación del proyecto

  1. En Visual Studio, cree un proyecto de aplicación de Windows denominado LayoutExample.

  2. Seleccione el formulario en el Diseñador de Windows Forms.

Establecer márgenes para controles

Puede establecer la distancia predeterminada entre los controles mediante la Margin propiedad . Cuando mueves un control cerca de otro, verás una línea de ajuste que muestra los márgenes de los dos controles. El control que está moviendo también se ajusta a la distancia definida por los márgenes.

Organizar controles en tu formulario utilizando la propiedad Margin

  1. Arrastre dos Button controles desde el Cuadro de herramientas hasta el formulario.

  2. Seleccione uno de los Button controles y muévalo cerca del otro, hasta que estén casi tocando.

    Observe la línea de ajuste que aparece entre ellos. Esta distancia es la suma de los valores de Margin de los dos controles. El control que estás moviendo se alinea a esta distancia. Para obtener más información, consulte Tutorial: Organizar controles en formularios Windows Forms mediante líneas de ajuste.

  3. Cambie la Margin propiedad de uno de los controles expandiendo la Margin entrada en la ventana Propiedades y estableciendo la All propiedad en 20.

  4. Seleccione uno de los Button controles y muévalo cerca del otro.

    La línea de ajuste que define la suma de los valores de margen es más larga y el control se ajusta a una distancia mayor respecto al otro control.

  5. Cambie la Margin propiedad del control seleccionado expandiendo la Margin entrada en la ventana Propiedades y estableciendo la Top propiedad en 5.

  6. Mueva el control seleccionado debajo del otro control y observe que la línea guía es más corta. Mueva el control seleccionado a la izquierda del otro control y observe que la línea de ajuste conserva el valor observado en el paso 4.

  7. Puede establecer cada uno de los aspectos de la Margin propiedad , Left, TopRight, , Bottomen valores diferentes, o bien puede establecerlos en el mismo valor con la All propiedad .

Establecer relleno para controles

Para lograr el diseño preciso necesario para tu aplicación, los controles a menudo contendrán controles secundarios. Cuando desee especificar la proximidad del borde de un control secundario al borde de un control primario, utilice las propiedades del control primario Padding y del control secundario Margin. La propiedad Padding también se usa para controlar la proximidad del contenido de un control (por ejemplo, la propiedad Button de un control Text) a sus bordes.

Organizar controles en el formulario utilizando espaciado

  1. Arrastre un Button control desde el Cuadro de herramientas hasta el formulario.

  2. Cambie el valor de la Button propiedad del AutoSize control a true.

  3. Cambie la Padding propiedad expandiendo la Padding entrada en la ventana Propiedades y estableciendo la All propiedad en 5.

    El control se expande para proporcionar espacio para el nuevo relleno.

  4. Arrastre un GroupBox control desde el Cuadro de herramientas hasta el formulario. Arrastre un Button control desde el Cuadro de herramientas al GroupBox control . Coloque el control Button de modo que esté al ras con la esquina inferior derecha del control GroupBox.

    Observa las líneas guía que aparecen cuando el control Button se aproxima a los bordes inferior y derecho del control GroupBox. Estas líneas de ajuste corresponden a la propiedad Margin de Button.

  5. Cambie la GroupBox propiedad del Padding control expandiendo la Padding entrada en la ventana Propiedades y estableciendo la All propiedad en 20.

  6. Seleccione el Button control que está dentro del GroupBox control y muévalo hacia el centro del GroupBox.

    Las líneas de acoplamiento aparecen a una distancia mayor desde los bordes del GroupBox control. Esta distancia es la suma de la Button propiedad del Margin control y la GroupBox propiedad del Padding control.

Los controles de tamaño se ajustan automáticamente

En algunas aplicaciones, el tamaño de un control no será el mismo en tiempo de ejecución que en tiempo de diseño. El texto de un Button control, por ejemplo, se puede tomar de una base de datos y su longitud no se conoce de antemano.

Cuando la propiedad AutoSize se establece en true, el control se ajustará a su contenido. Para obtener más información, vea Información general sobre la propiedad AutoSize.

Ordena los controles de tu formulario usando la propiedad AutoSize

  1. Arrastre un Button control desde el Cuadro de herramientas hasta el formulario.

  2. Cambie el valor de la Button propiedad del AutoSize control a true.

  3. Cambie la propiedad Button del control Text a Este botón tiene una cadena larga para su propiedad Text.

    Al confirmar el cambio, el Button control se cambia de tamaño para ajustarse al nuevo texto.

  4. Arrastre otro Button control desde el Cuadro de herramientas hasta el formulario.

  5. Cambie la propiedad Button del control Text a "Este botón tiene una cadena larga para su propiedad de Texto".

    Al confirmar el cambio, el Button control no cambia de tamaño y el texto se recorta por el borde derecho del control.

  6. Cambie la Padding propiedad expandiendo la Padding entrada en la ventana Propiedades y estableciendo la All propiedad en 5.

    El texto del interior del control se recorta por los cuatro lados.

  7. Cambie la Button propiedad del AutoSize control a true.

    El Button control cambia de tamaño para abarcar toda la cadena. Además, se ha agregado relleno alrededor del texto, lo que hace que el Button control se expanda en las cuatro direcciones.

  8. Arrastre un Button control desde el Cuadro de herramientas hasta el formulario. Colóela cerca de la esquina inferior derecha del formulario.

  9. Cambie el valor de la Button propiedad del AutoSize control a true.

  10. Establezca la Button propiedad del Anchor control en Right, Bottom.

  11. Cambie la propiedad Button del control Text a "Este botón tiene una cadena larga para su propiedad de Texto".

Al confirmar el cambio, el Button control se cambia de tamaño hacia la izquierda. En general, el ajuste de tamaño automático aumentará el tamaño de un control en la dirección opuesta a su Anchor configuración de propiedad.

Propiedades AutoSize y AutoSizeMode

Algunos controles admiten la AutoSizeMode propiedad , que proporciona un control más específico sobre el comportamiento de ajuste automático de tamaño de un control.

Utilice la propiedad AutoSizeMode

  1. Arrastre un Panel control desde el Cuadro de herramientas hasta el formulario.

  2. Establezca el valor de la Panel propiedad del AutoSize control en true.

  3. Arrastre un Button control desde el Cuadro de herramientas al Panel control .

  4. Coloque el control Button cerca de la esquina inferior derecha del control Panel.

  5. Seleccione el Panel control y tome el controlador de ajuste de tamaño inferior derecho. Cambie el tamaño del Panel control para que sea mayor y más pequeño.

    Nota:

    Puede cambiar el tamaño libremente del Panel control, pero no puede ajustarlo más pequeño que la posición de la Button esquina inferior derecha del control. Este comportamiento se especifica mediante el valor predeterminado de la AutoSizeMode propiedad , que es GrowOnly.

  6. Establezca el valor de la propiedad Panel del control AutoSizeMode a GrowAndShrink.

    El control Panel ajusta su tamaño para rodear al control Button. No se puede cambiar el tamaño del Panel control.

  7. Arrastre el Button control hacia la esquina superior izquierda del Panel control.

    El control Panel cambia de tamaño a la nueva posición del control Button.

Pasos siguientes

Hay muchas otras características de diseño para organizar controles en las aplicaciones de Windows Forms. Estas son algunas combinaciones que puede probar:

Consulte también