Compartir vía

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

  • Artículo

El Diseñador de Windows Forms proporciona muchas herramientas para compilar aplicaciones de Windows Forms. En este artículo se muestra cómo crear una aplicación mediante las distintas herramientas proporcionadas por el diseñador, incluidas las siguientes tareas:

  • Organizar los controles mediante guías de alineación.
  • Realice tareas de diseñador mediante etiquetas inteligentes.
  • Establecer los márgenes y rellenos de los controles.
  • Organice los controles utilizando un control TableLayoutPanel.
  • Crear particiones del diseño de un control con un control SplitContainer.
  • Navegue por el diseño con la ventana Esquema del documento.
  • Colocar controles con la pantalla de información de tamaño y ubicación.
  • Establezca los valores de propiedad mediante la ventana Propiedades.

Cuando haya terminado, tendrá un control personalizado que se ha ensamblado mediante muchas de las características de diseño disponibles en el Diseñador de Windows Forms. Este control implementa la interfaz de usuario (UI) para una calculadora sencilla. En la imagen siguiente se muestra el diseño general del control de calculadora:

Captura de pantalla de la interfaz de usuario completada para el control de calculadora.

Sugerencia

Si es desarrollador de C++ y busca un tutorial para ayudarle a crear una aplicación de Windows que incluya formularios y controles, consulte Creación de una aplicación MFC basada en formularios. Para obtener información más generalizada, consulta Introducción a la programación de Windows en C++.

Creación del proyecto de control personalizado

El primer paso es crear el proyecto de control DemoCalculator.

  1. Abra Visual Studio y cree un proyecto de biblioteca de control de Windows Forms mediante la plantilla de .NET Framework para C# o Visual Basic. Asigne al proyecto el nombre DemoCalculatorLib.

    Captura de pantalla de la plantilla Biblioteca de controles de Windows Forms en Visual Studio.

  2. Para cambiar el nombre del archivo, en Explorador de soluciones, haga clic con el botón derecho en UserControl1.vb o UserControl1.cs, seleccione Cambiar nombrey cambie el nombre de archivo a DemoCalculator.vb o DemoCalculator.cs. Seleccione 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 la superficie de diseño para el control de DemoCalculator. En esta vista, puede diseñar gráficamente la apariencia del control seleccionando controles y componentes del Cuadro de herramientas y colocándolos en la superficie del diseñador. Para obtener más información sobre los controles personalizados, vea Variedades de controles personalizados.

Diseñar la disposición del control

