Tutorial: Crear un formulario Windows Forms de entrada de datos de tamaño variable

Artículo
08/10/2011

Un formulario que cambia su tamaño correctamente puede mejorar las posibilidades de uso de su interfaz de usuario.

Este tutorial muestra cómo crear un diseño que se ajusta proporcionalmente cuando el usuario cambia el tamaño del formulario. Implementará un formulario de entrada de datos para obtener información de contacto mediante el control TableLayoutPanel.

Las tareas ilustradas en este tutorial incluyen:

Crear el proyecto
Crear el panel de diseño
Configurar la cuadrícula de diseño
Crear los campos de nombre
Crear los campos de dirección
Crear los campos de número de teléfono
Crear el campo de notas

Cuando termine, el formulario tendrá el siguiente aspecto:

Formulario de entrada de datos básicos con TableLayoutPanel

Para copiar el código de este tema como un listado sencillo, vea Cómo: Crear un formulario Windows Forms de entrada de datos de tamaño variable.

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 de aplicación. Utilice este proyecto para generar la aplicación que muestra el formulario de entrada de datos.

Para crear el proyecto

Cree un proyecto de aplicación para Windows llamado DemoDataEntryLayout. Para obtener más información, vea Cómo: Crear un nuevo proyecto de aplicación de Windows Forms.

Crear el panel de diseño

El paso siguiente es crear el panel de diseño que contiene el diseño de tamaño variable.

Para crear el panel de diseño

Seleccione el formulario en el Diseñador de formularios.
Arrastre un control TableLayoutPanel desde el Cuadro de herramientas al formulario.
En la ventana Propiedades, cambie el valor de la propiedad Dock del control TableLayoutPanel a Fill.
Cambie el valor de la propiedad ColumnCount a 4 y cambie el valor de la propiedad RowCount a 6.

Configurar la cuadrícula de diseño

El paso siguiente es especificar la cuadrícula del diseño. Establezca las propiedades en las colecciones ColumnStyles y RowStyles para determinar cómo las columnas y filas cambiarán el tamaño cuando cambien las dimensiones del formulario.

Para configurar la cuadrícula del diseño

Haga clic en el glifo () de la etiqueta inteligente del control TableLayoutPanel y seleccione Editar filas y columnas para abrir el cuadro de diálogo Estilos de columna y fila. Para obtener más información, vea Cómo: Editar columnas y filas en un control TableLayoutPanel.
Seleccione Columnas en el cuadro desplegable Mostrar.
Seleccione la primera columna y cambie el valor de su propiedad SizeType a Percent. Establezca el valor del control NumericUpDown de Percent en 25. Esta columna contendrá los controles Label.
Seleccione la segunda columna. Cambie el valor de su propiedad SizeType a Percent. Establezca el valor del controlNumericUpDown de Percent en 50. Esta columna contendrá los controles TextBox para los campos de entrada de datos.
Seleccione la tercera columna. Cambie el valor de su propiedad SizeType a Percent. Establezca el valor del control NumericUpDown de Percent en 25. Esta columna contendrá los controles Label.
Seleccione la cuarta columna. Cambie el valor de su propiedad SizeType a Percent. Establezca el valor del controlNumericUpDown de Percent en 50. Esta columna contendrá los controles TextBox para los campos de entrada de datos.
Seleccione Filas en el cuadro desplegable Mostrar.
En las cinco primeras filas, establezca el valor de la propiedad SizeType en Absolute y establezca el valor del control NumericUpDown de Absolute en 28. En la sexta fila, establezca el valor de la propiedad SizeType en Percent y establezca el valor del control NumericUpDown de Percent en 80.
Haga clic en Aceptar para aceptar los cambios.

Rellenar el diseño con controles

Ahora ya puede rellenar el diseño con controles. Este formulario de entrada de datos sirve para obtener información de contacto, por lo que tiene campos para el nombre, apellido, dirección, número de teléfono y notas. La lista siguiente muestra el orden en el que crean estos controles:

Campos de nombre
Campos de dirección
Campos de número de teléfono
Campo de notas

Crear los campos de nombre

Los campos de entrada de nombre se colocan en la primera fila del control TableLayoutPanel. Están formados por un control Label y un control TextBox para el nombre, y un control Label y un control TextBox para el apellido.

Para crear los campos de nombre

Arrastre un control Label desde el Cuadro de herramientas a la primera celda del control TableLayoutPanel.
En la ventana Propiedades, establezca el valor de la propiedad Anchor del control Label en Right.
Establezca el valor de la propiedad AutoSize en true.
Establezca el valor de la propiedad Text en Nombre.
Arrastre un control TextBox desde el Cuadro de herramientas a la segunda celda de la primera fila, al lado del control Label.
Establezca el valor de la propiedad Anchor del control TextBox en Left, Right.
Arrastre un control Label desde el Cuadro de herramientas a la tercera celda de la primera fila. Establezca el valor de la propiedad Anchor del control Label en Right. Establezca el valor de la propiedad AutoSize en true. Establezca el valor de la propiedad Text en Apellidos.
Arrastre un control TextBox desde el Cuadro de herramientas a la cuarta celda de la primera fila. Establezca el valor de la propiedad Anchor del control TextBox en Left, Right.

