Cómo crear su primera aplicación de Windows Forms (Winforms) en Visual Studio

Windows Forms es un marco disponible en Visual Studio que le permite crear aplicaciones de escritorio con la ayuda de una interfaz gráfica de usuario. Esto le permite hacer clic y arrastrar widgets como botones o etiquetas directamente a un lienzo y manipular las propiedades de cada widget, como el tamaño de fuente, el color o el borde.

En este artículo, se usará un simple convertidor de Celsius a Fahrenheit como ejemplo para repasar los conceptos básicos de cómo configurar una aplicación de formulario de Windows. Visual Studio 2019 Community Edition es la edición utilizada para este tutorial.

Cómo crear el proyecto de Windows Forms en Visual Studio

Primero, cree el proyecto en Visual Studio.

1. Abra Visual Studio y seleccione Crear un nuevo proyecto.
2. Visual Studio le proporcionará una lista de plantillas de proyecto entre las que puede elegir.
3. Para crear una aplicación de Windows Forms, busque Aplicación de formulario de Windows y selecciónelo de la lista de plantillas. Una vez seleccionado esto, haga clic en
   instagram viewer
   Próximo.

   Si el Aplicación de formulario de Windows la opción no está disponible en la lista, modificar su versión instalada de Visual Studio. En Visual Studio Installer, agregue la carga de trabajo de desarrollo de escritorio .NET para escritorio y móvil, y vuelva a iniciar Visual Studio.

4. Agregue un nombre y una ubicación para el proyecto y haga clic en Próximo. La ubicación es el directorio donde se almacenarán los archivos de código.
5. En la pantalla siguiente, mantenga la selección predeterminada de .NET Core 3.1.
6. Hacer clic Crear.
7. Una vez que Visual Studio haya terminado de crear el proyecto, se abrirá el proyecto.

Cómo agregar elementos al lienzo del proyecto

El lienzo es el área blanca ubicada en la parte superior izquierda de la pantalla. Haga clic y arrastre los puntos en la parte inferior, derecha o inferior derecha del lienzo para cambiar su tamaño si es necesario.

Para crear la interfaz de usuario de la aplicación, agregue widgets como botones o cuadros de texto en el lienzo.

1. Abre el Pestaña Ver en la parte superior de la ventana y seleccione Caja de herramientas.
2. Esto agregará una caja de herramientas al lado izquierdo de la aplicación. Selecciona el icono de alfiler en la parte superior derecha de la caja de herramientas para fijarlo allí de forma permanente.
3. Aquí es donde puede arrastrar cualquier widget desde la caja de herramientas al lienzo. Resalte un botón de la caja de herramientas y arrástrelo al lienzo.
4. Arrastre dos cuadros de texto más al lienzo, junto con tres etiquetas (dos etiquetas para cada cuadro de texto y una etiqueta para el título en la parte superior de la aplicación).
5. Cada widget en el lienzo tiene propiedades asociadas a ellos. Resalte un widget para mostrar el Propiedades ventana en la parte inferior derecha de Visual Studio, que enumera todas las propiedades que tiene el widget. Estas propiedades pueden incluir el texto, el nombre, el tamaño de fuente, el borde o la alineación del widget resaltado.
6. Por el momento, el texto de estos widgets todavía dice etiqueta1, etiqueta2, o botón 1. Selecciona el etiqueta1 widget y editar el Texto propiedad en la ventana de propiedades para decir "Celsius a Fahrenheit". Cambie el tamaño de fuente a 22 puntos.
7. Del mismo modo, edite las propiedades de los otros widgets en el lienzo para que sean las siguientes:

   Widget	Propiedad	Nuevo valor
   etiqueta2	Texto	Celsius
   etiqueta3	Texto	Fahrenheit
   botón	Texto	Calcular
   Cuadro de texto Fahrenheit	Solo lectura	Cierto

Cómo manejar eventos y escribir código en el código subyacente

Los widgets en el lienzo se pueden vincular a eventos. Los eventos pueden incluir cosas como hacer clic en un botón, cambiar el texto dentro de un cuadro de texto o seleccionar un botón de opción en particular. Cuando ocurren estos eventos, puede provocar que se active una sección de código en el código subyacente.

C# es el lenguaje utilizado al crear Windows Forms. Si aún no ha usado C#, hay muchas razones prácticas para aprender a programar en C#.

Para esta aplicación en particular, agregue un evento al Calcular para activar una sección de código para que se ejecute cuando se presiona este botón.

1. Haga doble clic en el Calcular botón para abrir automáticamente Form1.cs con un nuevo método de evento:

   Vacío privado Calcular Botón_Click (remitente del objeto, EventArgs e)

2. Aquí es donde agregará el código que realizará el cálculo de Celsius a Fahrenheit y mostrará el resultado en el cuadro de texto Fahrenheit. Para hacer esto, debe poder leer el valor del cuadro de texto Celsius y modificar el cuadro de texto Fahrenheit para mostrar el resultado.
3. Vuelva al lienzo y vuelva a editar las propiedades como se muestra antes. Esta vez, edite el Nombre propiedad para los cuadros de texto Celsius y Fahrenheit. Estos nombres se pueden usar para hacer referencia a los cuadros de texto en el código.

   Widget	Propiedad	Nuevo valor
   Cuadro de texto Celsius	Nombre	CelsiusTextBox
   Cuadro de texto Fahrenheit	Nombre	FahrenheitTextBox