El control DemoCalculator contiene varios controles de Windows Forms. En este procedimiento, organizará los controles mediante el Diseñador de Windows Forms.

  1. En el Diseñador de Windows Forms, cambie el control DemoCalculator a un tamaño mayor seleccionando el identificador de ajuste de tamaño en la esquina inferior derecha y arrastrándolo para cambiar el tamaño. En la esquina inferior derecha de Visual Studio, busque la información de tamaño y ubicación de los controles. Establezca el tamaño del control en ancho 1000 y alto 800 viendo la información de tamaño a medida que cambia el tamaño del control. También puede desplazarse hacia abajo hasta la parte inferior de la ventana Propiedades, que normalmente se acopla en la esquina inferior derecha y escribir manualmente los valores de la propiedad Size.

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

    El controlSplitContainer se coloca en la superficie del diseñador del control DemoCalculator.

    Sugerencia

    El control SplitContainer se ajusta automáticamente para adaptarse al tamaño del control DemoCalculator. Observe la ventana Propiedades para ver la configuración de las propiedades del control SplitContainer. Busque la propiedad Dock. Su valor es DockStyle.Fill, lo que significa que el control SplitContainer siempre se ajustará 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 se reduce a su tamaño predeterminado y ya no sigue el tamaño del control DemoCalculator.

  4. Seleccione el glifo de etiqueta inteligente (glifo de etiqueta inteligente) en la esquina superior derecha del control SplitContainer. Seleccione Acoplar en contenedor primario 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 mediante etiquetas inteligentes en controles de Windows Forms.

  5. Seleccione el borde vertical entre los paneles y arrástrelo a la derecha para que el panel izquierdo tome la mayor parte del espacio.

    El SplitContainer divide el control DemoCalculator en dos paneles con un borde móvil que los separa. El panel de la izquierda contiene los botones y la pantalla de la calculadora, y el panel de la derecha muestra 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 Cuadro de herramientas, seleccione el nodo Controles comunes para abrirlo. Seleccione el control ListView y arrástrelo al panel derecho del control SplitContainer.

  8. Seleccione el glifo de etiqueta inteligente del control ListView. En el panel de etiquetas inteligentes, cambie el valor de View a Details.

  9. En el panel de etiquetas inteligentes, seleccione 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, seleccione Agregar para agregar una columna en el control ListView. Cambie el valor de la propiedad Text de la columna a Historial. Seleccione Aceptar para crear la columna.

  11. En el panel de etiquetas inteligentes, seleccione Acoplar en contenedor primario y, luego, seleccione el glifo de etiquetas inteligentes para cerrar el panel de etiquetas inteligentes.

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

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

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

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

  14. Seleccione el botón Agregar hasta que se muestren cinco columnas. Seleccione las cinco columnas y, luego, seleccione Porcentaje en el cuadro Tipo de tamaño. Establezca el valor Porcentaje en 20. Esta acción establece cada columna en el mismo ancho.

  15. En Mostrar, seleccione Filas.

  16. Seleccione Agregar hasta que se muestren cinco filas. Seleccione las cinco filas y, luego, seleccione Porcentaje en el cuadro Tipo de tamaño. Establezca el valor Porcentaje en 20. Esta acción establece cada fila en la misma altura.

  17. Seleccione Aceptar para aceptar los cambios y, a continuación, seleccione el glifo de etiqueta inteligente para cerrar el panel de etiquetas inteligentes.

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

Relleno del control

Ahora que se configuró el diseño del control, puede rellenar el control DemoCalculator con botones y una pantalla.

  1. En Cuadro de herramientas, seleccione el icono de control TextBox.

    Un control TextBox se coloca en la primera celda del control TableLayoutPanel.

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

    El control TextBox se mueve a una posición 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 TextBox del control TextAlign a Right.

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

  6. Seleccione el control TableLayoutPanel.

  7. En Cuadro de herramientas, seleccione el icono Button.

    Un control Button se coloca en la siguiente celda abierta del control TableLayoutPanel.

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

  9. Seleccione los cinco controles Button manteniendo presionada la tecla Mayús . Presione Ctrl+C para copiar los controles de Button en el Portapapeles.

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

  11. Seleccione los 20 controles Button seleccionándolos 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 sus celdas contenedoras.

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

    Todos los controles Button tienen un tamaño menor para crear un margen mayor entre ellos.

  14. Seleccione botón10 y botón20y presione Eliminar para quitarlos del diseño.

  15. Seleccione botón5 y botón15y, a continuación, cambie el valor de su propiedad RowSpan a 2. Estos botones representan los botones Borrar y = del control DemoCalculator.

Usar la ventana Esquema del documento

Cuando el control o el formulario se rellenan con varios controles, es posible que le resulte más fácil navegar por el diseño con la ventana Esquema del documento.

  1. En la barra de menús, elija Ver>Otras ventanas>Esquema de documento. O bien, en el teclado, presione Ctrl+Alt+T.

    La ventana Esquema del documento muestra una vista de árbol del control DemoCalculator y sus controles constituyentes. Los controles contenedores, comoSplitContainer, muestran sus controles secundarios como subnodos en el árbol. También puede cambiar el nombre de los controles en su lugar mediante la ventana Esquema del documento.

  2. En la ventana Esquema del documento, haga clic con el botón derecho en button1 y, a continuación, seleccione Cambiar nombre (teclado: F2). Cambie su nombre a sevenButton.

  3. Usando la ventana de esquema de documento , renombra 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. Con las ventanas Esquema del documento y Propiedades, cambie el valor de la propiedad Text de cada nombre de 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 / (barra diagonal)

    • 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 * (asterisco)

    • 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 - (guion)

    • Cambie la propiedad de texto del control equalsButton a = (signo igual)

    • 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 . (punto)

    • Cambie la propiedad de texto del control additionButton a + (signo más)

  5. En la superficie del diseñador, seleccione todos los controles Button mientras mantiene presionada la tecla Mayús.

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

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

