5.1 Capítulo 5: Windows Forms
Capítulo 5 Windows Forms
Uno de los principales objetivos de la educación debe ser ampliar las ventanas por las cuales vemos al mundo
La caridad es un deber; la elección de la forma, un derecho.
Tabla de Contenido Windows Forms ....................................................................................................................... 5.2
Creación de Proyectos ............................................................................................................. 5.4
El espacio de nombres System.Windows.Forms ...................................................................... 5.6
Insertando controles dentro de la forma ................................................................................... 5.7
Inserción de Código ............................................................................................................... 5.10
Caja de Mensajes (MessageBox)........................................................................................... 5.16
Caja de Selección .................................................................................................................. 5.23
Visor de Imágenes y Enlaces ................................................................................................. 5.26
Web Browser y Creación de Menús ....................................................................................... 5.30
Formas que llaman a otras formas ......................................................................................... 5.33
Creación de Propiedades en una Clase ............................................................................. 5.36
Matrices en dataGridView ................................................................................................... 5.38
Creación de Menús ............................................................................................................ 5.40
5.2 Capítulo 5: Windows Forms
Windows Forms
Windows Forms es una de las dos tecnologías que se utiliza en Visual C# para crear
aplicaciones cliente inteligentes basadas en Windows que se ejecutan en .NET Framework.
Windows Forms es especialmente adecuado para escenarios de desarrollo rápido de
aplicaciones donde la prioridad principal no es una interfaz gráfica de usuario compleja. El
Diseñador de Windows Forms se utiliza para crear la interfaz de usuario, y permite obtener
acceso a otras características de diseño y ejecución, tales como las siguientes:
Implementación ClickOnce.
Uso avanzado de bases de datos mediante DataGridView (Control, formularios
Windows Forms).
Barras de herramientas y otros elementos de interfaz de usuario que pueden tener el
aspecto y el comportamiento de Microsoft Windows XP, Microsoft Office o Microsoft
Internet Explorer.
En Visual C#, podemos utilizar el Diseñador de Windows Forms o el Diseñador de Windows
Presentation Foundation (WPF) para crear interfaces de usuario de forma rápida y cómoda.
Los tres pasos básicos para crear interfaces de usuario son:
1. Agregar los controles a la superficie de diseño.
2. Establecer las propiedades iniciales de los controles.
3. Escribir los controladores para los eventos especificados.
Agregar controles
En cualquiera de los diseñadores se utiliza el mouse para arrastrar controles, que son los
componentes con representación visual, como botones y cuadros de texto, hasta una superficie
de diseño
A medida que se trabaja visualmente, el Diseñador de Windows Forms traduce las acciones en
código fuente de C# y las escribe en un archivo de proyecto llamado nombre.designer.cs donde
nombre es el nombre asignado al formulario. De igual forma, WPF Designer traduce las
acciones de la superficie de diseño a código de lenguaje de marcado de aplicaciones
extensible (XAML) y lo escribe en un archivo de proyecto que se denomina Window.xaml.
Cuando se ejecuta la aplicación, ese código fuente (Windows Forms) o código XAML (WPF)
ajustará la posición y el tamaño de los elementos de la interfaz de usuario de modo que
aparezcan como en la superficie de diseño.
Establecer propiedades
Después de agregar un control a la superficie de diseño, podemos utilizar la ventana
Propiedades para establecer sus propiedades, como son el color de fondo y el texto
predeterminado.
5.3 Capítulo 5: Windows Forms
En el Diseñador de Windows Forms, los valores que especifique en la ventana Propiedades
son los valores iniciales que se asignarán a la propiedad cuando se cree el control en tiempo
de ejecución. En el Diseñador de WPF, los valores que especifique en la ventana Propiedades
se almacenan como atributos en el archivo XAML de la ventana.
En muchos casos, se puede tener acceso a estos valores o modificarlos mediante
programación en tiempo de ejecución; para ello, basta con obtener o establecer desde la
aplicación la propiedad para la instancia de la clase del control. La ventana Propiedades
resulta útil en tiempo de diseño porque permite examinar todas las propiedades, eventos y
métodos que admite un control.
Controlar eventos
Los programas con interfaces de usuario gráficas son principalmente controlados por eventos.
Estos programas esperan a que un usuario haga algo, como escribir texto en un cuadro de
texto, hacer clic en un botón o cambiar la selección de un cuadro de lista. Cuando esto sucede,
el control, que es simplemente una instancia de una clase de .NET Framework, envía un
evento a la aplicación. Tiene la opción de controlar un evento escribiendo un método especial
en la aplicación al que se llamará cuando se reciba el evento.
Podemos utilizar la ventana Propiedades para especificar qué eventos desea tratar en el
código. Si seleccionamos un control en el diseñador y hacemos clic con el icono Rayo en el
botón Eventos de la barra de herramientas de la ventana Propiedades para ver los eventos del
control. El icono siguiente muestra el botón de eventos.
Al agregar un controlador de evento desde la ventana Propiedades, el diseñador escribe
automáticamente el cuerpo del método vacío. Debemos escribir el código de manera que el
método haga algo útil. La mayoría de los controles generan muchos eventos, pero
normalmente una aplicación sólo tendrá que tratar algunos de ellos o incluso sólo uno.
5.4 Capítulo 5: Windows Forms
Creación de Proyectos
Para abrir Visual C# Express Edition 2008 ejecutamos el programa directamente o con los
acceso directos.
5.5 Capítulo 5: Windows Forms
Automáticamente nos aparece la siguiente pantalla:
El entorno de desarrollo de Visual C# podrá ser diferente al
mostrado en la pantalla superior para modificar el entorno nos
podemos ir al menú Ver y agregamos los elementos que
necesitemos, por ejemplo uno elementos imprescindible es el
Cuadro de Herramientas, podemos seleccionar para visualizarlo
como se muestra en la pantalla de la izquierda o también dar clic
en el botón de la barra de herramientas o con las teclas de acceso
rápido que serian Ctrl+W, X.
En el cuadro de herramientas
tenemos tres opciones desde
cerrar para desaparecer el
cuadro, ocultar automáticamente
o colocarla flotante, acoplable,
etc.
5.6 Capítulo 5: Windows Forms
El espacio de nombres System.Windows.Forms
El espacio de nombres (namespace) System.Windows.Forms contiene clases para crear
aplicaciones basadas en ventanas que toman ventaja completa de las características de una
interfaz de usuario disponibles en el sistema operativo Windows de Microsoft.
La siguiente tabla muestra las clases en este espacio de nombres agrupadas en categorías.
Categoría de la clase Detalles
Control, Control de usuario y Forma
La mayoría de las clases dentro de este espacio de nombres derivan de la clase Control. La clase Control provee la funcionalidad básica para todos los controles que se despliegan en una forma. La clase Form representa una ventana en una aplicación. Esta incluye cajas de dialogo, ventanas modales e Interfaces de Múltiple Documento. También se pueden crear controles propios de usuario derivándolos de la clase UserControl.
Menús y Toolbars
Las Formas contienen un conjunto muy rico de clases para crear sus propias barras de herramientas y menús con apariencia moderna y comportamiento. ToolStrip, MenuStrip, ContextMenuStrip y StatusStrip se pueden usar para crear barras de herramientas, barras de menú, menús de contexto y barras de status respectivamente.
Controles
Este espacio de nombres provee una variedad de clases control que se pueden usar para crear interfaces de usuario como TextBox, ComboBox, Label, ListView, Button, WebBrowser, HtmlDocument, MaskedTextBox y PropertyGrid.
Layout Algunas clases ayudad a controlar la distribución de una superficie de despliegue como: FlowLayoutPanel, TableLayoutPanel y SplitContainer.
Data y Data Binding
Las formas Windows definen una arquitectura ideal para ligarlas a fuentes de datos tales como bases de datos y archivos XML, estos controles son: DataGridView, BindingNavigator, BindingSource
Componentes
Además de controles este espacio de nombres provee otras clases que no derivan de la clase Control pero que proveen características visuales a una aplicación Windows. Tales clases como ToolTip y ErrorProvider proveen información al usuario así también las clases Help y HelpProvider.
Cajas de Diálogos comunes
Windows provee cajas de dialogo con propósitos especiales como son OpenFileDialog, SaveFileDialog, FontDialog, PageSetupDialog, PrintPreviewDialog y PrintDialog. Este espacio de nombres provee la clase MessageBox para desplegar una caja de mensaje que puede desplegar y obtener datos del usuario.
Menús y Toolbars Las Formas contienen un conjunto muy rico de clases para crear sus propias barras de herramientas y menús con apariencia moderna y comportamiento. ToolStrip,
5.7 Capítulo 5: Windows Forms
Hay algunas clases dentro de System.Windows.Forms que proveen soporte a las clases
mencionadas arriba. Ejemplos son: enumeraciones, clases argumento evento y delegados
usados por eventos dentro de controles y componentes.
Insertando controles dentro de la forma
Una ventana muy útil es la ventana de propiedades si no la tenemos disponible nos vamos al
menú Ver → Ventana Propiedades esta nos muestra la propiedad de cualquier control, por
ejemplo un botón, cuadro de texto, etiqueta.
Vamos a modificar las propiedades de la forma Form1 en primer lugar la seleccionamos y nos
vamos a la ventana de propiedades, aquí vemos en la parte superior el recuadro con el
siguiente texto: Form1 System.Windows.Forms.Form al final contiene una flecha hacia abajo
en ella podemos seleccionar los diferente elementos y modificar sus propiedades, en este
momento no tenemos ningún otro elemento solo la forma.
Seleccionamos la forma, haciendo clic sobre ella en la ventana Propiedades es posible
modificar las propiedades de la misma vamos a modificar el titulo de la ventana que por default
es Form1 a Multiplica para ello nos vamos a Apariencia → Text y escribimos
Multiplica como se muestra en la siguiente pantalla.
MenuStrip, ContextMenuStrip y StatusStrip se pueden usar para crear barras de herramientas, barras de menú, menús de contexto y barras de status respectivamente.
5.8 Capítulo 5: Windows Forms
Algunas propiedades tienen un botón a la izquierda con un signo + lo cual indica que estas
propiedades se componen de varias partes, por ejemplo en Font aparece el símbolo de mas
porque es posible cambiar el tipo de letra.
Podemos expandir en el cuadro de herramientas que
necesitemos, por ejemplo si expandimos la opción de
Controles comunes dando clic en el símbolo de más.
Las componentes están acomodadas por funcionalidad y en
forma alfabética.
Si deseamos insertar algún control a la forma simplemente lo
seleccionamos y lo arrastramos en el interior de la forma en la
posición que queramos, posteriormente podemos mover el
control dentro de la forma, cambiar las propiedades, posición
tamaño, nombre, color, etc. Vamos a insertar en la forma dos
etiquetas , tres cajas de texto y un botón
.
El objetivo de las etiquetas es proveer de los elementos
necesarios para ingresar dos números y efectuar la
multiplicación mostrando el resultado.
Por default Visual C# asigna los nombres a las etiquetas como label1, label2, button1,
textBox1, etc. Desde la ventana propiedades podemos modificar el nombre y las
características de la ventana. En la imagen siguiente se muestra el procedimiento a seguir para
cambiar las propiedades de cualquier elemento, en particular, la imagen se refiere al cambio
de propiedades del control button1.
Otra forma de ver las propiedades es seleccionar cualquier control damos clic con el botón
derecho en la opción Propiedades y automáticamente nos muestra las propiedades de dicho
control, esto se ilustra en la siguiente figura:
5.9 Capítulo 5: Windows Forms
Las figuras siguientes muestran ambas formas antes y después de ser modificadas.
5.10 Capítulo 5: Windows Forms
Inserción de Código
Antes de describir como insertar código
en nuestra aplicación es muy
importante identificar el nombre de cada
uno de los controles, en la imagen se
identifican cada uno de ellos, dichos
nombres los asigna automáticamente
Visual C# al insertar cada control, es
posible cambiar el nombre de cada uno
de ellos, al seleccionarlo y en la
ventana de Propiedades, apartado
Diseño campo (Name) modificar el
nombre , en nuestro ejemplo vamos a
dejar intactos cada nombre de los
controles utilizados esto facilita la
programación de nuestra aplicación
pues es más fácil identificar los
elementos. Un error común es confundir
esta propiedad con Text en el apartado
Apariencia cambiamos button1 por Multiplicar, esto debido a que inicialmente Visual C#
asigna el mismo nombre en ambas propiedades, pero uno es como se observa en la ventana
dentro de la forma y la propiedad (Name) en Diseño es como lo identifica Visual C# al
momento de programar.
5.11 Capítulo 5: Windows Forms
Para insertar código es importante identificar la utilidad de cada control insertado como se describe en la siguiente tabla.
En la columna Control (Apariencia) aparece ---------- significa que no aplica, es decir
no se modificó la propiedad.
Si analizamos nuestros elementos, el control que efectuará la Multiplicación es button1 por lo
tanto para insertar código damos doble clic sobre él y nos trasladara de Form1.cs (Diseño)
que digamos es la parte gráfica a la ventana Form1.cs que básicamente sería el código de
nuestra aplicación.
El código que se inserta aparece encerrado en el rectángulo, vemos que el método se llama
button1_Click que nos indica que realizará cuando demos doble clic sobre el botón.
Veamos que realiza cada línea.
Control (Diseño) Control (Apariencia) Objetivo
label1 Operador 1 Mostrar un texto que ayude al usuario a identificar que dato debemos introducir.
textBox1 ---------- Recibir un número .
label2 Operador 2 Mostrar un texto que ayude al usuario a identificar que dato debemos introducir.
textBox2 ---------- Recibir otro número.
button1 Multiplicar Dar clic en el botón para realizar la multiplicación de los datos introducidos en textBox1 y textBox2
textBox3 ---------- Mostrar el resultado de la multiplicación.
5.12 Capítulo 5: Windows Forms
En la línea 51 double ct1, ct2; declaramos dos variable de tipo doublé esto llamadas ct1 y
ct2 para hacer referencia a cuadro de texto 1 y 2, el tipo es para que podamos multiplicar
cualquier tipo de número y no solo enteros.
ct1 = Convert.ToDouble(textBox1.Text); línea 53 extrae la entrada del usuario de
textBox1 y lo convierte a doble esto debido a que por default la entradas las maneja como
cadena y el valor se lo asignamos a ct1.En la línea 54 es similar pero para el cuadro de texto
dos.
En textBox3 es donde mostramos el resultado de la multiplicación, para dar formato
escribimos {0:F2} el cero significa que es el primer argumento, la letra F que vamos a
imprimir un valor de tipo doble y el número 2 permite imprimir el resultado con dos decimales. Y
multiplicamos los valores ct1*ct2 que es el resultado que aparecerá en textBox3.
En la línea 56 String.Format La clase String dispone del método Format que nos permite
formatear una expresión.
Podemos copiar el código aquí:
Multiplica.cs // código que debemos insertar en el método button1_Click private void button1_Click(object sender, EventArgs e) { double ct1, ct2; // extrae la entrada del usuario ct1 = Convert.ToDouble(textBox1.Text); ct2 = Convert.ToDouble(textBox2.Text); // muestra el resultado textBox3.Text =String.Format("{0:F2}", ct1*ct2); }
Para ejecutar el programa presionamos la tecla F5 o en el menú Depurar damos clic en
Iniciar depuración.
5.13 Capítulo 5: Windows Forms
Una tercera opción es dar clic en el botón que aparece en la barra de herramientas.
La pantalla muestra un ejemplo de la ejecución del
programa. Observamos que efectivamente el resultado lo
muestra con dos decimales.
Un código más elaborado que mostraría exactamente
el mismo funcionamiento de nuestra aplicación sería:
Multiplica.cs // código que debemos insertar en el método button1_Click private void button1_Click(object sender, EventArgs e) { double ct1, ct2, m; string r; // extrae la entrada del usuario ct1 = Convert.ToDouble(textBox1.Text); ct2 = Convert.ToDouble(textBox2.Text); m = ct1 * ct2; r = (String.Format("{0:F2}", m)); textBox3.Text = r;// muestra el resultado
}
5.14 Capítulo 5: Windows Forms
Insertamos la variable string r y le asignamos el resultado antes de asignarla a
textBox3.Text, también declaramos otra variable de tipo doublé llamada m, este código tiene
más líneas que el anterior, pero podría ser más claro.
Vamos a insertar dos controles de tipo botón, el primero para limpiar los campos y el otro para
salir de la aplicación como se muestra en la siguiente figura:
Mostramos el código sombreado en color amarillo, para el botón 2, que nos sirve para limpiar
los campos de las tres cajas de texto, después de realizar un cálculo podemos limpiar el campo
con este botón.
private void button2_Click(object sender, EventArgs e) { textBox1.Text = ""; textBox2.Text = ""; textBox3.Text = ""; }
5.15 Capítulo 5: Windows Forms
Para salir de la aplicación simplemente escribimos Close();, veamos el código insertado:
private void button3_Click(object sender, EventArgs e) { Close(); }
Veamos ahora un segundo ejercicio, crearemos un convertidor de temperaturas de grados
Centígrados a grados Fahrenheit, y viceversa, el usuario tiene la opción de elegir en qué
sentido desea realizar la conversión, la siguiente figura muestra los controles insertados en la
forma.
Ejemplo de la ejecución:
Del lado izquierdo convierte de C a F y del lado derecho convierte de F a C
El código insertado para convertir de C a F es:
private void button1_Click(object sender, EventArgs e) { double gfarenheit, ct1; ct1 = Convert.ToDouble(textBox1.Text); gfarenheit = ct1 * 1.8 + 32.0; textBox2.Text = String.Format("{0:F3}", gfarenheit); }
El código insertado para convertir de F a C es:
5.16 Capítulo 5: Windows Forms
private void button2_Click(object sender, EventArgs e) { double gcentigrados, ct1; ct1 = Convert.ToDouble(textBox1.Text); gcentigrados = (ct1 - 32.0)/1.8; textBox2.Text = String.Format("{0:F3}", gcentigrados); }
El código para los botones de Limpiar y Salir, son identicos al del ejemplo Multiplica.
Caja de Mensajes (MessageBox)
Vamos a estudiar el método Show de la clase MessageBox. Dicho método es polimorfo y
puede mandarse llamar de 21 diferente maneras. La que veremos aquí tiene la forma:
DialogResult MessageBox.Show(string text, string caption, MessageBoxButtons buttons, MessageBoxIcon icon);
La primera cadena (text), se despliega como mensaje en una caja de dialogo.
La segunda cadena (caption), se despliega como título de la caja de dialogo o ventana
buttons es un elemento de la enumeración MessageBoxButtons que puede tomar uno de seis
diferentes valores y que dependiendo de ello mostrará 1, 2 o 3 botones en la caja de dialogo:
OK OKCancel YesNo YesNoCancel RetryCancel AbortRetryIgnore
icon es un elemento de la enumeración MessageBoxIcon que puede tomar uno de cuatro
diferentes valores y que dependiendo de ello mostrará el icono correspondiente:
Information Exclamation Question Error
5.17 Capítulo 5: Windows Forms
Este método Show de MessageBox siempre nos regresará un resultado del tipo DialogResult y
éste dependerá del botón que oprimamos al cerrar el dialogo de Mensaje. DialogResult es
una enumeración que tiene los siguientes valores:
DialogResult.OK DialogResult.Cancel DialogResult.Yes DialogResult.No DialogResult.Ignore DialogResult.Abort DialogResult.Retry
Crearemos un nuevo proyecto al que llamaremos MessageBoxes. En la forma Form1 generada, depositaremos:
2 Etiquetas (Label)
2 Cajas de agrupamiento (GroupBox)
1 Botón (Button)
10 Botones de radio (RadioButton)
Nuestra forma quedaría de la siguiente manera:
5.18 Capítulo 5: Windows Forms
Cambiemos las propiedades según se muestra en la siguiente tabla, la propiedad Name de cada elemento no se cambia:
De tal manera que nuestra forma quedaría así:
Componente Propiedad Valor
Form1 Text Ejemplos MessageBox
label1 Text Elige el MessageBox para visualizarlo
label2 Name Text
label2 == nada ==
button1 Text Visualizar
groupBox1 Text Tipo de botón
groupBox2 Text Tipo de icono
radioButton1 Text Checked
OK True
radioButton2 Text OK Cancel
radioButton3 Text Yes No
radioButton4 Text Yes No Cancel radioButton5 Text Retry Cancel
radioButton6 Text Abort Retry Cancel
radioButton7 Text Checked
Information True
radioButton8 Text Exclamation radioButton9 Text Question
radioButton10 Text Error
5.19 Capítulo 5: Windows Forms
Ahora programemos el evento para que se genere un cambio en la sección Tipo de Botón del
lado izquierdo, teniendo seleccionado el radioButton1 con etiqueta OK, hagamos clic en el
botón que tiene un rayo en la ventana de propiedades (para seleccionar eventos) y
seleccionemos CheckedChange, a la derecha escribamos como nombre para el método que se
va a ejecutar cuando este evento se lleve a cabo, tipoDeBoton_CheckedChange, hagamos lo
mismo para los otros cinco radioButtons restantes seleccionando siempre el mismo método.
Lo que sigue es agregar una variable privada a la clase y lo hacemos antes del constructor:
private MessageBoxButtons tipoDeBoton = MessageBoxButtons.OK;
5.20 Capítulo 5: Windows Forms
Luego insertemos el siguiente código para el método tipoDeBoton_CheckedChanged
private void tipoDeBoton_CheckedChanged(object sender, EventArgs e) { if (sender == radioButton1) tipoDeBoton = MessageBoxButtons.OK; else if (sender == radioButton2) tipoDeBoton = MessageBoxButtons.OKCancel; else if (sender == radioButton3) tipoDeBoton = MessageBoxButtons.YesNo; else if (sender == radioButton4) tipoDeBoton = MessageBoxButtons.YesNoCancel; else if (sender == radioButton5) tipoDeBoton = MessageBoxButtons.RetryCancel; else tipoDeBoton = MessageBoxButtons.AbortRetryIgnore;
}
En el código anterior se investiga cual de los radioButtons (mediante sender) cambió su
estatus de desactivado a activado y se pone la variable tipoDeBoton con uno de los 6 posibles
valores que tiene la enumeración MessageBoxButtons.
Ahora programemos el evento de que se genere un cambio en la selección de los botones de la
derecha es decir en Tipo de Icono, teniendo seleccionado el radioButton7 con etiqueta
Information, hagamos clic en el botón que tiene un rayo en la ventana de propiedades (para
seleccionar eventos) y seleccionemos CheckedChange, a la derecha escribamos como nombre
para el método que se va a ejecutar cuando este evento se lleve a cabo,
tipoDeIcono_CheckedChanged, hagamos lo mismo para los tres radioButtons restantes
seleccionando siempre el mismo método.
5.21 Capítulo 5: Windows Forms
Lo que sigue es agregar una variable privada a la clase y lo hacemos también antes del
constructor:
private MessageBoxIcon tipoDeIcono = MessageBoxIcon.Error; Luego insertemos el siguiente código para el método tipoDeIcono_CheckedChanged
private void tipoDeIcono_CheckedChanged(object sender, EventArgs e) { if (sender == radioButton7) // display error icon tipoDeIcono = MessageBoxIcon.Information; else if (sender == radioButton8) tipoDeIcono = MessageBoxIcon.Exclamation; else if (sender == radioButton9) tipoDeIcono = MessageBoxIcon.Question; else // only one option left--display question mark tipoDeIcono = MessageBoxIcon.Error; }
Como en el primer método, se investiga cual de los radioButtons (mediante sender) cambió su
estatus de desactivado a activado y se pone la variable tipoDeIcono con uno de los cuatro
posibles valores que tiene la enumeración MessageBoxIcon.
Por último queremos programar el botón Mostrar para que al hacer clic sobre él se ejecute el
método button1_Click desplegando el MessageBox configurado con el valor que en su
momento tengan las variables tipoDeBoton y tipoDeIcono.
private void button1_Click(object sender, EventArgs e) { DialogResult result = MessageBox.Show("Mensaje a desplegar", "Título de la Ventana",
5.22 Capítulo 5: Windows Forms
tipoDeBoton, tipoDeIcono); switch (result) { case DialogResult.OK: label2.Text = "Seleccionó OK."; break; case DialogResult.Cancel: label2.Text = "Seleccionó Cancel."; break; case DialogResult.Yes: label2.Text = "Seleccionó Yes."; break; case DialogResult.No: label2.Text = "Seleccionó No."; break; case DialogResult.Ignore: label2.Text = "Seleccionó Ignore."; break; case DialogResult.Abort: label2.Text = "Seleccionó Abort."; break; case DialogResult.Retry: label2.Text = "Seleccionó Retry."; break; } }
El código fuente completo de nuestro proyecto puede consultarse en el apéndice 5: Caja de
Mensajes -- Form1.cs
A continuación dos ejecuciones de nuestro programa:
5.23 Capítulo 5: Windows Forms
Caja de Selección
Ahora crearemos un nuevo proyecto C# del tipo de Aplicación de Windows Forms, al que
llamaremos CajadeSeleccion.
A la forma principal Form1 agreguemos los siguientes controles:
4 Etiquetas (Label)
12 Cajas de selección (CheckBox)
2 Botones (Button)
En la etiqueta uno escribimos el texto UACM POO en C#, las otras tres etiquetas las
utilizaremos para colocar los títulos Estilo, Fuente, Tamaño, las doce cajas de selección
nos ayudaran a modificar el texto de la etiqueta uno en cuanto al tipo de letra, tamaño y estilo,
el botón Salir cierra la aplicación y el botón Limpiar, regresa al texto original sin aplicar
ningún formato.
En la siguiente figura observamos como quedaría el diseño de la forma:
A continuación, a los eventos CheckedChanged de cada una de las cajas de selección
agreguemos un método pulsando con el mouse a la derecha del evento que queremos
programar.
5.24 Capítulo 5: Windows Forms
Este sería el código del método para cambiar el texto de la etiqueta uno a negrita:
private void Negrita_CheckedChanged(object sender, EventArgs e) {
this.label1.Font = new Font(this.label1.Font.FontFamily, this.label1.Font.Size, this.label1.Font.Style ^ FontStyle.Bold);
}
Repetimos el mismo paso para crear otros tres métodos para cambiar al estilo itálica, tachado o
subrayado, lo que harán estos métodos es cambiar la fuente de la etiqueta label1 para que el
estilo cambie a Bold o Italic o Strikeout o Underline
El principio que estamos usando aquí es el hecho de que para crear una Fuente hay que
hacerlo de la siguiente manera
new Font(FontFamily family, float emSize, FontStyle style); donde FontFamily es una familia de fuentes como por ejemplo Arial o Consolas y
FontStyle puede ser Bold, Italic, Strikeout, Underline o la combinación de ellos, el
tamaño se pude especificar con un número por ejemplo 10, 12, 20.
Para cambiar el tipo de fuente de la etiqueta nuevamente al evento CheckedChanged de cada
una de las cuatro cajas de selección agreguemos un método pulsando con el mouse a la
derecha del evento que queremos y escribimos el siguiente código:
private void Consolas_CheckedChanged(object sender, EventArgs e) { FontFamily csl = new FontFamily("Consolas");
this.label1.Font = new Font(csl, this.label1.Font.Size, this.label1.Font.Style);
}
5.25 Capítulo 5: Windows Forms
csl es el nuevo tipo de fuente que creamos puede llamarse como queramos respetando la
reglas de identificadores válidos, entre comillas en color rojo aparece "Consolas" aquí
debemos seleccionar un tipo de fuente válido podemos ver la ventana de propiedades cuando
cambiamos la fuente los tipos disponibles o también en el procesador de texto Word de Office
los tipos de fuentes, realizamos lo mismo para los otros tres tipos de fuentes.
Finalmente en la última columna con las cuatro cajas de selección cambiamos el tamaño del
texto de la etiqueta uno con un procedimiento similar a los dos anteriores primero configurando
el evento y después escribiendo en el método lo siguiente:
private void Ocho_CheckedChanged(object sender, EventArgs e) { this.label1.Font = new Font(this.label1.Font.FontFamily, 8, this.label1.Font.Style);
}
Observemos que nuevamente aquí de los tres parámetros o argumentos solo modificamos el
tamaño.
En cuanto a los botones el botón salir solo agregamos el código: Close();
private void button1_Click(object sender, EventArgs e) { Close(); } El botón limpiar regresa el texto de la etiqueta uno al formato original, por ejemplo si
cambiamos el tipo de letra a Broadway, Tachado y tamaño 20, al darle limpiar simplemente
regresamos al texto con el formato original para saber cuál era el formato original
seleccionamos la etiqueta uno y en propiedades vemos el tipo de letra y tamaño utilizado.
private void button2_Click(object sender, EventArgs e) { FontFamily mss = new FontFamily("Microsoft Sans Serif"); this.label1.Font = new Font(mss, 12, FontStyle.Regular); }
Si observamos aquí para cambiar el estilo del texto utilizamos simplemente
FontStyle.Regular, por otro lado en las cajas de selección escribimos
this.label1.Font.Style ^ FontStyle.Bold, esto se debe a que si utilizamos la forma
más simple es decir FontStyle.Bold, solo lo efectuaría una vez y después ya no lo
cambiaría debido a que no especificamos a que control deseamos aplicar el cambio.
5.26 Capítulo 5: Windows Forms
El código fuente completo de nuestro proyecto puede consultarse en el apéndice 5: Cajade
Selección -- Form1.cs
Un ejemplo de la ejecución del programa sería el siguiente:
Visor de Imágenes y Enlaces
Este proyecto abarca dos secciones, en la primera se trata de un visor de imágenes, es una
aplicación muy simple que lee archivos gráficos, el botón Elegir Imagen en combinación con
el control openFileDialog nos permite seleccionar la ubicación de nuestra imagen, una vez
seleccionada la imagen se mostrara en el recuadro pictureBox1. La segunda parte son los
enlaces a tres elementos el primero abre la calculadora de Windows, la segunda abre una liga
a la página de la Universidad, por último abre el Explorador de Windows en el disco local C:\,
esto se logra mediante los controles linkLabel.
La siguiente figura muestra los controles necesarios para elaborar nuestro proyecto
5.27 Capítulo 5: Windows Forms
Noten que el control openFileDialog1 no aparece dentro de la forma si no en la parte inferior
de nuestro proyecto.,
Los controles necesarios para llevar a cabo el proyecto son:
1 Caja de Imagen (pictureBox)
1 Caja de dialogo para abrir un archivo (openFileDialog)
2 Botones (Button)
3 Etiquetas de Enlace (linkLabel)
Al botón 1 que dice Elegir Imagen al darle doble clic nos traslada al código e insertamos lo
siguiente:
private void button1_Click(object sender, EventArgs e) { if (openFileDialog1.ShowDialog() == DialogResult.OK) { // Carga la imagen dentro del cuadro picture box. pictureBox1.Image= Image.FromFile(openFileDialog1.FileName); // Muestra el nombre del archivo en el titulo de forma
5.28 Capítulo 5: Windows Forms
this.Text = string.Concat("Visor de Imagenes(" + openFileDialog1.FileName + ")"); } } Un ejemplo de la ejecución del proyecto con esta primera parte del Visor de Imágenes:
En la segunda parte del proyecto se refiere a los Enlaces, usamos el control linkLabel el cual
tiene la peculiaridad de poseer una liga (como las páginas Web) a directorios de nuestro
sistema de archivos, a direcciones electrónicas de sitios Web o FTP y también a aplicaciones
que se encuentren en el Registro de Windows.
Ya tenemos agregados los tres linkLabel, ahora necesitamos la programación de los eventos
de hacer click en el control, en los tres eventos utilizaremos la llamada del método:
System.Diagnostics.Process.Start(parametros);
En donde los parametros pueden ser:
o Una cadena de caracteres con el nombre de un directorio ejemplo. "C:\\Documents and
Settings\\users\\avalera"
o Una cadena de caracteres con el nombre de un programa Navegador de Internet y una
segunda cadena con una dirección electrónica ejemplo. "http://google.com" que se
quiere visitar
5.29 Capítulo 5: Windows Forms
o Una cadena de caracteres con el nombre de un programa que se quiere mandar
ejecutar
En cada una de las etiquetas de enlace insertamos el siguiente código:
private void linkLabel1_LinkClicked(object sender, LinkLabelLinkClickedEventArgs e) { linkLabel1.LinkVisited = true; System.Diagnostics.Process.Start("Calc"); } private void linkLabel2_LinkClicked(object sender, LinkLabelLinkClickedEventArgs e) { linkLabel2.LinkVisited = true; System.Diagnostics.Process.Start("IExplore", "http://www.uacm.edu.mx"); } private void linkLabel3_LinkClicked(object sender, LinkLabelLinkClickedEventArgs e) { linkLabel3.LinkVisited = true; System.Diagnostics.Process.Start("C:\\"); }
Observemos que normalmente no cambiamos el nombre de los controles por ejemplo aquí
utilizamos el nombre por default linkLabel1, linkLabel2, linkLabel3, esto digamos que
es por “simplicidad”, aunque si quisiéramos que fuera mas intuitivo nuestro programa
podríamos llamar en lugar de linkLabel1, quizás calculadora, o en lugar de linkLabel2 el
nombre de uacm, etc.
La ejecución de esta segunda parte del proyecto abrirá las siguientes aplicaciones:
5.30 Capítulo 5: Windows Forms
Web Browser y Creación de Menús
En la siguiente aplicación vamos a crear un Web Browser dentro de la misma forma,
insertaremos algunas direcciones para seleccionar por cual navegar y mediante un menú nos
trasladaremos a la página principal, atrás o adelante, funciones básicas que cualquier
navegador tiene incorporadas, para lograr tal fin incorporaremos los siguientes controles:
1 Menú (menuStrip)
1 Caja del tipo combo (comboBox)
2 Botones (Button)
1 Navegador Web (webBrowser)
Noten que el control menuStrip1 no aparece dentro de la forma si no en la parte inferior de
nuestro proyecto, aquí por cuestiones de espacio se muestra del lado derecho.
Veamos los pasos a seguir para crear el proyecto en primer lugar
insertemos el control menuStrip, Cuando liberemos el control de
menú, veremos que crea un menú por defecto en la parte superior que
nos mostrara un cuadro que muestra Escriba Aquí, introducir el
nombre del menú; en este caso, Navegar. Cuando presionamos
entrar o enter, aparecen nuevos cuadros vacíos para crear otros
menús y elementos de menú. En el cuadro inferior, teclear Home. Presionar enter, y se
mostrarán más cuadros. Teclear Adelante. Presionar enter, y teclear Atras. Estos elementos
de menú constituyen nuestros controles básicos de navegación de sitios Web.
5.31 Capítulo 5: Windows Forms
Como segundo paso vamos agregar el comboBox y llenarlo, un ComboBox provee una lista
desplegable de opciones que el usuario puede seleccionar. En este programa, el ComboBox
contendrá una lista de nuestros sitios Web favoritos para tener un rápido acceso. Para crear la
lista de sitios, seleccionar el ComboBox y visualizar sus propiedades. Hacer clic en la columna
junto a la propiedad Items, y aparecerá Colección y adelante un cuadro con puntos
suspensivos hacer clic en ese botón para editar el contenido del ComboBox. Añadir tantas ligas
de sitios Web como se desee, presionando enter tras introducir cada una de ellas.
Insertamos dos botones uno que seleccionaría el link o enlace al cual queremos ir y el segundo
para salir del programa, luego vamos a insertar el control webBrowser y ajustarlo al tamaño
adecuado.
Ahora ya hemos finalizado la fase de diseño de nuestra aplicación, y hemos llegado al punto
donde necesitamos añadir algún código en C# para proporcionar la funcionalidad del programa.
Necesitamos añadir controladores para el botón y para cada opción de menú. Un controlador
es un método que se ejecuta cuando se activa un determinado control. Visual C# Express crea
controladores vacíos para nosotros automáticamente. Hacer doble clic sobre el botón, y
aparecerá el editor de código para nuestro proyecto. Veremos que el controlador para el evento
asociado al evento de mensaje que sucede cuando el usuario hace clic sobre un botón ha sido
creado por nosotros. Añadir código al método del controlador de modo que tenga una
apariencia similar al ejemplo siguiente.
private void button1_Click(object sender, EventArgs e) { webBrowser1.Navigate(comboBox1.SelectedItem.ToString()); }
5.32 Capítulo 5: Windows Forms
Este código toma el elemento del control ComboBox que está seleccionado, una cadena que
contiene una URL Web, y lo pasa al método de navegación del navegador Web. El método de
navegación carga y visualiza el contenido de una página Web en esa ubicación.
Vamos a añadir el código para las opciones del menú, (volver a la ventana de diseño o
diseñador presionar Shift + F7 y para ir al código insertar F7), hacer doble clic sobre cada
uno de los elementos de menú. Visual C# Express crea métodos de controladores para cada
uno. Editar estos métodos de modo que tengan una apariencia similar al código siguiente.
private void homeToolStripMenuItem_Click(object sender, EventArgs e) { // Opción del Menú Home o Página Principal webBrowser1.GoHome(); } private void adelanteToolStripMenuItem_Click(object sender, EventArgs { // Opción del Menú Adelante webBrowser1.GoForward(); } private void atrasToolStripMenuItem_Click(object sender, EventArgs e) { // Opción del Menú Atras webBrowser1.GoBack(); }
La última tarea es añadir código de inicialización al método Form1. Este método es el
constructor para el objeto Form1 y se invoca cuando se crea el Windows Form. Es, por tanto, la
ubicación ideal para situar cualquier código que se requiera para cambiar los valores iniciales
de los controles u otras configuraciones. El siguiente código provocará que el control Web
Browser visualice la página de inicio por defecto en nuestro ordenador, y también establecerá
el valor inicial del ComboBox. Cambiar el método para que contenga el siguiente código:
public Form1() { InitializeComponent(); comboBox1.SelectedIndex = 0; webBrowser1.GoHome(); }
El código fuente completo de nuestro proyecto puede consultarse en el apéndice 5:
WebBrowser_Menus -- Form1.cs
Un ejemplo de la ejecución del proyecto:
5.33 Capítulo 5: Windows Forms
Formas que llaman a otras formas
Vamos a crear tres Formas (Clases) Form1, Form2 y Form3, y la idea es que Form1 pueda
llamar mediante respectivos botones a Form2 o Form3. Tanto Form2 como Form3 son dos
Formas del tipo modal (mientras que no se cierren no puede accederse a otra parte del
programa).
Una vez que la aplicación quede terminada lucirá semejante a la que se muestra a
continuación:
5.34 Capítulo 5: Windows Forms
Una vez llena la forma de captura Form3, la información es pasada a Form1, en la forma 3
tenemos 5 campos a llenar, Calle, Colonia, Delegación, Código Postal y Teléfono, una vez
que llenamos estos datos y damos clic al botón OK, automáticamente los datos los copia a la
forma 1, a las etiquetas label2, label3, label4, label5 y label6, respectivamente.
Podemos dejar en blanco el campo Text de estas 5 etiquetas, para ilustra estos controles
aparecen en el proyecto. Este es un ejemplo de la ejecución:
5.35 Capítulo 5: Windows Forms
En la Forma 1 vamos a ingresar:
6 Etiquetas (Label)
1 Caja de texto (textBox)
2 Botones (Button)
En el Explorador de Soluciones haciendo clic derecho en el nombre del proyecto, vamos a
insertar la forma 2 y 3.
En la Forma 2 vamos a ingresar:
2 Etiquetas (Label)
1 Botón (Button)
En la Forma 3 vamos a ingresar:
6 Etiquetas (Label)
5 Caja de texto (textBox)
1 Botón (Button)
5.36 Capítulo 5: Windows Forms
Creación de Propiedades en una Clase Cuando en una clase está declarado un campo (variable) privado por ejemplo Informacion
del tipo string (véase el siguiente segmento de código), la manera para acceder a él es
mediante métodos públicos de la clase o a través de la declaración de una propiedad
relacionada con él.
En C# la manera de declarar una propiedad info para darle un valor al campo Informacion
(set) o para poder leer el contenido de éste (get) es la siguiente:
private string Informacion; public string info { set // para escritura { Informacion = value; } get // para lectura { return Informacion; } }
Para nuestra Clase Form3 creáremos 6 propiedades:
public string Nombre { set { label1.Text = value; } } public string Calle { get { return textBox1.Text; } } public string Colonia { get { return textBox2.Text; } }
5.37 Capítulo 5: Windows Forms
public string Delegación { get { return textBox3.Text; } } public string CódigoPostal { get { return textBox4.Text; } } public string Teléfono { get { return textBox5.Text; } } private void button1_Click(object sender, EventArgs e) { Close(); }
El Método para los dos botones de Form1
A continuación se muestra el código que debemos ingresar a los dos métodos del botón
Ingresar Datos y Acerca de..., anteriormente creado para Form1.
private void button1_Click(object sender, EventArgs e) { Form2 acercaDe = new Form2(); acercaDe.ShowDialog(); } private void button2_Click(object sender, EventArgs e) { Form3 data = new Form3(); data.Nombre = textBox1.Text; data.ShowDialog(); label2.Text = "Calle: " + data.Calle; label3.Text = "Colonia: " + data.Colonia; label4.Text = "Delegación: " + data.Delegación; label5.Text = "Código Postal " + data.CódigoPostal;
5.38 Capítulo 5: Windows Forms
label6.Text = "Código Postal " + data.Teléfono; }
El código fuente completo de nuestro proyecto puede consultarse en el apéndice 5:
llamarFormas -- Form1.cs Form2.cs Form3.cs
Matrices en dataGridView El control DataGridView proporciona una tabla personalizable para mostrar datos. La clase
DataGridView permite personalizar celdas, filas, columnas y bordes mediante propiedades.
El siguiente proyecto suma dos matrices cuadradas de NxN, consta de 3 dataGridViews en
primer lugar se le asignan columnas y filas según el tamaño que le asignemos a la matriz por
default, así como dos botones los cuales uno es para calcular el tamaño de la matriz y rellenar
los valores aleatorios dentro del grid, y el segundo botón nos sirve para calcular la suma de las
dos matrices. Podemos modificar los valores de nuestros grids, y volver a sumar, para obtener
la matriz resultante.
Controles utilizados:
4 Etiquetas (Label)
3 Grid (dataGridView)
2 Botones (Button)
1 Caja de texto (textBox)
El proyecto en vista del diseñador tendrá la siguiente apariencia:
Al botón Generar Matriz se le insertara el siguiente código:
5.39 Capítulo 5: Windows Forms
private void button1_Click(object sender, EventArgs e) { dataGridView1.Columns.Clear(); dataGridView2.Columns.Clear(); dataGridView3.Columns.Clear(); int tam = int.Parse(textBox1.Text); int i = 1; while (i <= tam) { DataGridViewColumn columna = new DataGridViewColumn(new DataGridViewTextBoxCell()); columna.Width = 25; //ancho this.dataGridView1.Columns.Add(columna); DataGridViewColumn columna2 = new DataGridViewColumn(new DataGridViewTextBoxCell()); columna2.Width = 25; this.dataGridView2.Columns.Add(columna2); DataGridViewColumn columna3 = new DataGridViewColumn(new DataGridViewTextBoxCell()); columna3.Width = 25; this.dataGridView3.Columns.Add(columna3); i++; } int[,] _matriz1 = new int[tam, tam]; // se declaran variables de tipo matriz int[,] _matriz2 = new int[tam, tam]; int[,] _matriz3 = new int[tam, tam]; dataGridView1.Rows.Add(tam); dataGridView2.Rows.Add(tam); dataGridView3.Rows.Add(tam); Random r = new Random(); // genera un dato de manera aleatoria, se utiliza para revolver los datos llena los datos de las casillas vacias. for (int f = 0; f < tam; f++) { for (int c = 0; c < tam; c++) { _matriz1[f, c] = r.Next(10); // valor inicial que agarra valores del 0 al 10 _matriz2[f, c] = r.Next(10); _matriz3[f, c] = 0; dataGridView1[f, c].Value = _matriz1[f, c]; // se agrega filas y colmnas dataGridView2[f, c].Value = _matriz2[f, c]; dataGridView3[f, c].Value = _matriz3[f, c]; } } }
Y botón Sumar el código:
private void button2_Click(object sender, EventArgs e)
{ int tam = int.Parse(textBox1.Text); int[,] _matriz1 = new int[tam, tam]; int[,] _matriz2 = new int[tam, tam]; int[,] _matriz3 = new int[tam, tam]; for (int f = 0; f < tam; f++) // filas { for (int c = 0; c < tam; c++) //columnas { _matriz1[f, c] = int.Parse(dataGridView1[f, c].Value.ToString()); // almacena _matriz2[f, c] = int.Parse(dataGridView2[f, c].Value.ToString()); _matriz3[f, c] = _matriz1[f, c] + _matriz2[f, c]; dataGridView3.CurrentCell = dataGridView3[f, c]; dataGridView3.CurrentCell.Value = _matriz3[f, c]; } } }
5.40 Capítulo 5: Windows Forms
La clase DataGridViewTextBoxCell es un tipo especializado de DataGridViewCell utilizado
para mostrar una única cadena de información basada en texto modificable.
La clase DataGridViewColumn representa una columna lógica de un control DataGridView.
Podemos recuperar las columnas a través de la colección Columns del control.
Al contrario que DataGridViewRow, que contiene la colección real de celdas de un control
DataGridView, DataGridViewColumn se utiliza principalmente para ajustar la apariencia y
comportamiento de la interfaz de usuario de la columna, como el ancho de columna y el estilo
de celda.
DataGridView.Rows Es una propiedad que obtiene una colección que contiene todas las filas
del control DataGridView.
Del lado izquierdo se muestra la ejecución cuando damos una dimensión de 5 para nuestra
matriz cuadrada en esta parte cada elemento de la matriz resultante se inicializa en cero, del
lado derecho cuando damos clic en Suma obtenemos el resultado de cada elemento de la
matriz resultante.
Creación de Menús El siguiente proyecto muestra la creación de menús, utilizamos tres etiquetas y mediante las
opciones del menú Formato y Fondo, cambiamos el color de fondo, el tipo y color de la fuente
o letra, mediante el menú Acerca de… mostramos información de contacto del autor del
proyecto y la opción Salir. Como parte complementaria y para no incluirla en un solo proyecto
agregamos el control dateTimePicker y el botón Fecha, esto simplemente muestra un
calendario seleccionamos una fecha y al dar clic en el botón nos muestra la fecha elegida y del
día actual, esto con ayuda de un MessageBox.Show.
5.41 Capítulo 5: Windows Forms
La estructura general del proyecto es la siguiente:
Controles utilizados:
3 Etiquetas (Label)
1 Menú (menuStrip)
1 DateTimePicker
1 Botón (Button)
Con ingresar un solo menuStrip se pueden derivar todos los menús que necesitemos, en las
siguientes imágenes se muestran cada una de las opciones del menú, es importante aclarar
que la opciones que aparecen como Ctrl+N, Ctrl+B, Ctrl+S, no se escriben si no son
accesos rápidos para trabajar con el proyecto por ejemplo con Ctrl+S, sale uno del proyecto,
en la siguiente pantalla se muestra como se configura esta propiedad.
5.42 Capítulo 5: Windows Forms
En las siguientes figuras se muestra a detalle cada una de las opciones del menú:
El código del botón fecha nos da la información de la fecha seleccionada y el día actual junto
con la hora, su código es:
private void button1_Click(object sender, EventArgs e) { // Muestra la fecha seleccionada: MessageBox.Show("Has seleccionado la fecha: " + dateTimePicker1.Value.Date); // Muestra la fecha de hoy: MessageBox.Show("Hoy es: " + DateTime.Now); }
5.43 Capítulo 5: Windows Forms
Por razones de espacio el código de cada menú puede consultarse en el apéndice 5:
menuCalendario -- Form1.cs
Ejemplo de la ejecución del proyecto: