Tutorial: Diseñar controles de formularios Windows Forms con relleno, márgenes y la propiedad AutoSize
La posición precisa de los controles en el formulario es de alta prioridad para muchas aplicaciones. El Diseñador de Windows Forms ofrece muchas herramientas de diseño para llevarlo a cabo. Tres de las herramientas más importante son las propiedades Margin, Padding y AutoSize, presentes en todos los controles de formularios Windows Forms.
La propiedad Margin define el espacio alrededor del control que mantiene a los demás controles a una distancia especificada de los bordes de control.
La propiedad Padding define el espacio en el 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 propiedades Padding y Margin en un control.
.gif "Relleno y margen de controles de formularios Windows Forms")
La propiedad AutoSize indica a un control que ajuste automáticamente su tamaño al contenido. No cambia su tamaño a uno menor que el valor de la propiedad Size original, y tendrá en cuenta el valor de su propiedad Padding.
Las tareas ilustradas en este tutorial incluyen:
Crear un proyecto de formularios Windows Forms
Establecer los márgenes para los controles
Establecer el relleno de los controles
Ajustar automáticamente el tamaño de los controles
Al finalizar, podrá entender la función que desempeñan estas importantes características de diseño.
Nota
Los cuadros de diálogo y comandos de menú que se ven pueden diferir de los descritos en la Ayuda, en función de los valores de configuración o de edición activos. Para cambiar la configuración, elija la opción Importar y exportar configuraciones del menú Herramientas. Para obtener más información, vea Trabajar con valores de configuración.
Requisitos previos
Para poder completar este tutorial, necesitará:
- Permisos suficientes para poder crear y ejecutar proyectos de aplicación de Windows Forms en el equipo donde esté instalado Visual Studio.
Crear el proyecto
El primer paso es crear el proyecto y configurar el formulario.
Para crear el proyecto
Cree un proyecto Aplicación para Windows llamado LayoutExample. Para obtener más información, vea Cómo: Crear un nuevo proyecto de aplicación de Windows Forms.
Seleccione el formulario en el Diseñador de Windows Forms.
Establecer los márgenes para los controles
Puede establecer la distancia predeterminada entre los controles mediante la propiedad Margin. Cuando acerca bastante un control a otro, verá 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.
Para organizar los controles en el formulario mediante la propiedad Margin
Arrastre dos controles Button desde el Cuadro de herramientas al formulario.
Seleccione uno de los controles Button y muévalo cerca del otro, hasta que casi se toquen.
Observe la línea de ajuste que aparece entre ellos. Esta distancia es la suma de los valores de la propiedad Margin de los dos controles. El control que está moviendo se ajusta a esta distancia. Para obtener información detallada, vea Tutorial: Organizar controles en formularios Windows Forms mediante líneas de ajuste.
Cambie la propiedad Margin de uno de los controles expandiendo la entrada Margin de la ventana Propiedades y estableciendo la propiedad All en 20.
Seleccione uno de los controles Button y acérquelo al 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 del otro control.
Cambie la propiedad Margin del control seleccionado expandiendo la entrada Margin de la ventana Propiedades y estableciendo la propiedad Top en 5.
Mueva el control seleccionado debajo del otro control y observe que la línea de ajuste 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 definido en el paso 4.
Puede establecer cada uno de los aspectos de las propiedades Margin, Left, Top, Right, Bottom en distintos valores, o puede establecer todos al mismo valor con la propiedad All.
Establecer el relleno de los controles
Para conseguir el diseño preciso para su aplicación, los controles suelen contener controles secundarios. Cuando desea especificar la proximidad del borde del control secundario, utilice la propiedad Padding del control principal junto con la propiedad Margin del control secundario. La propiedad Padding también se utiliza para controlar la proximidad de un contenido de control (por ejemplo, una propiedad Text del control Button) a los bordes.
Para organizar los controles en su formulario utilizando el relleno
Arrastre un control Button desde el Cuadro de herramientas al formulario.
Cambie el valor de la propiedad AutoSize del control Button a true.
Cambie la propiedad Padding expandiendo la entrada Padding en la ventana Propiedades y estableciendo la propiedad All en 5.
El control se amplía para dejar espacio al nuevo relleno.
Arrastre un control GroupBox desde el Cuadro de herramientas al formulario. Arrastre un control Button desde el Cuadro de herramientas al control GroupBox. Coloque el control Button para alinearlo con la esquina inferior derecha del control GroupBox.
Observe las líneas de ajuste que aparecen cuando el control Button se acerca los bordes inferior y derecho del control GroupBox. Estas líneas de ajuste corresponden a la propiedad Margin de Button.
Cambie la propiedad Padding del control GroupBox expandiendo la entrada Padding en la ventana Propiedades y estableciendo la propiedad All en 20.
Seleccione el control Button dentro del control GroupBox y acérquelo al centro de GroupBox.
Las líneas de ajuste se muestran a una distancia mayor de los bordes del control GroupBox. Esta distancia es la suma de la propiedad Margin del control Button y la propiedad Padding del control GroupBox.
Ajustar automáticamente el tamaño de los controles
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 control Button, por ejemplo, se puede tomar desde una base de datos, por lo que no se conoce de antemano su extensión.
Cuando la propiedad AutoSize se establece en true, el control ajusta el tamaño al contenido. Para obtener más información, vea Información general sobre la propiedad AutoSize.
Para organizar los controles en el formulario mediante la propiedad AutoSize
Arrastre un control Button desde el Cuadro de herramientas al formulario.
Cambie el valor de la propiedad AutoSize del control Button a true.
Cambie la propiedad Text del control Button a "Este botón tiene una cadena larga para su propiedad Text".
Cuando confirma el cambio, el control Button cambia su tamaño para ajustar el nuevo texto.
Arrastre otro control Button desde el Cuadro de herramientas al formulario.
Cambie la propiedad Text del control Button a "Este botón tiene una cadena larga para su propiedad Text".
Cuando confirma el cambio, el control Button no cambia su tamaño y el borde derecho del control recorta el texto.
Cambie la propiedad Padding expandiendo la entrada Padding en la ventana Propiedades y estableciendo la propiedad All en 5.
El texto del interior del control se recorta en los cuatro lados.
Establezca la propiedad Button del control AutoSize en true.
El control Button cambia su tamaño para ajustar toda la cadena. Además, se ha agregado relleno alrededor del texto, por lo que el control Button se ha expandido en las cuatro direcciones.
Arrastre un control Button desde el Cuadro de herramientas al formulario. Colóquelo cerca de la esquina inferior derecha del formulario.
Cambie el valor de la propiedad AutoSize del control Button a true.
Establezca la propiedad Anchor del control Button en Right, Bottom.
Cambie la propiedad Text del control Button a "Este botón tiene una cadena larga para su propiedad Text".
Cuando confirme el cambio, el control Button cambia su tamaño hacia la izquierda. En general, el ajuste automático de tamaño aumentará el tamaño de un control en la dirección opuesta a la configuración de la propiedad Anchor.
Propiedades AutoSice y AutoSizeMode
Algunos controles admiten la propiedad AutoSizeMode, que permite un mayor control sobre el comportamiento del ajuste automático del tamaño de un control.
Para utilizar la propiedad AutoSizeMode
Arrastre un control Panel desde el Cuadro de herramientas al formulario.
Establezca el valor de la propiedad AutoSize del control Panel en true.
Arrastre un control Button desde el Cuadro de herramientas al control Panel.
Coloque el control Button cerca de la esquina inferior derecha del control Panel.
Seleccione el control Panel y mantenga sujeto el cuadro de tamaño inferior derecho. Cambie el tamaño del control Panel para que sea más largo y más pequeño.
Establezca el valor de la propiedad AutoSizeMode del control Panel en GrowAndShrink.
El control Panel ajusta su tamaño para rodear el control Button. No puede cambiar el tamaño del control Panel.
Arrastre el control Button hacia la esquina superior izquierda del control Panel.
El control Panel cambia su tamaño a la nueva posición del control Button.
Pasos siguientes
Los formularios Windows Forms disponen de muchas otras características de diseño para organizar los controles. Éstas algunas combinaciones que podría probar:
Genere un formulario mediante un control TableLayoutPanel. Para obtener información detallada, vea Tutorial: Organizar controles en formularios Windows Forms mediante TableLayoutPanel. Pruebe a cambiar los valores de la propiedad Padding del control TableLayoutPanel, así como la propiedad Margin en sus controles secundarios.
Intente lo mismo mediante un control FlowLayoutPanel. Para obtener información detallada, vea Tutorial: Organizar controles en formularios Windows Forms mediante FlowLayoutPanel.
Experimente con el acoplamiento de los controles secundarios en un control Panel. La propiedad Padding es una realización más general de la propiedad DockPadding, y puede comprobarlo colocando un control secundario en un control Panel y estableciendo la propiedad Dock del control secundario en Fill. Establezca la propiedad Padding del control Panel en distintos valores y observe el efecto.
Vea también
Tareas
Tutorial: Organizar controles en formularios Windows Forms mediante TableLayoutPanel
Tutorial: Organizar controles en formularios Windows Forms mediante FlowLayoutPanel
Tutorial: Organizar controles en formularios Windows Forms mediante líneas de ajuste