Tutorial: Introducción al Diseñador de Windows Forms

El Diseñador de Windows Forms proporciona muchas herramientas para compilar las aplicaciones de Windows Forms. Este tutorial muestra cómo compilar una aplicación mediante las distintas herramientas proporcionadas por el diseñador. Las tareas ilustradas en este tutorial incluyen:

• Crear un proyecto de formularios Windows Forms.

• Organizar controles utilizando las líneas de ajuste.

• Realizar tareas de diseñador utilizando las etiquetas inteligentes.

• Establecer los márgenes y el relleno para los controles.

• Organizar controles utilizando un control TableLayoutPanel.

• Dividir el diseño del control utilizando un control SplitContainer.

• Navegar por el diseño con la ventana Esquema del documento.

• Dividir los controles con la presentación del tamaño e información de ubicación.

• Establecer los valores de propiedad mediante la ventana Propiedades.

Cuando haya terminado, tendrá un control personalizado que se ha ensamblado mediante varias de las características de diseño disponibles en el Diseñador de Windows Forms. Este control implementa la interfaz de usuario para una calculadora simple. La captura de pantalla siguiente muestra el diseño general del control Calculator.

Interfaz de usuario de Calculator

Requisitos previos

Para poder completar este tutorial, necesitará:

• Permisos necesarios para poder crear y ejecutar proyectos de aplicación de Windows Forms en el equipo donde esté instalado Visual Studio.

Crear el proyecto del control personalizado

El primer paso es crear el proyecto del control DemoCalculator.

Para crear el control del control personalizado

1. En el menú Archivo, elija Nuevo y, a continuación, haga clic en Proyecto para abrir el cuadro de diálogo Nuevo proyecto.

2. En la lista de proyectos de Visual Basic o Visual C# en la categoría Windows, seleccione la plantilla de proyecto Biblioteca de controles de Windows Forms.

3. En el cuadro Nombre, escriba DemoCalculatorLib y, a continuación, haga clic en Aceptar.

4. En el Explorador de soluciones, haga clic con el botón secundario en UserControl1.vb o en UserControl1.cs y, a continuación, haga clic en Cambiar nombre.

5. Cambie el nombre de archivo a DemoCalculator.vb o DemoCalculator.cs. Haga clic en el botón Sí cuando se le pregunte si desea cambiar el nombre de todas las referencias al elemento de código "UserControl1".

   El Diseñador de Windows Forms muestra actualmente la superficie del diseñador para el control DemoCalculator. En esta vista, puede diseñar gráficamente la apariencia del control mediante la selección de los controles y componentes del Cuadro de herramientas y ubicándolos en la superficie de diseño. Para obtener más información sobre controles personalizados, vea Variedades de controles personalizados.

Diseñar el diseño del control

El control DemoCalculator contiene varios controles de formularios Windows Forms. En este procedimiento, organizará los controles utilizando algunas de las características de desarrollo de aplicaciones rápidas (RAD) del Diseñador de Windows Forms.

Para diseñar el diseño del control

1. En el Diseñador de Windows Forms, cambie el control DemoCalculator a un tamaño mayor haciendo clic en el cuadro de tamaño situado en la esquina inferior derecha y arrastrándolo hacia abajo y hacia la derecha. En la esquina inferior derecha de Visual Studio, busque la información de tamaño y de la ubicación de los controles. Establezca el tamaño del control a un ancho de 500 y un alto de 400 observando la información de tamaño cuando cambie el tamaño del control.

2. En el Cuadro de herramientas, haga clic en el nodo Contenedores para abrirlo. Seleccione el control SplitContainer y arrástrelo a la superficie del diseñador.

   SplitContainer se coloca la superficie del diseñador del control DemoCalculator.

   Nota

   El mismo control SplitContainer ajusta su tamaño para adaptarse al tamaño del control DemoCalculator.Examine la ventana Propiedades para ver los valores de las propiedades para el control SplitContainer.Busque la propiedad Dock.Su valor es Fill, que quiere decir que el control SplitContainer siempre cambiará su tamaño a los límites del control DemoCalculator.Cambie el tamaño del control DemoCalculator para comprobar este comportamiento.

3. En la ventana Propiedades, cambie el valor de la propiedad Dock a None.

   El control SplitContainer reduce su tamaño al predeterminado. Su tamaño ya no sigue el tamaño del control DemoCalculator.

4. Haga clic en el glifo de la etiqueta inteligente () situado en la esquina superior derecha del control SplitContainer. Haga clic en Acoplar en contenedor principal para establecer la propiedad Dock en Fill.

   El control SplitContainer se acopla a los límites del control DemoCalculator.

   Nota

   Varios controles ofrecen etiquetas inteligentes para facilitar el diseño.Para obtener más información, vea Tutorial: Realizar tareas comunes utilizando etiquetas inteligentes en controles de formularios Windows Forms.

