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 la Web.
Una aplicación de Windows Forms es una aplicación diseñada para ejecutarse en una computadora. No se ejecutará en el navegador web porque luego 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 # de Windows.
En este tutorial de Windows, aprenderá:
- Conceptos básicos de Windows Forms
- Hola mundo en formularios Windows Forms
- Agregar controles a un formulario
- Manejo de eventos para controles
- Control de árbol y cuadro de imagen
Conceptos básicos de Windows Forms
Una aplicación de formularios de Windows 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 de formulario de Windows simple C #. 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
- Se trata de una colección de controles de etiquetas que se utilizan normalmente 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.
- Los 2 cuadros de texto se utilizan para contener el nombre de usuario y la contraseña que ingresará el usuario.
- 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 validar el 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 que se mencionan 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.
- 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.
- Cuando hacemos clic en las opciones de Windows en el paso anterior, podremos ver una opción para la Aplicación de Windows Forms. Haga clic en esta opción.
- Daremos un nombre para la aplicación. En nuestro caso, es DemoApplication. También proporcionaremos una ubicación para almacenar nuestra aplicación.
- 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.
Producción:-
Verá un Diseñador de formularios en Visual Studio. Es en este Diseñador de formularios donde comenzará a crear su aplicación 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
- Una aplicación de formulario llamada Forms1.cs. Este archivo contendrá todo el código de la aplicación Windows Form.
- 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 en su conjunto.
En el lado izquierdo de Visual Studio, también verá un cuadro 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, ahora agregaremos una etiqueta al formulario que mostrará "Hola mundo". Desde 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 'Hola mundo'.
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 etiqueta, 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
Producción:-
En la salida, puede ver que se muestra el formulario de Windows. También puede ver que se muestra 'Hola mundo' 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 "Hola mundo".
Veamos los otros controles disponibles para formularios de Windows y veamos algunas de sus propiedades comunes.
En nuestra aplicación de formularios de Windows en ejemplos de C #, crearemos un formulario que tendrá la siguiente funcionalidad.
- La capacidad del usuario para ingresar nombre y dirección.
- Una opción para elegir la ciudad en la que reside el usuario.
- La capacidad del usuario para ingresar una opción para el género.
- Una opción para elegir un curso que el usuario quiera aprender. Habrá opciones para C # y ASP.Net
Así que veamos cada control en detalle y agreguemos para construir el formulario con la funcionalidad mencionada anteriormente.
Cuadro de grupo
Un cuadro de grupo se utiliza para agrupar lógicamente los controles 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 del formulario. Para ello, puede disponer de 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 formulario de Windows 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
Producción:-
En el resultado, puede ver claramente que el cuadro de grupo 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 etiquetas se usa normalmente junto con otros controles. Los ejemplos comunes son aquellos en los que se agrega una etiqueta junto con el control del cuadro de texto.
La etiqueta indica al usuario lo que se espera que se complete 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 que se llamará '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 al formulario de Windows 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 agregada 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 Text de cada control de etiqueta.
Una vez que realice los cambios anteriores, verá el siguiente resultado
Producción:-
Puede ver los controles de etiqueta agregados al formulario.
Caja de texto
Un cuadro de texto se utiliza para permitir que un usuario ingrese 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 el otro para la dirección que debe ingresar el usuario
Paso 1) El primer paso es arrastrar el control del cuadro de texto al formulario de Windows 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 del usuario como txtUser 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
Producción:-
En la salida, 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 al formulario de Windows 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.
- Primero, cambie la propiedad del control Listbox box, en nuestro caso, lo hemos cambiado a lstCity
- 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 elementos de "colección".
- En el Editor de colección de cadenas, que aparece, ingrese los nombres de las ciudades. En nuestro caso, hemos introducido "Mumbai", "Bangalore" y "Hyderabad".
- Finalmente, haga clic en el botón 'Aceptar'.
Una vez que realice los cambios anteriores, verá el siguiente resultado
Producción:-
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 llenado con los valores de la ciudad.
Boton de radio
Un botón de radio se utiliza para mostrar una lista de elementos entre 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 'botón de radio' al formulario de Windows desde la caja de herramientas como se muestra a continuación.
Paso 2) Una vez que se haya agregado el botón de radio, vaya a la ventana de propiedades haciendo clic en el control del botón de radio.
- Primero, debe cambiar la propiedad de texto de ambos controles de radio. Vaya a las ventanas de propiedades y cambie el texto a masculino de un botón de radio y el texto del otro a femenino.
- 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 radio y a 'rdfemale' para el otro.
Una vez que realice los cambios anteriores, verá el siguiente resultado
Producción:-
Verá los botones de opción agregados al formulario de Windows.
Caja
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 proporcionarán una opción al usuario sobre si desea aprender C # o ASP.Net.
Paso 1) El primer paso es arrastrar el control de la casilla de verificación al formulario de Windows 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 de la casilla de verificación.
En la ventana de propiedades,
- 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.
- 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
Producción:-
Botón
Un botón se utiliza para permitir al usuario hacer 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 al formulario de Windows 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 del botón.
- Primero, debe cambiar la propiedad de texto del control de botón. Vaya a las ventanas de propiedades y cambie el texto a 'enviar'.
- 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
Producción:-
Felicidades, ahora tiene su primer formulario básico de Windows Form en su lugar. Pasemos ahora al tema siguiente para ver cómo podemos hacer el manejo de eventos para los controles.
Manejo de eventos de C # para controles
Al trabajar con Windows Forms, 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. Por lo tanto, cada vez que se selecciona un elemento en el control de cuadro de lista, debería aparecer un cuadro de mensaje que muestra el elemento seleccionado. Realicemos los siguientes pasos para lograrlo.
Paso 1) Haga doble clic en el cuadro de lista del 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á siempre que se seleccione cualquier elemento del cuadro de lista.
Arriba está el fragmento de código que Visual Studio agrega automáticamente, cuando hace doble clic en el control 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 de cuadro de lista.
- Este es el método de controlador de eventos que Visual Studio crea automáticamente cuando hace doble clic en el control Cuadro de lista. No necesita preocuparse por la complejidad del nombre del método o los parámetros pasados al método.
- Aquí obtenemos SelectedItem 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.
- 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
Producción:-
En la salida, puede ver que cuando se selecciona cualquier elemento del cuadro de lista, aparece un cuadro de mensaje. Esto mostrará el elemento seleccionado del cuadro de lista.
Ahora veamos el control final que es el método de hacer clic en el botón. De nuevo, 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.
- 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.
- Aquí estamos obteniendo 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.
- Finalmente, usamos el método MessageBox para mostrar el nombre y los valores de dirección al usuario.
Una vez que realice los cambios anteriores y ejecute el programa en Visual Studio, verá el siguiente resultado
Producción:-
- Primero, ingrese un valor en el campo de nombre y dirección.
- 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 cuadro de imagen
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 Árbol al formulario de Windows 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 del árbol 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.
- 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
- 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.
- 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 siguientes subpasos para agregar el nodo raíz secundario a la colección de árboles.
- Primero, haga clic en el botón Agregar hijo. Esto le permitirá agregar nodos secundarios a la colección Tree.
- Para cada nodo hijo, cambie la propiedad del texto. Continúe 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.
- Haga clic en el botón Aceptar
Una vez que haya realizado los cambios anteriores, verá el siguiente resultado.
Producción:-
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 al formulario de Windows C # desde la caja de herramientas como se muestra a continuación
Paso 2) El siguiente paso es adjuntar una imagen al control de cuadro de imagen. Esto se puede hacer siguiendo los pasos a continuación.
- Primero, haga clic en la propiedad Image del control PictureBox. Aparecerá una nueva ventana.
- En esta ventana, haga clic en el botón Importar. Esto se utilizará para adjuntar una imagen al control de cuadro de imagen.
- Aparecerá un cuadro de diálogo en el que podrá elegir la imagen para adjuntar el cuadro de imagen
- Haga clic en el botón Aceptar
Una vez que realice los cambios anteriores, verá el siguiente resultado
Producción:-
En la salida, puede ver que se muestra una imagen en el formulario.
Resumen
- Una aplicación de Windows Forms en C # es aquella que se ejecuta en el escritorio de una computadora. Visual Studio Form junto con C # se puede usar para crear una aplicación de Windows Forms.
- Los controles se pueden agregar a los formularios de Windows C # a través de la Caja de herramientas en Visual Studio. Los controles como etiquetas, casillas de verificación, botones de radio, etc. se pueden agregar al formulario a través de la caja de herramientas.
- También se pueden utilizar 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 agregado para el evento en el que se hizo clic en el botón.