Implementación de controladores de eventos

Los botones del control DemoCalculator tienen controladores de eventos que se pueden usar 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 una selección.

  1. En la superficie del diseñador, seleccione todos los controles Button mientras mantiene presionada la tecla Mayús.

  2. Seleccione uno de los controles Button.

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

Dado que este tutorial se centra en el diseñador, se omiten los detalles de implementación de la funcionalidad de la calculadora.

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 probar el comportamiento en tiempo de ejecución de unUserControl.

  1. Presione F5 para compilar y ejecutar el control DemoCalculator en el contenedor de pruebas de UserControl.

  2. Seleccione el borde entre los paneles de SplitContainer y arrástrelo a la izquierda y a la derecha. El tamaño de TableLayoutPanel y de todos sus controles secundarios cambia para ajustarse al espacio disponible.

  3. Cuando haya terminado de probar el control, seleccione Cerrar.

Uso del control en un formulario

El control DemoCalculator se puede usar en otros controles compuestos o en un formulario. En el procedimiento siguiente se describe cómo usarlo.

Creación del proyecto

El primer paso es crear el proyecto de aplicación. Usarás este proyecto para crear la aplicación que muestra tu control personalizado.

  1. Agregue un nuevo proyecto aplicación de Windows Forms (.NET Framework) a la solución existente y asígnele el nombre DemoCalculatorTest.

  2. En el Explorador de soluciones, haga clic con el botón derecho en el proyecto DemoCalculatorTest y seleccione Agregar> Referencia para abrir el cuadro de diálogo Administrador de referencias.

  3. Vaya a la pestaña Proyectos de y seleccione el proyecto DemoCalculatorLib a fin de agregar la referencia al proyecto de prueba.

  4. En el Explorador de soluciones, haga clic con el botón derecho en DemoCalculatorTest y, luego, seleccione Establecer como proyecto de inicio.

  5. En el Diseñador de Windows Forms, aumente el tamaño del formulario a aproximadamente 1400 x 1000.

Utilice el control en el diseño del formulario

Para usar el control DemoCalculator en una aplicación, debe colocarlo en un formulario.

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

  2. Arrastre el control DemoCalculator desde el 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. Las guías de alineación indican la distancia de la propiedad Padding del formulario y de la propiedad Margin del control. Coloque el control en la ubicación que indican las guías de alineación.

    Para obtener más información, vea Tutorial: Organizar los controles mediante guías de alineación.

  3. Arrastre un control Button desde el Cuadro de herramientas y suéltelo en el formulario.

  4. Mueva el control Button alrededor del control DemoCalculator y observe dónde aparecen las guías de alineación. Puede alinear los controles de forma precisa y sencilla mediante esta característica. Elimine el control Button cuando haya terminado.

  5. Haga clic con el botón derecho en el control DemoCalculator y, luego, seleccione 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 All a 20.

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

  8. Cambie el tamaño del formulario arrastrando los distintos controladores de tamaño a diferentes posiciones. Observe cómo el control DemoCalculator se redimensiona para ajustarse.

Pasos siguientes

En este artículo se ha mostrado cómo construir la interfaz de usuario para una calculadora sencilla. Para continuar, puede extender su funcionalidad implementando la lógica de la calculadora y luego publicar la aplicación mediante ClickOnce. O bien, siga con otro tutorial en el que creará un visor de imágenes con Windows Forms.

Consulte también