Tutorial de la aplicación C# Windows Forms con ejemplo

Hasta ahora hemos visto cómo trabajar con C# para crear aplicaciones basadas en consola. Pero en un escenario de la vida real, el equipo normalmente usa Visual Studio y C# para crear Windows Forms o aplicaciones basadas en web.

Una aplicación de formulario de Windows es una aplicación diseñada para ejecutarse en una computadora. No se ejecutará en el navegador web porque se convierte en una aplicación web.

Este tutorial se centrará en cómo podemos crear aplicaciones basadas en Windows. También aprenderemos algunos conceptos básicos sobre cómo trabajar con los diversos elementos de la aplicación C# Windows.

En este tutorial de Windows, aprenderá-

• Conceptos básicos de Windows Forms
• Hola mundo en Windows Forms
• Adición de controles a un formulario
• Manejo de eventos para controles
• Control de árbol y PictureBox

Conceptos básicos de Windows Forms

Una aplicación de Windows Forms es aquella que se ejecuta en la computadora de escritorio. Una aplicación de formularios de Windows normalmente tendrá una colección de controles como etiquetas, cuadros de texto, cuadros de lista, etc.

A continuación se muestra un ejemplo de una aplicación C# de formulario de Windows simple. Muestra una pantalla de inicio de sesión simple, a la que puede acceder el usuario. El usuario ingresará las credenciales requeridas y luego hará clic en el botón Iniciar sesión para continuar.

Entonces, un ejemplo de los controles disponibles en la aplicación anterior

1. Esta es una colección de controles de etiquetas que normalmente se usan para describir controles adyacentes. Entonces, en nuestro caso, tenemos 2 cuadros de texto y las etiquetas se usan para decirle al usuario que un cuadro de texto es para ingresar el nombre de usuario y el otro para la contraseña.
2. Los 2 cuadros de texto se utilizan para guardar el nombre de usuario y la contraseña que ingresará el usuario.
3. Finalmente, tenemos el botón de control. El control de botón normalmente tendrá algún código adjunto para realizar un determinado conjunto de acciones. Entonces, por ejemplo, en el caso anterior, podríamos hacer que el botón realice una acción de validación del nombre de usuario y la contraseña que ingresa el usuario.

C# Hola mundo

Ahora veamos un ejemplo de cómo podemos implementar una aplicación simple de "hola mundo" en Visual Studio. Para esto, necesitaríamos implementar los pasos mencionados a continuación

Paso 1) El primer paso implica la creación de un nuevo proyecto en Visual Studio. Después de iniciar Visual Studio, debe elegir la opción de menú Nuevo->Proyecto.

Paso 2) El siguiente paso es elegir el tipo de proyecto como una aplicación de Windows Forms. Aquí también debemos mencionar el nombre y la ubicación de nuestro proyecto.

1. En el cuadro de diálogo del proyecto, podemos ver varias opciones para crear diferentes tipos de proyectos en Visual Studio. Haga clic en la opción de Windows en el lado izquierdo.
2. Cuando hacemos clic en las opciones de Windows en el paso anterior, podremos ver una opción para la aplicación Windows Forms. Haga clic en esta opción.
3. Le daremos un nombre a la aplicación. En nuestro caso, es DemoApplication. También proporcionaremos una ubicación para almacenar nuestra aplicación.
4. Finalmente, hacemos clic en el botón 'Aceptar' para permitir que Visual Studio cree nuestro proyecto.

Si se siguen los pasos anteriores, obtendrá el siguiente resultado en Visual Studio.

Salida:-

Verá un diseñador de formularios en Visual Studio. Es en este Diseñador de formularios donde comenzará a crear su aplicación de Windows Forms.

En el Explorador de soluciones, también podrá ver la Solución de aplicación de demostración. Esta solución contendrá los siguientes 2 archivos de proyecto

1. Una aplicación de formulario llamada Forms1.cs. Este archivo contendrá todo el código para la aplicación Windows Form.
2. El programa principal llamado Program.cs es un archivo de código predeterminado que se crea cuando se crea una nueva aplicación en Visual Studio. Este código contendrá el código de inicio de la aplicación como un todo.

En el lado izquierdo de Visual Studio, también verá una caja de herramientas. La caja de herramientas contiene todos los controles que se pueden agregar a Windows Forms. Los controles como un cuadro de texto o una etiqueta son solo algunos de los controles que se pueden agregar a Windows Forms.

