Manual de como empezar a hacer GUI desde 0, es decir desde un proyecto en blanco, para mostrar las diferentes configuraciones que se hacen para ejecutar una aplicación de escritorio.
1. Interfaz Gráfica de Usuario en C#
Creación de una GUI a partir de un proyecto en blanco en el IDE SharpDevelop
3.2.0
Creamos una nueva Solución
Elegimos Proyecto en Blanco con cualquier nombre, en este caso GUI1
alvarez.tech
2. En el panel izquierdo podremos ver el explorador del proyecto y una carpeta de
Referencias del Proyecto.
Para manejar elementos de un entorno grafico deberemos de adicionar más Referencias,
para ello hacemos clic derecho sobre la carpeta Referencias y luego en Agregar
Referencia.
alvarez.tech
3. En la ventana de Agregar Referencia nos vamos a la pestaña GAC y buscamos las
Referencias que necesitamos, las básicas que necesitaremos para el manejo de GUI’s
son:
System.Windows.Forms
System.Drawing
Agregamos System.Windows.Forms con el botón Seleccionar, esta referencia nos sirve
para manejar los controles que tiene C# para el manejo formularios.
alvarez.tech
4. Agregamos System.Drawing con el botón Seleccionar, esta referencia nos sirve para
manejar los figuras geométricas, nos servirá para manejar puntos en la localización de
controles.
Una vez agregadas las referencias hacemos clic en OK y ahora estas nuevas referencias
están en la carpeta Referencias del Proyecto.
alvarez.tech
5. Ahora empezamos a crear nuestra Ventana, para ello creamos un Archivo en Blanco con
cualquier nombre en este caso Ventana.
alvarez.tech
6. Una vez creado el archivo escribimos el código del Proyecto.
using System;
using System.Drawing;
using System.Windows.Forms;
class Ventana : Form {
private Label etiqueta;
private TextBox cajaDeTexto;
private Button boton;
public Ventana() {
inicializarComponentes();
}
public void inicializarComponentes() {
etiqueta = new Label();
cajaDeTexto = new TextBox();
boton = new Button();
//
// etiqueta
//
etiqueta.Location = new Point(20,20); // (eje X, eje
Y)
etiqueta.Size = new Size(100,20); // (ancho, alto)
etiqueta.Text = "Inserte su Nombre";
//
// cajaDeTexto
//
cajaDeTexto.Location = new Point(130,20);
cajaDeTexto.Size = new Size(100,20);
//
// boton
//
boton.Location = new Point(70,60);
boton.Size = new Size(120,30);
boton.Text = "MOSTRAR";
boton.Click += new EventHandler(metodoAccionBoton);
//
// Ventana
//
Controls.Add(etiqueta);
Controls.Add(cajaDeTexto);
Controls.Add(boton);
Text = "Ventana";
Size = new Size(280,160);
}
public void metodoAccionBoton(object emisor, EventArgs e) {
MessageBox.Show(cajaDeTexto.Text, "HOLA"); // (texto,
titulo)
}
}
alvarez.tech
7. Ahora creamos el programa Principal para ejecutar nuestra aplicación.
alvarez.tech
8. Y escribimos el siguiente código del programa Principal.
using System.Windows.Forms;
class Principal {
public static void Main(string[] a3d) {
Ventana X = new Ventana();
Application.Run(X);
}
}
alvarez.tech
9. Ahora podemos ejecutar el programa con el botón ejecutar o presionando F5.
Veremos que aparece la consola detrás de nuestra Ventana, esto se debe a que el
proyecto está por defecto configurado en Modo Consola, para cambiar ello y ocular la
consola vamos a las propiedades del Proyecto, clic derecho en el proyecto y
Propiedades.
alvarez.tech
10. En la pestaña Aplicación, vamos a Tipo de Salida y la cambiamos a Aplicación de
Windows y luego guardamos el archivo de propiedades con Ctrl + S.
Ahora verán que en el proyecto ya no aparece la Consola por detrás de la aplicación.
Ahora hacemos uso de la aplicación.
alvarez.tech
11. Nota 1
Para que el estilo visual vaya de acuerdo al sistema operativo y no a los por defecto de
C#, es posible cambiarlo añadiendo la línea siguiente antes de usar el método Run()
Application.EnableVisualStyles()
Ahora la aplicación se ejecuta con el estilo visual del S.O., Windows 7 en este caso.
alvarez.tech
12. Nota 2
Para los que tienen maquinas con procesador de 64 bits, es posible que no quiera
ejecutar el IDE la aplicación, por problemas de compatibilidad, para que se ejecute hay
cambiar el CPU destino en la pestaña Generar en las propiedades del Proyecto.
alvarez.tech