Windows Forms Paso a Paso

Ejemplo 1 de Desarrollo de aplicaciones de escritorio con Windows Forms

Links para acceder a los otros ejemplos: Ejemplo 1, Ejemplo 2, Ejemplo 3

En este ejemplo, veremos cómo construir una aplicación para escritorio usando Windows Forms.

Para crear este ejemplo, iniciaremos el Visual Studio .NET y crearemos una aplicación de Windows usando el lenguaje de programación C#, por tanto empezaremos cargando el IDE de Visual Studio .NET y seleccionaremos este tipo de aplicación, veamos los pasos a seguir para conseguir nuestro objetivo:

1- Iniciamos el Visual Studio .NET

2- En el menú de Archivo, seleccionamos Nuevo... y del menú mostrado, seleccionaremos Proyecto... (también podemos usar el acceso rápido Ctrl+N)

3- Se mostrará un cuadro de diálogo como el mostrado en la figura 1:

Figura 1: Nuevo proyecto de Aplicación de Windows (C#)

4- En el nombre indicaremos: Ejemplo1, tal como se muestra en la figura anterior. Ese será el nombre que Visual Studio .NET utilizará como nombre del ejecutable.

5- Cada vez que creamos un nuevo proyecto de aplicación para Windows, el entorno de desarrollo (IDE) añade un nuevo formulario, el cual, por defecto, tendrá el nombre Form1. Para este ejemplo, vamos a dejar el nombre indicado, en otra ocasión veremos lo que tendremos que hacer para cambiar el nombre asignado de forma predeterminada por el entorno de desarrollo, y utilizar el que deseemos.

6- A este formulario vamos a añadirle una serie de controles con los que interactuaremos para aprender las características más básicas que usaremos en la mayoría de las aplicaciones de Windows Forms (aplicaciones de Windows). Estas mismas acciones serán las más comunes en la mayoría de las aplicaciones de .NET Framework: Los eventos o mensajes producidos por los controles.

7- Los controles que añadiremos serán: dos etiquetas (Label), una caja de textos (TextBox) y dos botones (Button).

8- Para añadir un nuevo control al formulario, tendremos que mostrar el cuadro de herramientas situado, de forma predeterminada, en la parte izquierda del entorno de desarrollo. Si no lo tuviéramos visible podemos mostrarlo pulsando la combinación de teclas: Ctrl+Alt+X o bien seleccionando Cuadro de herramientas del menú Ver.

9- Seleccionaremos la ficha Windows Forms y de los controles mostrados, haremos doble pulsación (doble-click) en el icono del control que queremos añadir, en esta ocasión empezaremos por un control de tipo Label.

10- A continuación añadiremos un control TextBox el cual posicionaremos junto a la etiqueta añadida anteriormente.

11- Seguiremos añadiendo el resto de controles, para que el aspecto sea el mostrado en la figura 2:

Figura 2: El formulario en tiempo de diseño

12- Ahora vamos a asignar los valores a unas cuantas propiedades de los controles, para ello seleccionaremos el control que queremos modificar y mostraremos la ventana de Propiedades, si no la tenemos visible, pulsaremos F4.

13- Empezaremos por la primera de las etiquetas, (label1), por tanto, la seleccionaremos y pulsaremos F4, de forma predeterminada el cursor estará en la propiedad Text, en ella escribiremos el texto a mostrar en esa etiqueta, en esta ocasión será: Saludo; tal como podemos ver en la figura 3:

Figura 3: La ventana de propiedades

14- Seguiremos asignando el texto del botón que está junto a la caja de textos (button1) y lo cambiaremos a Saludar.

15- Haremos lo mismo con el otro botón (button2), al que asignaremos el texto Cerrar.

16- Para que los controles se adapten al tamaño del formulario, vamos a asignar la propiedad Anchor de los mismos, de forma que tengan los siguientes valores:

Control	Valor de Anchor	Comentarios
label1	Top, Left	Valores predeterminados
textBox1	Top, Left, Right	Para que se adapte al ancho del formulario
button1	Top, Right	Para anclarlo a la derecha
label2	Top, Bottom, Left, Right	Para que se adapte al ancho y alto
button2	Bottom, Right	Para anclarlo en la esquina inferior derecha

17- Una vez asignados estos valores, si cambiamos el tamaño del formulario, comprobaremos que los controles se adaptan al tamaño del mismo.

18- Lo siguiente que haremos será asignar los eventos que vamos a interceptar, en este caso sólo interceptaremos la pulsación (click) de los dos botones.

19- Para escribir el código correspondiente al evento Click, podemos hacerlo de dos formas diferentes, pero la más sencilla (y válida tanto para C# como para Visual Basic .NET) es hacer doble pulsación sobre el botón, de esa forma se mostrará la ventana de código con la "plantilla" del procedimiento de evento.

20- En el caso de que estemos usando C# (como es el caso de este ejemplo), podemos asignar el evento de la siguiente forma:

- Seleccionamos el control, (por ejemplo button1),
- mostramos la ventana de propiedades (pulsa F4 si no está visible),
- seleccionamos el símbolo del rayo amarillo, (ver la figura 4),
- de forma predeterminada estará seleccionado el evento Click, (si no lo estuviera, habría que seleccionarlo),
- hacemos doble pulsación y se mostrará la "plantilla" del código.

Nota:
Si quisiéramos capturar otro evento, simplemente habría que seleccionarlo y hacer doble pulsación.

Figura 4: Los eventos de los controles en C#

21- Además de la plantilla del método (o función) que será llamado cuando se produzca el evento, en el caso de C#, también se creará una asignación para indicar cual es el manejador (handler) de dicho evento.

A continuación se muestra el código para asignar el método que se usará para interceptar el evento, así como el código a ejecutar cuando éste se produzca; en este caso, lo que hacemos es mostrar en la etiqueta label2 un saludo usando el contenido de la caja de textos.

this.button1.Click += new System.EventHandler(this.button1_Click);


private void button1_Click(object sender, System.EventArgs e)
{
    label2.Text = "Hola, " + textBox1.Text;
}

22- Debido a que C# tiene en cuenta la diferencia entre mayúsculas y minúsculas, podemos usar "this" para no cometer errores tipográficos, en la siguiente figura, vemos cómo al escribir this seguida de un punto, se muestran las propiedades, métodos y controles que pertenecen al formulario, ya que this representa a la clase actual.

Figura 5: Usar Intellisense para ver los miembros de una clase.

23- Por último, crearemos el código para interceptar el evento Click del segundo botón, (button2), de forma que cuando se procese, cerremos el formulario y de paso se termine la ejecución del programa.

El código sería el siguiente:

private void button2_Click(object sender, System.EventArgs e)
{
    this.Close();
}

24- Ahora podemos comprobar que todo funciona bien, para ello, pulsaremos F5 para que se compile y ejecute el proyecto.

 

---

 

Ejercicio:

A continuación te propongo un pequeño ejercicio, el cual consiste en interceptar el evento predeterminado de las cajas de texto: TextChanged, de forma que se muestre en la etiqueta (label2) el contenido de la caja de textos (textBox1) cada vez que se produzca dicho evento o lo que es lo mismo: cada vez que cambie el contenido de la caja de textos.

Pulsa en este link para ver la solución y la explicación de los pasos a seguir para crear el "manejador" del evento TextChanged del control textBox1.

Índice de ejemplos del University Tour 2003-2004