A continuación se muestra una captura de pantalla de cómo se ve la Caja de herramientas.

Paso 3) En este paso, agregaremos una etiqueta al formulario que mostrará "Hola mundo". En la caja de herramientas, deberá elegir el control Etiqueta y simplemente arrastrarlo al Formulario.

Una vez que arrastre la etiqueta al formulario, podrá ver la etiqueta incrustada en el formulario como se muestra a continuación.

Paso 4) El siguiente paso es ir a las propiedades del control y cambiar el texto a 'Hello World'.

Para ir a las propiedades de un control, debe hacer clic con el botón derecho en el control y elegir la opción de menú Propiedades

• El panel de propiedades también aparece en Visual Studio. Entonces, para el control de etiquetas, en el control de propiedades, vaya a la sección Texto e ingrese "Hola mundo".
• Cada control tiene un conjunto de propiedades que describen el control.

Si sigue todos los pasos anteriores y ejecuta su programa en Visual Studio, obtendrá el siguiente resultado

Salida:-

En la salida, puede ver que se muestra Windows Form. También puede ver que se muestra "Hello World" en el formulario.

Agregar controles a un formulario

Ya habíamos visto cómo agregar un control a un formulario cuando agregamos el control de etiqueta en la sección anterior para mostrar "Hello World".

Veamos los otros controles disponibles para formularios de Windows y veamos algunas de sus propiedades comunes.

En nuestra aplicación de formulario de Windows en ejemplos de C#, crearemos un formulario que tendrá la siguiente funcionalidad.

1. La capacidad del usuario para ingresar el nombre y la dirección.
2. Una opción para elegir la ciudad en la que reside el usuario
3. La posibilidad de que el usuario ingrese una opción para el género.
4. Una opción para elegir un curso que el usuario quiera aprender. Habrá opciones tanto para C# como para ASP.Net

Entonces, veamos cada control en detalle y agréguelos para crear el formulario con la funcionalidad mencionada anteriormente.

Cuadro de grupo

Un cuadro de grupo se utiliza para agrupar controles lógicos en una sección. Tomemos un ejemplo si tuviera una colección de controles para ingresar detalles como el nombre y la dirección de una persona. Idealmente, estos son detalles de una persona, por lo que querrá tener estos detalles en una sección separada en el Formulario. Para este propósito, puede tener un cuadro de grupo. Veamos cómo podemos implementar esto con un ejemplo que se muestra a continuación

Paso 1) El primer paso es arrastrar el control Groupbox al Windows Form desde la caja de herramientas como se muestra a continuación

Paso 2) Una vez que se haya agregado el cuadro de grupo, vaya a la ventana de propiedades haciendo clic en el control del cuadro de grupo. En la ventana de propiedades, vaya a la propiedad Texto y cámbiela a "Detalles del usuario".

Una vez que realice los cambios anteriores, verá el siguiente resultado

Salida:-

En el resultado, puede ver claramente que Groupbox se agregó al formulario. También puede ver que el texto del cuadro de grupo se cambió a "Detalles del usuario".

Control de etiquetas

Luego viene el control de etiquetas. El control de etiqueta se utiliza para mostrar un texto o un mensaje al usuario en el formulario. El control de etiqueta se usa normalmente junto con otros controles. Los ejemplos comunes son en los que se agrega una etiqueta junto con el control de cuadro de texto.

La etiqueta indica al usuario lo que se espera que llene en el cuadro de texto. Veamos cómo podemos implementar esto con un ejemplo que se muestra a continuación. Agregaremos 2 etiquetas, una que se llamará "nombre" y la otra "dirección". Se usarán junto con los controles del cuadro de texto que se agregarán en la sección posterior.

Paso 1) El primer paso es arrastrar el control de etiqueta a Windows Form desde la caja de herramientas como se muestra a continuación. Asegúrese de arrastrar el control de etiqueta 2 veces para que pueda tener uno para el 'nombre' y el otro para la 'dirección'.

Paso 2) Una vez que se haya agregado la etiqueta, vaya a la ventana de propiedades haciendo clic en el control de la etiqueta. En la ventana de propiedades, vaya a la propiedad Texto de cada control de etiqueta.

Una vez que realice los cambios anteriores, verá el siguiente resultado

Salida:-

Puede ver los controles de etiqueta agregados al formulario.

Cuadro de texto