5. Haga clic en el borde vertical situado entre los paneles y arrástrelo a la derecha, para que la mayor parte del espacio lo ocupe el panel izquierdo.

   SplitContainer divide el control DemoCalculator en dos paneles, con un borde movible que los separa. El panel de la izquierda conservará los botones y la presentación de la calculadora, y el panel de la derecha mostrará un registro de las operaciones aritméticas realizadas por el usuario.

6. En la ventana Propiedades, cambie el valor de la propiedad BorderStyle a Fixed3D.

7. En el Cuadro de herramientas, haga clic en el nodo Controles comunes para abrirlo. Seleccione el control ListView y arrástrelo al panel derecho del control SplitContainer.

8. Haga clic en el glifo de la etiqueta inteligente del control ListView. En el panel de etiquetas inteligentes, cambie el valor de la propiedad View a Details.

9. En el panel de etiquetas inteligentes, haga clic en Editar columnas.

   Se abre el cuadro de diálogo Editor de la colección ColumnHeader.

10. En el cuadro de diálogo Editor de la colección ColumnHeader, haga clic en el botón Agregar para agregar una columna al control ListView. Cambie el valor de la propiedad Text a Historial. Haga clic en Aceptar para crear la columna.

11. En el panel de etiquetas inteligentes, haga clic en Acoplar en contenedor principal y, a continuación, haga clic en el glifo de la etiqueta inteligente para cerrar el panel de etiquetas inteligentes.

12. Desde el nodo Contenedores del Cuadro de herramientas, arrastre un control TableLayoutPanel al panel izquierdo del control SplitContainer.

    El control TableLayoutPanel aparece en la superficie del diseñador con su panel de etiquetas inteligentes abierto. El control TableLayoutPanel organiza sus controles secundarios en una cuadrícula. Para obtener más información, vea Tutorial: Organizar controles en formularios Windows Forms mediante TableLayoutPanel. El control TableLayoutPanel conservará la presentación y los botones del control DemoCalculator.

13. Haga clic en Editar filas y columnas en el panel de etiquetas inteligentes.

    Se abre el cuadro de diálogo Estilos de columna y fila.

14. Haga clic en el botón Agregar hasta que se muestren cinco columnas. Seleccione las cinco columnas y, a continuación, haga clic en el botón de opción Porcentaje en el cuadro Tamaño. Establezca el valor Porcentaje en 20. Se establece el mismo ancho para cada columna.

15. En la lista desplegable Mostrar, haga clic en Filas.

16. Haga clic en el botón Agregar hasta que se muestren cinco filas. Seleccione las cinco filas y, a continuación, haga clic en el botón de opción Porcentaje del cuadro Tamaño. Establezca el valor Porcentaje en 20. Se establece el mismo alto en cada fila.

17. Haga clic en Aceptar para aceptar los cambios y, a continuación, haga clic en el glifo de la etiqueta inteligente para cerrar el panel de etiquetas inteligentes.

18. En la ventana Propiedades, cambie el valor de la propiedad Dock a Fill.

Rellenar el control

Ahora está configurado el diseño del control, puede rellenar el control DemoCalculator con botones y una presentación.

Para rellenar el control

1. En el Cuadro de herramientas, haga doble clic en el icono TextBox.

   Se coloca un control TextBox en la primera celda del control TableLayoutPanel.

2. En la ventana Propiedades, cambie el valor de la propiedad ColumnSpan de control TextBox a 5.

   El control TextBox se mueve a una posición que está centrada en su fila.

3. Cambie el valor de la propiedad Anchor del control TextBox a Left, Right.

   El control TextBox se expande horizontalmente para abarcar las cinco columnas.

4. Cambie el valor de la propiedad TextAlign del control TextBox a Right.

5. En la ventana Propiedades, expanda el nodo de la propiedad Font. Establezca la propiedad Size en 14 y establezca Bold en true para el control TextBox.

6. Seleccione el control TableLayoutPanel.

7. En el Cuadro de herramientas, haga doble clic en el icono Button.

   Se coloca un control Button en la siguiente celda abierta del control TableLayoutPanel.

8. En el Cuadro de herramientas, haga doble clic en el icono Button cuatro veces más para rellenar la segunda fila del control TableLayoutPanel.

9. Seleccione los cinco controles Button haciendo clic en ellos mientras mantiene presionada la tecla MAYÚS. Presione CTRL+C para copiar los controles Button en el portapapeles.

10. Presione tres veces CTRL+V para pegar las copias de los controles Button en las filas restantes del control TableLayoutPanel.

