Tutorial C# 2
Tutorial C# 2
Tutorial C# 2
Hasta ahora hemos resuelto todos los algoritmos haciendo las salidas a travs de una consola en modo texto. La realidad que es muy comn la necesidad de hacer la entrada y salida de datos mediante una interfaz ms amigable con el usuario. En C# existen varias libreras de clase para implementar interfaces visuales. Utilizaremos las Windows Forms. Para crear una aplicacin que utilice esta librera debemos crear un proyecto. Los pasos son los siguientes: 1. Desde el men de opciones del Visual Studio .Net seleccionamos la opcin: Archivo -> Nuevo proyecto... 2. Seleccionamos la plantilla "Aplicacin de Windows Forms".
3. Ahora ya tenemos un esqueleto para desarrollar nuestra aplicacin. Si vemos la ventana del "Explorador de soluciones tenemos tres archivos generados en forma automtica: Program.cs, Form1.cs y Form1.Designer.cs:
En la parte central tenemos el Form listo para disponer controles con el mouse.
4. Ahora podemos seleccionar un control visual de la ventana "Cuadro de herramientas" (seleccionemos el control Button) y seguidamente presionemos el botn izquierdo del mouse dentro del formulario que se encuentra en la parte central del Visual Studio .net:
5. Ahora podemos analizar la ventana "Propiedades" que nos muestra las propiedades del objeto seleccionado del formulario. Podemos por ejemplo si tenemos seleccionado el botn cambiar la propiedad text (la misma cambia la etiqueta que muestra el botn):
6. Cuando ejecutamos la aplicacin el resultado podemos ver que es muy distinto a la interfaz en modo texto vista hasta el momento:
7. Por ltimo vamos a ver los contenidos de los archivos generados automticamente por el Visual Studio .Net. Program.ch using using using using System; System.Collections.Generic; System.Linq; System.Windows.Forms;
namespace WindowsFormsApplication1 { static class Program { /// /// Punto de entrada principal para la aplicacin. /// [STAThread] static void Main() { Application.EnableVisualStyles(); Application.SetCompatibleTextRenderingDefault(false); Application.Run(new Form1()); } } } Form1.ch using using using using using using using using System; System.Collections.Generic; System.ComponentModel; System.Data; System.Drawing; System.Linq; System.Text; System.Windows.Forms;
InitializeComponent(); } } } Form1.Designer.ch namespace WindowsFormsApplication1 { partial class Form1 { /// /// Variable del diseador requerida. /// private System.ComponentModel.IContainer components = null; /// /// Limpiar los recursos que se estn utilizando. /// /// true si los recursos administrados se deben eliminar; false en caso contrario, false. protected override void Dispose(bool disposing) { if (disposing && (components != null)) { components.Dispose(); } base.Dispose(disposing); } #region Cdigo generado por el Diseador de Windows Forms /// /// Mtodo necesario para admitir el Diseador. No se puede modificar /// el contenido del mtodo con el editor de cdigo. /// private void InitializeComponent() { this.button1 = new System.Windows.Forms.Button(); this.SuspendLayout(); // // button1 // this.button1.Location = new System.Drawing.Point(190, 223); this.button1.Name = "button1"; this.button1.Size = new System.Drawing.Size(75, 23); this.button1.TabIndex = 0; this.button1.Text = "Hola Mundo"; this.button1.UseVisualStyleBackColor = true; // // Form1 // this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F); this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
this.ClientSize = new System.Drawing.Size(292, 273); this.Controls.Add(this.button1); this.Name = "Form1"; this.Text = "Form1"; this.ResumeLayout(false); } #endregion private System.Windows.Forms.Button button1; } }
El cuadro de herramientas contiene todas las componentes visuales que nos permiten elaborar nuestro formulario. Podemos ver todos los controles visuales en forma completa:
Problema 1: : Desarrollar un programa que muestre un objeto de cada una de las siguientes clases: MonthCalendar, TextBox y Button La interfaz visual debe ser parecida a esta:
Hasta ahora solo hemos creado una interfaz visual, como podemos ver algunas componentes en tiempo de ejecucin tienen funcionalidad (el objeto de la clase MonthCalendar si ejecutamos el programa nos permite seleccionar una fecha, cambiar de mes etc., el control de la clase TextBox nos permite ingresar una cadena de caracteres, pero el objeto de la clase Button cuando se presiona podemos ver que se visualiza que es hundido con el mouse pero no hace nada):
La "ventana de propiedades" nos permite inicializar los valores de las propiedades del objeto que se encuentra seleccionado en el formulario (Button, MonthCalendar, TextBox etc.)
Por ejemplo si disponemos dos objetos de la clase Button y seleccionamos uno de ellos podremos editar las propiedades del mismo en la "ventana de propiedades":
A medida que seleccionamos un objeto en la ventana de "Diseo" podemos ver como se actualiza la "ventana de propiedades", por ejemplo la propiedad Text de la clase Button permite fijar la etiqueta que muestra el botn. El formulario tambin es un objeto, esto quiere decir que se lo seleccionamos luego la "ventana de propiedades" nos muestra las propiedades de la clase Form:
Problema propuesto 1. Elaborar una interfaz grfica que muestre una calculadora (utilizar objetos de la clase Button y un objeto de la clase TextBox donde se mostraran los resultados y se cargaran los datos), tener en cuenta que solo se debe implementar la interfaz y no la funcionalidad de una calculadora. La ventana de eventos coincide con la ventana de propiedades. Para activar la lista de eventos disponibles para un objeto debemos presionar:
Podemos observar la lista de eventos que puede reaccionar el objeto seleccionado en ese momento. Por ejemplo si tenemos seleccionado un objeto de la clase Button el evento ms comn que deberemos implementar es el Click (este evento se dispara cuando en tiempo de ejecucin del programa se presiona el botn) Para disponer el cdigo para dicho evento debemos hacer doble clic sobre dicho evento (esto hace que se active la ventana del editor y genere automticamente el mtodo asociado a dicho evento):
Problema: Confeccionar un programa que al presionar un botn se muestre en un objeto de la clase Label el string "Hola Mundo". Programa: using using using using using using using using System; System.Collections.Generic; System.ComponentModel; System.Data; System.Drawing; System.Linq; System.Text; System.Windows.Forms;
namespace WindowsFormsApplication5 { public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void button1_Click(object sender, EventArgs e) {
label1.Text = "Hola Mundo"; } } } Hay que tener en cuenta que la clase anterior es parcial (el archivo Form1.Designer.cs contiene la definicin de los dos objetos y la inicializacin de sus propiedades y evento): namespace WindowsFormsApplication5 { partial class Form1 { /// /// Variable del diseador requerida. /// private System.ComponentModel.IContainer components = null; /// /// Limpiar los recursos que se estn utilizando. /// /// true si los recursos administrados se deben eliminar; /// false en caso contrario, false. protected override void Dispose(bool disposing) { if (disposing && (components != null)) { components.Dispose(); } base.Dispose(disposing); } #region Cdigo generado por el Diseador de Windows Forms /// /// Mtodo necesario para admitir el Diseador. No se puede modificar /// el contenido del mtodo con el editor de cdigo. /// private void InitializeComponent() { this.label1 = new System.Windows.Forms.Label(); this.button1 = new System.Windows.Forms.Button(); this.SuspendLayout(); // // label1 // this.label1.AutoSize = true; this.label1.Location = new System.Drawing.Point(48, 102); this.label1.Name = "label1"; this.label1.Size = new System.Drawing.Size(35, 13); this.label1.TabIndex = 0; this.label1.Text = "label1"; // // button1 // this.button1.Location = new System.Drawing.Point(51, 148); this.button1.Name = "button1"; this.button1.Size = new System.Drawing.Size(75, 23); this.button1.TabIndex = 1; this.button1.Text = "Presionar"; this.button1.UseVisualStyleBackColor = true;
this.button1.Click += new System.EventHandler(this.button1_Click); // // Form1 // this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F); this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font; this.ClientSize = new System.Drawing.Size(292, 273); this.Controls.Add(this.button1); this.Controls.Add(this.label1); this.Name = "Form1"; this.Text = "Form1"; this.ResumeLayout(false); this.PerformLayout(); } #endregion private System.Windows.Forms.Label label1; private System.Windows.Forms.Button button1; } } Al ejecutar el programa si presionamos el botn vemos como cambia el contenido de la Label (esto debido a que en el evento click del botn cambiamos el valor de la propiedad Text del objeto de la clase Label):
Problema propuesto 1. Disponer 7 objetos de la clase Button con los das de la semana. Fijar en los atributos Text de cada botn los das de la semana. Al presionar un botn mostrar en un objeto de la clase Label el da seleccionado.
Label
En el "cuadro de herramientas" podemos ver las componentes visuales agrupadas. En la
pestaa de Controles comunes podemos acceder a los controles visuales que normalmente toda aplicacin requiere. El primer control que vamos a analizar es la clase Label. Un control de tipo Label nos permite mostrar bsicamente un texto inicializando la propiedad Text.
Las propiedades ms comunes de este control son: Text: Es el string que muestra el control. BackColor: Define el color de fondo del control. ForeColor: Define el color del texto. Font: Define la fuente del texto. BorderStyle: Define si la label tiene un borde visible. AutoSize: Permite o no redimensionar la label en forma automtica. Cursor: Definimos el cono del cursor a mostrar cuando disponemos el mouse dentro del control. Visible: Determina si el control est visible u oculto cuando ejecutamos el programa.
Problema propuesto 1. Crear una aplicacin que muestre en 6 objetos de la clase Label con algunos nombres de controles visuales contenidos en la pestaa de "controles comunes" del cuadro de herramientas
Button(botn)
Un control comn a disponer dentro de un Form son los botones, esto se hace disponiendo objetos de la clase Button. Problema 1: Confeccionar un formulario que muestre tres objetos de la clase Button, disponer como etiqueta en cada botn los valores 1,2 y 3. Cuando se presiona el botn mostrar en el ttulo del formulario el valor de la etiqueta del botn presionado.
Programa: using using using using using using using using System; System.Collections.Generic; System.ComponentModel; System.Data; System.Drawing; System.Linq; System.Text; System.Windows.Forms;
namespace WindowsFormsApplicationButton1 { public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void button1_Click(object sender, EventArgs e) { Text = button1.Text; } private void button2_Click(object sender, EventArgs e) { Text = button2.Text; } private void button3_Click(object sender, EventArgs e) { Text = button3.Text;
} } } Para el evento click de cada botn inicializamos la propiedad Text del formulario con la propiedad Text del botn presionado (como la clase Form1 hereda de la clase Form luego accedemos a la propiedad Text sin anteceder nombre alguno: Text = button1.Text; ): private void button1_Click(object sender, EventArgs e) { Text = button1.Text; } Problema 2: Modificar el problema anterior para que se acumulen en el ttulo del formulario los valores de los botones presionados. Programa:
namespace WindowsFormsApplicationButton2 { public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void button1_Click(object sender, EventArgs e) { Text = Text + button1.Text; } private void button2_Click(object sender, EventArgs e) { Text = Text + button2.Text; } private void button3_Click(object sender, EventArgs e) { Text = Text + button3.Text; } } } Concatenamos el valor actual de la propiedad Text del formulario con el valor de la propiedad Text del botn respectivo: private void button1_Click(object sender, EventArgs e) { Text = Text + button1.Text; }
Problema 3: Similar al problema anterior solo permitir mostrar hasta 10 caracteres en el ttulo del formulario. Programa: using using using using using using using using System; System.Collections.Generic; System.ComponentModel; System.Data; System.Drawing; System.Linq; System.Text; System.Windows.Forms;
namespace WindowsFormsApplicationButton3 { public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void button1_Click(object sender, EventArgs e) { if (Text.Length < 10) { Text = Text + button1.Text; } } private void button2_Click(object sender, EventArgs e) { if (Text.Length < 10) { Text = Text + button2.Text; } } private void button3_Click(object sender, EventArgs e) { if (Text.Length < 10) { Text = Text + button3.Text; } } } } Como la propiedad Text es de tipo string luego podemos acceder a la propiedad Length para conocer la cantidad de caracteres almacenados: private void button1_Click(object sender, EventArgs e) { if (Text.Length < 10) { Text = Text + button1.Text; } }
Problema propuesto 1. Elaborar una interfaz grfica que muestre una calculadora (utilizar objetos de la clase Button y un objeto de la clase Label donde se muestra el valor ingresado), tener en cuenta que solo se debe implementar la interfaz y la carga de un valor de hasta 12 dgitos.
TEXTBOX(caja de texto)
El control ms comn para la entrada de datos por teclado es el TextBox. Problema 1: Confeccionar un programa que permita ingresar dos valores enteros por teclado y al presionar un botn mostrar en una Label la suma de dichos valores.
Programa:
{ InitializeComponent(); } private void button1_Click(object sender, EventArgs e) { int valor1 = int.Parse(textBox1.Text); int valor2 = int.Parse(textBox2.Text); int suma = valor1 + valor2; label4.Text = suma.ToString(); } } } Para saber el valor almacenado en un TextBox disponemos de la propiedad Text. Como la propiedad Text es de tipo string debemos convertir dicho valor a tipo entero mediante el mtodo esttico Parse de la clase int. Luego para recuperar como enteros los dos valores almacenados en los TextBox: int valor1 = int.Parse(textBox1.Text); int valor2 = int.Parse(textBox2.Text); Sumamos los dos enteros: int suma = valor1 + valor2; Y finalmente cargamos en un objeto de la clase Label el resultado de la suma. Como la variable suma es un entero debemos llamar al mtodo ToString() para retornar dicho valor como string: label4.Text = suma.ToString(); Problema 2: Solicitar que se ingrese una clave. Si se ingresa la cadena "abc123" mostrar un mensaje de clave correcta en caso contrario mostrar clave incorrecta. Utilizar un control de tipo TextBox para el ingreso de la clave y una Label para mostrar el resultado al presionar un botn. Inicializar la propiedad UseSystemPasswordChar con el valor true (esto hace que cuando el operador tipee caracteres dentro del TextBox se visualicen como asteriscos)
Programa: using using using using using using using using System; System.Collections.Generic; System.ComponentModel; System.Data; System.Drawing; System.Linq; System.Text; System.Windows.Forms;
namespace WindowsFormsApplicationTextBox2 { public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void button1_Click(object sender, EventArgs e) { if (textBox1.Text == "abc123") { label2.Text = "Clave correcta"; } else { label2.Text = "Clave incorrecta"; } } } } Para verificar si la clave es correcta comparamos la cadena cargada en el textBox1 con la cadena "abc123". Hay otra propiedad en la clase TextBox llamada PasswordChar, si la propiedad UseSystemPasswordChar esta configurada con false podemos inicializar la propiedad PasswordChar con el caracter que queremos que se muestre al ingresar datos en el TextBox. Probar de inicializarlo con el caracter '+' y veremos que en vez de aparecer asteriscos aparecen caracteres '+' Problema 3: Disponer un control de tipo TextBox e inicializar la propiedad Multiline con el valor true (esto permite ingresar mltiples lneas dentro de un TextBox.
Programa:
namespace WindowsFormsApplicationTextBox3 { public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void button1_Click(object sender, EventArgs e) { MessageBox.Show(textBox2.Text); } } }
Cuando se presiona un botn se muestra en cuadro de mensajes (MessageBox) el texto ingresado en el textBox2: MessageBox.Show(textBox2.Text); Problema propuesto
CHECKBOX
El control CheckBox permite implementar un cuadro de seleccin (bsicamente un botn de dos estados: seleccionado o no seleccionado) Problema 1: Confeccionar un programa que muestre 3 objetos de la clase CheckBox con etiquetas de tres idiomas. Cuando se presiona un botn mostrar en la barra de ttulos del Form todos los CheckBox seleccionados hasta el momento.
Programa: using using using using using using using using System; System.Collections.Generic; System.ComponentModel; System.Data; System.Drawing; System.Linq; System.Text; System.Windows.Forms;
namespace WindowsFormsApplicationCheckBox1
{ public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void button1_Click(object sender, EventArgs e) { Text = ""; if (checkBox1.Checked == true) { Text = Text + "(Ingls)"; } if (checkBox2.Checked == true) { Text = Text + "(Francs)"; } if (checkBox3.Checked == true) { Text = Text + "(Alemn)"; } } } } La clase CheckBox tiene una propiedad llamada Checked (si tiene el valor true significa que el CheckBox esta seleccionado, en caso contrario no esta seleccionado. En el evento Click del botn primero borramos el contenido del ttulo del Form: Text = ""; Y seguidamente mediante estructuras if verificamos el estado de cada CheckBox, en caso de estar seleccionado concatenamos al ttulo del Form el valor que representa ese CheckBox: if (checkBox1.Checked == true) { Text = Text + "(Ingls)"; } Problema 2: Disponer un control Label que muestre el siguiente mensaje: "Esta de acuerdo con las normas del servicio?", luego un CheckBox y finalmente un objeto de tipo Button desactivo (propiedad Enabled con false). Cuando se tilde el CheckBox debemos activar el botn (para esto debemos responder al evento)
Programa:
namespace WindowsFormsApplicationCheckBox2 { public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void checkBox1_CheckedChanged(object sender, EventArgs e) { if (checkBox1.Checked == true) { button1.Enabled = true; } else { button1.Enabled = false; } } } } Debemos implementar el evento CheckedChange del objeto checkBox1 (preguntamos si el CheckBox se encuentra seleccionado o no, en caso de estar seleccionado activamos el botn asignando a la propiedad Enabled el valor true): private void checkBox1_CheckedChanged(object sender, EventArgs e) { if (checkBox1.Checked == true) { button1.Enabled = true; } else { button1.Enabled = false; } } Problema propuesto 1. Disponer tres objetos de la clase CheckBox con nombres de navegadores web. Cuando se presione un botn mostrar en el ttulo del Form los programas seleccionados.
RADIOBUTTON
Otro control visual muy comn es el RadioButton que normalmente se muestran un conjunto de RadioButton y permiten la seleccin de solo uno de ellos. Problema 1: Confeccionar un programa que muestre 3 objetos de la clase RadioButton que permitan configurar el ancho y alto del Form. Cuando se presione un botn actualizar el ancho y alto.
Programa:
namespace WindowsFormsApplicationRadioButton1 { public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void button1_Click(object sender, EventArgs e) { if (radioButton1.Checked == true) { Width = 640; Height = 480; } else { if (radioButton2.Checked == true) { Width = 800; Height = 600; } else { if (radioButton3.Checked == true) {
Width = 1024; Height = 768; } } } } } } Todos los controles que se disponen dentro de un Form estn asociados, es decir que cuando seleccionamos uno se desmarca la actual. El control RadioButton tiene una propiedad llamada Checked que almacena true o false, por eso que por medio de un conjunto de if verificamos cual de los radio esta seleccionado: if (radioButton1.Checked == true) { Width = 640; Height = 480; } else { if (radioButton2.Checked == true) { Width = 800; Height = 600; } else { if (radioButton3.Checked == true) { Width = 1024; Height = 768; } } } Para cambiar el ancho y alto del Form accedemos a las propiedades Width y Height. Problemas propuestos 1. Permitir el ingreso de dos nmeros en controles de tipo TextBox y mediante dos controles de tipo RadioButton permitir seleccionar si queremos sumarlos o restarlos. Al presionar un botn mostrar en el ttulo del Form el resultado de la operacin.
COMBOBOX
El control ComboBox permite seleccionar un string de una lista. Para inicializar los string que contendr el ComboBox debemos acceder a la propiedad Items Un evento muy til con este control es cuando el operador selecciona un Item de la lista. Para capturar la seleccin de un item debemos codificar el evento SelectedIndexChanged. Problema 1: Cargar en un ComboBox los nombres de varios colores. Al seleccionar alguno mostrar en la barra de ttulo del Form el string seleccionado. Programa:
namespace WindowsFormsApplicationComboBox1 { public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void comboBox1_SelectedIndexChanged(object sender, EventArgs e) { Text = comboBox1.Text; } } } Cuando se selecciona un string de la lista se dispara el evento SelectedIndexChanged y procedemos a extraer el texto seleccionado del ComboBox y lo mostramos en el ttulo del Form: private void comboBox1_SelectedIndexChanged(object EventArgs e) { Text = comboBox1.Text; } sender,
Problema 2: Disponer tres controles de tipo ComboBox con valores entre 0 y 255 (cada uno representa la cantidad de rojo, verde y azul). Luego al presionar un botn pintar el fondo del Form con el color que se genera combinando los valores de los ComboBox.
Programa:
using System.Text; using System.Windows.Forms; namespace WindowsFormsApplicationComboBox2 { public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void Form1_Load(object sender, EventArgs e) { for (int f = 0; f <= 255; f++) { comboBox1.Items.Add(f.ToString()); comboBox2.Items.Add(f.ToString()); comboBox3.Items.Add(f.ToString()); } comboBox1.SelectedIndex = 0; comboBox2.SelectedIndex = 0; comboBox3.SelectedIndex = 0; } private void button1_Click(object sender, EventArgs e) { int rojo = int.Parse(comboBox1.Text); int verde = int.Parse(comboBox2.Text); int azul = int.Parse(comboBox3.Text); BackColor = Color.FromArgb(rojo, verde, azul); } } } La carga manual de cada ComboBox nos hara perder mucho tiempo en tiempo de diseo por lo que lo hacemos mediante un algoritmo. Cuando se carga el Form se ejecuta el evento Load donde mediante un for procedemos a aadir los 256 valores: private void Form1_Load(object sender, EventArgs e) { for (int f = 0; f <= 255; f++) { comboBox1.Items.Add(f.ToString()); comboBox2.Items.Add(f.ToString()); comboBox3.Items.Add(f.ToString()); } La propiedad Items del ComboBox tiene un mtodo llamado Add que aade un elemento a la lista (como debemos pasar un string como parmetro convertimos a la variable entera f a string) Luego para dejar seleccionado por defecto el primer item aadido inicializamos la propiedad SelectedIndex: comboBox1.SelectedIndex = 0; comboBox2.SelectedIndex = 0; comboBox3.SelectedIndex = 0; En el evento Click del botn procedemos a extraer el valor seleccionado de cada ComboBox y lo convertimos a entero: int rojo = int.Parse(comboBox1.Text); int verde = int.Parse(comboBox2.Text); int azul = int.Parse(comboBox3.Text);
Para cambiar el color de fondo del Form actualizamos la propiedad BackColor. El color lo generamos llamando al mtodo esttico FromArgb de la clase Color: BackColor = Color.FromArgb(rojo, verde, azul); Problemas propuestos 1. Solicitar el ingreso del nombre de una persona y seleccionar de un control ComboBox un pas. Al presionar un botn mostrar en la barra del ttulo del Form el nombre ingresado y el pas seleccionado.