Se utiliza un cuadro de texto para permitir que un usuario ingrese algún texto en la aplicación de Windows en C#. Veamos cómo podemos implementar esto con un ejemplo que se muestra a continuación. Agregaremos 2 cuadros de texto al formulario, uno para el Nombre y otro para la dirección que se ingresará para el usuario

Paso 1) El primer paso es arrastrar el control de cuadro de texto a Windows Form desde la caja de herramientas como se muestra a continuación

Paso 2) Una vez que se hayan agregado los cuadros de texto, vaya a la ventana de propiedades haciendo clic en el control del cuadro de texto. En la ventana de propiedades, vaya a la propiedad Nombre y agregue un nombre significativo a cada cuadro de texto. Por ejemplo, nombre el cuadro de texto para el usuario como txtName y el de la dirección como txtAddress. Se debe hacer una convención de nomenclatura y un estándar para los controles porque es más fácil agregar funcionalidad adicional a estos controles, que veremos más adelante.

Una vez que realice los cambios anteriores, verá el siguiente resultado

Salida:-

En el resultado, puede ver claramente que los cuadros de texto se agregaron al formulario.

Cuadro de lista

Un cuadro de lista se utiliza para mostrar una lista de elementos en el formulario de Windows. Veamos cómo podemos implementar esto con un ejemplo que se muestra a continuación. Agregaremos un cuadro de lista al formulario para almacenar algunas ubicaciones de la ciudad.

Paso 1) El primer paso es arrastrar el control del cuadro de lista a Windows Form desde la caja de herramientas como se muestra a continuación

Paso 2) Una vez que se haya agregado el cuadro de lista, vaya a la ventana de propiedades haciendo clic en el control del cuadro de lista.

1. Primero, cambie la propiedad del control de cuadro Listbox, en nuestro caso, hemos cambiado esto a lstCity
2. Haga clic en la propiedad Elementos. Esto le permitirá agregar diferentes elementos que pueden aparecer en el cuadro de lista. En nuestro caso, hemos seleccionado artículos de “colección”.
3. En el Editor de colecciones de cadenas, que aparece, ingrese los nombres de las ciudades. En nuestro caso, hemos ingresado "Mumbai", "Bangalore" y "Hyderabad".
4. Por último, haga clic en el botón 'Aceptar'.

Una vez que realice los cambios anteriores, verá el siguiente resultado

Salida:-

En el resultado, puede ver que el cuadro de lista se agregó al formulario. También puede ver que el cuadro de lista se ha rellenado con los valores de la ciudad.

Botón de opción

Un botón de radio se utiliza para mostrar una lista de elementos de los que el usuario puede elegir uno. Veamos cómo podemos implementar esto con un ejemplo que se muestra a continuación. Agregaremos un botón de radio para una opción masculina/femenina.

Paso 1) El primer paso es arrastrar el control de 'botón de opción' a Windows Form desde la caja de herramientas como se muestra a continuación.

Paso 2) Una vez que se haya agregado el botón de opción, vaya a la ventana de propiedades haciendo clic en el control del botón de opción.

1. Primero, debe cambiar la propiedad de texto de ambos controles de radio. Vaya a las ventanas de propiedades y cambie el texto a macho de un botón de opción y el texto del otro a hembra.
2. Del mismo modo, cambie la propiedad de nombre de ambos controles de Radio. Vaya a las ventanas de propiedades y cambie el nombre a 'rdMale' de un botón de opción y a 'rdfemale' para el otro.

Una vez que realice los cambios anteriores, verá el siguiente resultado

Salida:-

Verá los botones de radio agregados al formulario de Windows.

Casilla

Se utiliza una casilla de verificación para proporcionar una lista de opciones en las que el usuario puede elegir varias opciones. Veamos cómo podemos implementar esto con un ejemplo que se muestra a continuación. Agregaremos 2 casillas de verificación a nuestros formularios de Windows. Estas casillas de verificación le darán al usuario la opción de aprender C# o ASP.Net.

Paso 1) El primer paso es arrastrar el control de casilla de verificación a Windows Form desde la caja de herramientas como se muestra a continuación

Paso 2) Una vez que se haya agregado la casilla de verificación, vaya a la ventana de propiedades haciendo clic en el control Casilla de verificación.

En la ventana de propiedades,

1. Primero, debe cambiar la propiedad de texto de ambos controles de casilla de verificación. Vaya a las ventanas de propiedades y cambie el texto a C# y ASP.Net.
2. Del mismo modo, cambie la propiedad de nombre de ambos controles de Radio. Vaya a las ventanas de propiedades y cambie el nombre a chkC de una casilla de verificación y a chkASP para la otra.