11. Seleccione los 20 controles Button haciendo clic en ellos mientras mantiene presionada la tecla MAYÚS.

12. En la ventana Propiedades, cambie el valor de la propiedad Dock a Fill.

    Todos los controles Button se acoplan para rellenar todas las celdas.

13. En la ventana Propiedades, expanda el nodo de la propiedad Margin. Asigne a la propiedad All el valor de 5.

    Todos los controles Button reducen su tamaño para crear un margen mayor entre ellos.

14. Seleccione button10 y button20 y, a continuación, presione Eliminar para quitarlos del diseño.

15. Seleccione button5 y button15 y, a continuación, cambie el valor de su propiedad RowSpan a 2. Éstos serán los botones Borrar y = del control DemoCalculator.

Navegar por el control mediante la ventana Esquema del documento

Cuando el control o formulario se rellena con varios controles, le puede resultar más fácil navegar por el diseño con la ventana Esquema del documento.

Para navegar utilizando la ventana Esquema del documento

1. En el menú Ver, elija Otras ventanas y, a continuación, seleccione Esquema del documento.

   La ventana Esquema del documento muestra una vista de árbol del control DemoCalculator y sus controles constitutivos. Los controles contenedor como SplitContainer muestran sus controles secundarios como subnodos del árbol. También puede cambiar el nombre de los controles mediante la ventana Esquema del documento.

2. En la ventana Esquema del documento, haga clic con el botón secundario del mouse en button1 y, a continuación, haga clic en Cambiar nombre. Cambie el nombre por sevenButton.

3. Mediante la ventana Esquema del documento, cambie el nombre de los controles Button del nombre generado por el diseñador al nombre de producción según la lista siguiente:

   • button1 a sevenButton

   • button2 a eightButton

   • button3 a nineButton

   • button4 a divisionButton

   • button5 a clearButton

   • button6 a fourButton

   • button7 a fiveButton

   • button8 a sixButton

   • button9 a multiplicationButton

   • button11 a oneButton

   • button12 a twoButton

   • button13 a threeButton

   • button14 a subtractionButton

   • button15 a equalsButton

   • button16 a zeroButton

   • button17 a changeSignButton

   • button18 a decimalButton

   • button19 a additionButton

4. Mediante las ventanas Esquema del documento y Propiedades, cambie el valor de propiedad Text de cada control Button según la lista siguiente.

   • Cambie la propiedad de texto del control sevenButton a 7.

   • Cambie la propiedad de texto del control eightButton a 8.

   • Cambie la propiedad de texto del control nineButton a 9.

   • Cambie la propiedad de texto del control divisionButton a /.

   • Cambie la propiedad de texto del control clearButton a Borrar.

   • Cambie la propiedad de texto del control fourButton a 4.

   • Cambie la propiedad de texto del control fiveButton a 5.

   • Cambie la propiedad de texto del control sixButton a 6.

   • Cambie la propiedad de texto del control multiplicationButton a *.

   • Cambie la propiedad de texto del control oneButton a 1.

   • Cambie la propiedad de texto del control twoButton a 2.

   • Cambie la propiedad de texto del control threeButton a 3.

   • Cambie la propiedad de texto del control subtractionButton a -.

   • Cambie la propiedad de texto del control equalsButton a =.

   • Cambie la propiedad de texto del control zeroButton a 0.

   • Cambie la propiedad de texto del control changeSignButton a +/-

   • Cambie la propiedad de texto del control decimalButton a .

   • Cambie la propiedad de texto del control additionButton a +

5. En la superficie del diseñador, seleccione todos los controles Button haciendo clic en ellos, mientras mantiene presionada la tecla MAYÚS.

6. En la ventana Propiedades, expanda el nodo de la propiedad Font. Establezca la propiedad Size en 14 y establezca Bold en true para el control Button.

   Esto completa el diseño del control DemoCalculator. Todo lo que queda ahora es proporcionar la lógica de la calculadora.

Implementar los controladores de eventos

Los botones que se encuentran en el control DemoCalculator tienen controladores de eventos que se pueden utilizar para implementar gran parte de la lógica de la calculadora. El Diseñador de Windows Forms le permite implementar los códigos auxiliares de todos los controladores de eventos para todos los botones con un doble clic.

Para implementar los controladores de eventos

1. En la superficie del diseñador, seleccione todos los controles Button haciendo clic en ellos, mientras mantiene presionada la tecla MAYÚS.

2. Haga doble clic en uno de los controles Button.

   El Editor de código abre los controladores de eventos generados por el diseñador.

Probar el control

Dado que el control DemoCalculator hereda de la clase UserControl, puede probar su comportamiento con el UserControl Test Container. Para obtener más información, vea Cómo: Comprobar el comportamiento de un control de usuario en tiempo de ejecución.