4. Vuelva a la función computeButton_Click en Form1.cs.
5. Ahora, se puede hacer referencia al cuadro de texto Celsius en el código con el nombre "celsiusTextBox". El valor Celsius que ingresó el usuario se almacena en su propiedad Texto. Sin embargo, dado que es una cadena, analice esto en un doble para incluirlo en los futuros cálculos de Fahrenheit.

   Vacío privado Calcular Botón_Click (remitente del objeto, EventArgs e)
   {
    // Obtenga el valor que el usuario ingresó en el cuadro de texto Celsius
    doble celsiusValue = Doble. Analizar (celsiusTextBox. Texto);
   }

6. La variable celsiusValue ahora almacena el valor que el usuario ingresó en el cuadro de texto Celsius. La fórmula para convertir Celsius a Fahrenheit es (valor centígrado * 9/5) + 32. Por lo tanto, el resultado ahora se puede calcular y almacenar en el cuadro de texto Fahrenheit.

   Vacío privado Calcular Botón_Click (remitente del objeto, EventArgs e)
   {
    // Obtenga el valor que el usuario ingresó en el cuadro de texto Celsius
    doble celsiusValue = Doble. Analizar (celsiusTextBox. Texto);
    // Aplicar el calculo
    doble resultado = (celsiusValue * 9/5) + 32;
    // Almacenar el resultado en el cuadro de texto Fahrenheit
    fahrenheitTextBox. Texto = resultado. Encadenar();
   }

Cómo ejecutar y depurar el programa Windows Forms

Ejecución del programa Windows Forms en Visual Studio

Ahora que la interfaz de usuario y la lógica del código están configuradas, ejecute el programa para verlo funcionar.

1. Para ejecutar el programa, seleccione la flecha verde en la parte superior de la barra de herramientas en Visual Studio.
2. Una vez que el proyecto se haya cargado, agregue un valor en el cuadro de texto Celsius y presione el botón Calcular botón. Esto agregará el resultado en el cuadro de texto Fahrenheit.
3. Si el programa está borroso en tiempo de ejecución, es probable que su aplicación no reconozca DPI. Esto puede causar problemas de escalado y resolución, por lo que deberá habilitarse. También puede leer más sobre configurar el escalado de pantalla en Windows 10 para monitores de alto DPI.
4. Haga clic derecho en el Proyecto convertidor de temperatura en el Explorador de soluciones. Seleccione Agregar, luego seleccione Nuevo artículo.
5. Busque el archivo de manifiesto de la aplicación y haga clic en Agregar.
6. Copie el siguiente código en el nuevo archivo app.manifest, como elemento secundario de la etiqueta de ensamblaje (si el código ya se generó, simplemente elimine los comentarios).

   
   
   cierto
   cierto
   
   

7. Para que este cambio surta efecto, vuelva a ejecutar el programa. Seleccione el botón rojo de detener en la parte superior de la barra de herramientas, luego seleccione el botón verde de reproducción nuevamente.

Depuración del programa Windows Forms

Es posible que desee depurar el programa si la lógica de su aplicación de Windows Forms no funciona como se esperaba.

1. Vuelva a la función de cálculo de botón de clic en Form1.cs y haga clic en cualquier lugar de la barra gris en el extremo izquierdo de la pantalla. Esto agregará un punto de interrupción, que se indica con un círculo rojo.
2. Presione el botón "Calcular" nuevamente para activar este método para ejecutar. El programa se detendrá cuando llegue al punto de interrupción para mostrar todos los valores almacenados en las variables en ese punto.
3. Para continuar con el programa, haga clic en el verde Continuar flecha en la parte superior de la barra de herramientas.

Ejecutar el programa utilizando un archivo ejecutable

Si no desea ejecutar su programa a través de Visual Studio, use el archivo ejecutable independiente para el programa. Esto se genera automáticamente.

1. Navegue hasta el archivo ejecutable, que se puede encontrar aquí:

   /bin/Debug/netcoreapp3.1/TemperatureConverter.exe

2. Haga clic en el archivo ejecutable para ejecutar directamente el programa.

Agregar más a su formulario de Windows

Esperamos que ahora tenga una comprensión básica de la estructura básica de una aplicación de Windows Forms. Puede continuar explorando características adicionales de Windows Forms experimentando con nuevos widgets y profundizando en los otros eventos que se pueden manejar.

Una vez que esté más familiarizado con Windows Forms, puede comenzar a crear aplicaciones más complejas. También puede explorar muchas de las otras formas en que puede crear aplicaciones en el escritorio de Windows.

Use Chrome para crear una aplicación de Windows 10 desde cualquier sitio web

Leer siguiente

Sobre el Autor