Una vez que realice los cambios anteriores, verá el siguiente resultado

Salida:-

Botón

Se utiliza un botón para permitir que el usuario haga clic en un botón que luego iniciaría el procesamiento del formulario. Veamos cómo podemos implementar esto con un ejemplo que se muestra a continuación. Agregaremos un botón simple llamado "Enviar" que se utilizará para enviar toda la información en el formulario.

Paso 1) El primer paso es arrastrar el control de botón a Windows Form desde la caja de herramientas como se muestra a continuación

Paso 2) Una vez que se haya agregado el Botón, vaya a la ventana de propiedades haciendo clic en el control Botón.

1. Primero, debe cambiar la propiedad de texto del control de botón. Vaya a las ventanas de propiedades y cambie el texto a 'enviar'.
2. Del mismo modo, cambie la propiedad de nombre del control. Vaya a las ventanas de propiedades y cambie el nombre a 'btnSubmit'.

Una vez que realice los cambios anteriores, verá el siguiente resultado

Salida:-

Felicidades, ahora tiene su primer Windows Form básico en su lugar. Pasemos ahora al siguiente tema para ver cómo podemos gestionar eventos para los controles.

Control de eventos de C# para controles

Cuando trabaje con formularios de Windows, puede agregar eventos a los controles. Un evento es algo que sucede cuando se realiza una acción. Probablemente la acción más común es hacer clic en un botón en un formulario. En C# Windows Forms, puede agregar código que se puede usar para realizar ciertas acciones cuando se presiona un botón en el formulario.

Normalmente, cuando se presiona un botón en un formulario, significa que se debe realizar algún procesamiento.

Echemos un vistazo a uno de los eventos y cómo se puede manejar antes de pasar al escenario del evento del botón.

El siguiente ejemplo mostrará un evento para el control Listbox. Entonces, cada vez que se selecciona un elemento en el control del cuadro de lista, debe aparecer un cuadro de mensaje que muestra el elemento seleccionado. Realicemos los siguientes pasos para lograr esto.

Paso 1) Haga doble clic en el cuadro de lista en el diseñador de formularios. Al hacer esto, Visual Studio abrirá automáticamente el archivo de código para el formulario. Y agregará automáticamente un método de evento al código. Este método de evento se activará cada vez que se seleccione cualquier elemento en el cuadro de lista.

Arriba está el fragmento de código que Visual Studio agrega automáticamente cuando hace doble clic en el control del cuadro de lista en el formulario. Ahora agreguemos la siguiente sección de código a este fragmento de código, para agregar la funcionalidad requerida al evento del cuadro de lista.

1. Este es el método del controlador de eventos que Visual Studio crea automáticamente cuando hace doble clic en el control del cuadro de lista. No necesita preocuparse por la complejidad del nombre del método o los parámetros pasados ​​al método.
2. Aquí obtenemos el elemento seleccionado a través de la propiedad lstCity.SelectedItem. Recuerde que lstCity es el nombre de nuestro control Listbox. Luego usamos el método GetItemText para obtener el valor real del elemento seleccionado. Luego asignamos este valor a la variable de texto.
3. Finalmente, usamos el método MessageBox para mostrar el valor de la variable de texto al usuario.

Una vez que realice los cambios anteriores y ejecute el programa en Visual Studio, verá el siguiente resultado

Salida:-

A partir de la salida, puede ver que cuando se selecciona cualquier elemento del cuadro de lista, aparecerá un cuadro de mensaje. Esto mostrará el elemento seleccionado del cuadro de lista.

Ahora veamos el control final, que es el método de clic de botón. Nuevamente esto sigue la misma filosofía. Simplemente haga doble clic en el botón en el Diseñador de formularios y automáticamente agregará el método para el controlador de eventos del botón. Entonces solo necesita agregar el siguiente código.

1. Este es el método del controlador de eventos que Visual Studio crea automáticamente cuando hace doble clic en el botón de control. No necesita preocuparse por la complejidad del nombre del método o los parámetros pasados ​​al método.
2. Aquí obtenemos valores ingresados ​​en el cuadro de texto de nombre y dirección. Los valores se pueden tomar de la propiedad de texto del cuadro de texto. Luego asignamos los valores a 2 variables, nombre y dirección en consecuencia.
3. Finalmente, usamos el método MessageBox para mostrar los valores de nombre y dirección al usuario.