Crear los campos de dirección

Los campos de dirección ocupan la segunda, tercera y cuarta filas. Como las direcciones pueden ser largas, los campos Address1 y Address2 abarcan tres columnas.

Para crear los campos de dirección

Arrastre un control Label desde el Cuadro de herramientas a la primera celda de la segunda fila.
En la ventana Propiedades, establezca el valor de la propiedad Anchor del control Label en Right. Establezca el valor de la propiedad AutoSize en true. Establezca el valor de la propiedad Text en Dirección1.
Arrastre un control TextBox desde el Cuadro de herramientas a la segunda celda de la segunda fila, al lado del control Label.
Establezca el valor de la propiedad Anchor del control TextBox en Left, Right.
Establezca el valor de la propiedad ColumnSpan en 3. El control TableLayoutPanel proporciona esta propiedad. Para obtener más información sobre estas propiedades, vea Información general sobre proveedores extensores.
Repita los pasos 1 a 5 para la tercera fila. Establezca el valor de la propiedad Text del control Label en Dirección2.
Arrastre un control Label desde el Cuadro de herramientas a la primera celda de la cuarta fila.
Establezca el valor de la propiedad Anchor del control Label en Right. Establezca el valor de la propiedad AutoSize en true. Establezca el valor de la propiedad Text Ciudad.
Arrastre un control TextBox desde el Cuadro de herramientas a la segunda celda de la cuarta fila, al lado del control Label.
Establezca el valor de la propiedad Anchor del control TextBox en Left, Right.
Arrastre un control Label desde el Cuadro de herramientas a la tercera celda de la cuarta fila.
Establezca el valor de la propiedad Anchor del control Label en Right. Establezca el valor de la propiedad AutoSize en true. Establezca el valor de la propiedad Text en Provincia.
Arrastre un control ComboBox desde el Cuadro de herramientas a la cuarta celda de la cuarta fila.
Establezca el valor de la propiedad Anchor del control ComboBox en Left. Establezca el valor de la propiedad FormattingEnabled en true.

Crear los campos de número de teléfono

Los campos de número de teléfono ocupan la quinta fila. Para asegurarse de que el usuario escribe sólo números de teléfono válidos, impleméntelos con el control MaskedTextBox.

Para crear los campos de número de teléfono

Arrastre un control Label desde el Cuadro de herramientas a la primera celda de la quinta fila.
En la ventana Propiedades, establezca el valor de la propiedad Anchor del control Label en Right. Establezca el valor de la propiedad AutoSize en true. Establezca el valor de la propiedad Text en Teléfono (T).
Arrastre un control MaskedTextBox desde el Cuadro de herramientas a la segunda celda de la quinta fila.
Establezca el valor de la propiedad Anchor del control MaskedTextBox en Left.
Haga clic en la etiqueta inteligente () en el control MaskedTextBox para abrir el editor Mask.
Seleccione la máscara de Número de teléfono en el cuadro de diálogo Máscara de entrada. Haga clic en Aceptar.
Repita los pasos 1 a 5 para el campo de número de teléfono doméstico. Establezca el valor de la propiedad Text en Teléfono (D).

Crear el campo de notas

El último campo ocupa la sexta fila. Sirve para escribir notas y permite la entrada de texto libre.

Para crear el campo de notas

Arrastre un control Label desde el Cuadro de herramientas a la primera celda de la sexta fila.
En la ventana Propiedades, establezca el valor de la propiedad Anchor del control Label en Top, Right. Establezca el valor de la propiedad AutoSize en true. Establezca el valor de la propiedad Text en Notas.
Arrastre un control RichTextBox desde el Cuadro de herramientas a la segunda celda de la sexta fila.
Establezca el valor de la propiedad ColumnSpan en 3.
Establezca el valor de la propiedad Dock del control RichTextBox en Fill.

Finalizar la configuración de la cuadrícula de diseño

El último paso es finalizar la configuración de la cuadrícula de diseño. Las columnas primera y tercera deben establecerse en AutoSize. Dado que ha colocado controles en estas columnas, las columnas están visibles en tiempo de diseño.

Para configurar la cuadrícula de diseño

Seleccione el control TableLayoutPanel y haga clic en el glifo de la etiqueta inteligente (). Seleccione Editar filas y columnas para abrir el cuadro de diálogo Estilos de columna y fila. Para obtener más información, vea Cómo: Editar columnas y filas en un control TableLayoutPanel.
Seleccione Columnas en el cuadro desplegable Mostrar.
Seleccione las columnas primera y tercera y cambie el valor de la propiedad SizeType a AutoSize.
Haga clic en Aceptar para aceptar los cambios.

Punto de control

Llegado a este punto, puede ejecutar la aplicación para comprobar el diseño dinámico del formulario.

Para comprobar el diseño de su formulario

Compile y ejecute el proyecto. Cuando el formulario aparece, aumente o reduzca el tamaño.

Nota

Los controles cambian el tamaño proporcionalmente para rellenar el espacio disponible.

Pasos siguientes

Ahora que puede crear formularios que implementan un diseño dinámico, considere la preparación del formulario para la localización. Para obtener más información, vea Tutorial: Crear un diseño que ajuste las proporciones para la localización.