Para probar el control

1. Presione F5 para compilar y ejecutar el control DemoCalculator en el UserControl Test Container.

2. Haga clic en el borde situado entre los paneles de SplitContainer y arrástrelo a la izquierda y derecha. El control TableLayoutPanel y todos sus controles secundarios cambian su tamaño para ajustarse al espacio disponible.

3. Cuando haya terminado de probar el control, haga clic en Cerrar.

Utilizar el control en un formulario

El control DemoCalculator se puede utilizar en otros controles compuestos o en un formulario. El procedimiento siguiente describe cómo utilizarlo.

Crear el proyecto

El primer paso es crear el proyecto de aplicación. Este proyecto se utilizará para compilar la aplicación que muestra el control personalizado.

Para crear el proyecto

1. En el menú Archivo, elija Agregar y, a continuación, haga clic en Nuevo proyecto para abrir el cuadro de diálogo Nuevo proyecto.

2. En la lista de proyectos de Visual Basic o Visual C#, seleccione la plantilla de proyecto Aplicación de Windows Forms.

3. En el cuadro Nombre, escriba DemoCalculatorTest y, a continuación, haga clic en Aceptar.

4. En el Explorador de soluciones, haga clic con el botón secundario en el proyecto DemoCalculatorTest y, a continuación, haga clic en Agregar referencia para abrir el cuadro de diálogo Agregar referencia.

5. Haga clic en la pestaña Proyectos y, a continuación, haga doble clic en el proyecto DemoCalculatorLib para agregar la referencia al proyecto de prueba.

6. En el Explorador de soluciones, haga clic con el botón secundario del mouse en DemoCalculatorTest y, a continuación, en Establecer como proyecto de inicio.

7. En el Diseñador de Windows Forms, aumente el tamaño del formulario a aproximadamente 700 x 500.

Utilizar el control en el diseño del formulario

Para utilizar el control DemoCalculator en una aplicación, tiene que colocarlo en un formulario.

Para utilizar el control en el diseño del formulario

1. En el Cuadro de herramientas, expanda el nodo Componentes de DemoCalculatorLib.

2. Arrastre el control DemoCalculator del Cuadro de herramientas al formulario. Mueva el control a la esquina superior izquierda del formulario. Cuando el control está cerca de los bordes del formulario, aparecen las guías de alineación. Estas líneas indican la distancia de la propiedad Padding del formulario y la propiedad Margin del control. Coloque el control en la ubicación indicada por las guías de alineación.

   Para obtener más información, vea Tutorial: Organizar controles en formularios Windows Forms mediante líneas de ajuste.

3. Arrastre un control Button desde el Cuadro de herramientas y colóquelo en el formulario.

4. Mueva el control Button alrededor del control DemoCalculator y observe dónde aparecen las líneas de ajuste. Puede alinear sus controles de forma precisa y fácil con esta característica. Elimine el control Button cuando finalice.

5. Haga clic con el botón secundario del mouse en el control DemoCalculator y, a continuación, haga clic en Propiedades.

6. Cambie el valor de la propiedad Dock a Fill.

7. Seleccione el formulario y, a continuación, expanda el nodo de propiedad Padding. Cambie el valor de Todos a 20.

   El tamaño del control DemoCalculator se reduce para incluir el nuevo valor Padding del formulario.

8. Cambie el tamaño del formulario arrastrando los distintos cuadros de tamaño a diferentes posiciones. Observe cómo cambia el tamaño del control DemoCalculator en consecuencia.

Pasos siguientes

Este tutorial ha mostrado cómo crear la interfaz de usuario de una calculadora simple. Puede extender su funcionalidad de las maneras siguientes:

• Implementar la lógica de la calculadora. Este procedimiento puede parecer sencillo, pero hay complejidades interesantes asociadas a las transiciones de estado de la calculadora.

• Empaquetar la aplicación de la calculadora para su implementación. Para obtener más información, vea Cómo: Publicar una aplicación ClickOnce sin usar el Asistente para publicación.

Vea también

Tareas

Tutorial: Organizar controles en formularios Windows Forms mediante TableLayoutPanel

Tutorial: Agregar etiquetas inteligentes a un componente de formularios Windows Forms

Tutorial: Organizar controles en formularios Windows Forms mediante líneas de ajuste

Tutorial: Rellenar automáticamente el cuadro de herramientas con componentes personalizados

Cómo: Comprobar el comportamiento de un control de usuario en tiempo de ejecución

Solución de problemas relacionados con la creación de controles y componentes

Solución de problemas relacionados con el desarrollo en tiempo de diseño

Conceptos

Variedades de controles personalizados

Otros recursos

Crear un nuevos Windows Forms