Una vez que realice los cambios anteriores y ejecute el programa en Visual Studio, verá el siguiente resultado

Salida:-

1. Primero, ingrese un valor en el campo de nombre y dirección.
2. Luego haga clic en el botón Enviar

Una vez que haga clic en el botón Enviar, aparecerá un cuadro de mensaje y le mostrará correctamente lo que ingresó en la sección de detalles del usuario.

Control de árbol y PictureBox

Hay 2 controles adicionales que podemos ver, uno es el 'Control de árbol' y el otro es el 'Control de imagen'. Veamos ejemplos de cómo podemos implementar estos controles

Control de árboles

– El control de árbol se utiliza para enumerar elementos en forma de árbol. Probablemente el mejor ejemplo es cuando vemos el propio Explorador de Windows. La estructura de carpetas en el Explorador de Windows es como una estructura en forma de árbol.

Veamos cómo podemos implementar esto con un ejemplo que se muestra a continuación.

Paso 1) El primer paso es arrastrar el control Tree al Windows Form desde la caja de herramientas como se muestra a continuación

Paso 2) El siguiente paso es comenzar a agregar nodos a la colección de árboles para que pueda aparecer en el árbol en consecuencia. Primero, sigamos los pasos secundarios a continuación para agregar un nodo raíz a la colección de árboles.

1. Vaya a la caja de herramientas de propiedades para el control de vista de árbol. Haga clic en la propiedad del Nodo. Esto abrirá el editor de TreeNode
2. En el editor de TreeNode, haga clic en el botón Agregar raíz para agregar un nodo raíz a la colección de árboles.
3. A continuación, cambie el texto del nodo Raíz y proporcione el texto como Raíz y haga clic en el botón 'Aceptar'. Esto agregará el nodo raíz.

Paso 3) El siguiente paso es comenzar a agregar los nodos secundarios a la colección de árboles. Sigamos los pasos secundarios a continuación para agregar un nodo raíz secundario a la colección de árboles.

1. Primero, haga clic en el botón Agregar hijo. Esto le permitirá agregar nodos secundarios a la colección Tree.
2. Para cada nodo secundario, cambie la propiedad de texto. Siga repitiendo el paso anterior y este paso y agregue 2 nodos adicionales. Al final, tendrá 3 nodos como se muestra arriba, con el texto como Etiqueta, Botón y Casilla de verificación respectivamente.
3. Haga clic en el botón Aceptar

Una vez que haya realizado los cambios anteriores, verá el siguiente resultado.

Salida:-

Podrá ver la vista de árbol agregada al formulario. Cuando ejecuta la aplicación de formulario de Windows, puede expandir el nodo raíz y ver los nodos secundarios en la lista.

Control PictureBox

Este control se usa para agregar imágenes a Winforms C#. Veamos cómo podemos implementar esto con un ejemplo que se muestra a continuación.

Paso 1) El primer paso es arrastrar el control PictureBox a C# Windows Form desde la caja de herramientas como se muestra a continuación

Paso 2) El siguiente paso es adjuntar una imagen al control del cuadro de imagen. Esto se puede hacer siguiendo los pasos a continuación.

1. Primero, haga clic en la propiedad Imagen del control PictureBox. Aparecerá una nueva ventana.
2. En esta ventana, haga clic en el botón Importar. Esto se usará para adjuntar una imagen al control de cuadro de imagen.
3. Aparecerá un cuadro de diálogo en el que podrá elegir la imagen para adjuntar al cuadro de imagen
4. Haga clic en el botón Aceptar

Una vez que realice los cambios anteriores, verá el siguiente resultado

Salida:-

Desde el resultado, puede ver que se muestra una imagen en el formulario.

Resumen

• Una aplicación Windows Form en C# es una que se ejecuta en el escritorio de una computadora. Se puede usar Visual Studio Form junto con C# para crear una aplicación de Windows Forms.
• Se pueden agregar controles a los formularios de Windows C# a través de Toolbox en Visual Studio. Se pueden agregar controles como etiquetas, casillas de verificación, botones de radio, etc. al formulario a través de la caja de herramientas.
• También se pueden usar controles avanzados como el control de vista de árbol y el control PictureBox.
• Los controladores de eventos se utilizan para responder a eventos generados a partir de controles. El más común es el que se agrega para el evento de clic de botón.