miércoles, 18 de julio de 2012

CREANDO UNA APLICACION GRAFICA

Hasta ahora a creado una aplicación de consola básica. Pero también podemos crear en Visual Studio una aplicacion gráfica basada en Windows. Puede diseñar la interfaz gráfica de usuario basada en formularios de una aplicación windows de una manera interactiva. Visual Studio proporciona dos plantillas para la creación de aplicaciones gráficas, Aplicación de Windows Forms y Aplicación WPF.

1.-Abrir Visual Studio
2.-Ir a archivo, nuevo proyecto y aparecerá la siguiente ventana, ahi escoger Visual c# en la parte izquierda, Aplicacion WPF en el panel central y colocar en la caja de texto del nombre WPFHello.
Click en la imagen para ampliar





 3.-Le damos aceptar.

Aparece el siguiente formulario con un panel de código XAML.
Click en la imagen para ampliar
XAML es un lenguaje de marcado extensible de aplicaciones , se usa por la aplicaciones WPF para definir el diseño y contenido de un formulario.

CREAR UNA INTERFAZ DE USUARIO

1.- Dar click en el cuadro de herramientas que aparece en la parte izquierda del formulario. Se deve mostrar el cuadro de herramientas como en la imagen siguiente, en este cuadro se encuentran los controles que se pueden colocar en el formulario.
clic en la imagen para ampliar
Si quieres que el cuadro de herramientas quede estático puedes pinchar en el alfiler donde señala la flecha en la imagen.
En caso de que el cuadro de herramientas no aparesca ir al menú ver y habilitar el cuadro de herramientas, o pulsar Ctrl+W+X

2.-En el cuadro de herramientas dar clic en label, arrastrar el cursor y dar clic dentro del formulario.

3.-En el menú ver dar clic en la opción ventana de propiedades.
click en la imagen para ampliar
Debe aparecer en la parte derecha la ventana de propiedades, en ella se muestran las propiedades del elemento seleccioando actualmente. Por ejemplo en la imagen se muestran las propiedades del label por que es el que esta seleccionado. Aunque en el código XAML se puede cambiar las propiedades suele ser más coveniente usar el cuadro de propiedades.
click en la imagen para ampliar
4.-Busque la propiedad FontSize en cuadro de propiedades y dele un valor de 20 luego busque el siguiente código.

Debe ver que cuando cambia la propiedad en el cuadro de herramientas se actualiza en el código XAML y viceversa.
Volver a dejar en 12 la propiedad FontSize.

5.-Colocar en la propiedad content  "Plase enter your name"
6.-En el cuadro de herramientas busque y coloque un control textbox dentro del formulario.
7.-En el cuadro de herramientas busque y coloque un control button dentro del formulario, cambie la propiedad content del button por Ok.
8.-Dimensione los tamaños de los controles solo seleccionando el control y moviendo el mouse.
Para cambiar el tamaño de la ventana busque el controlador de tamaño que se muestra en gris al lado del formulario.
9.-Cambie la propiedad title de la ventana por Hello.
Debe tener un diseño como el siguiente:

clic en la imagen para ampliar

 10.-Nos vamos al menú Depurar y darle en iniciar depuración.
Se mostrará la ventana pero no hará nada aún por que nos falta código.
Cerramos la ventana y se detendrá la ejecución.

11.- Busar el explorador de soluciones y expandir el archivo MainWindows.xaml y dar doble clic en el archivo que aparece con nombre MainWindows.xaml.cs  se muestra lo siguiente:

click en la imagen para ampliar

 Este archivo tiene varias declaraciones de espacios de nombres, una clase MainWindows y un contructor (un constructor es un método especial que tiene el mismo nombre de la clase).
De hecho, la aplicación contiene mucho más código , pero la mayor parte se genera automáticamente en función de la descripción XAML, y que está escondido de nosotros. Este código oculto lleva a cabo operaciones tales como crear y mostrar el formulario,  crear y posicionar los diversos controles en el formulario.
El propósito del código que se puede ver en esta clase es para que usted puede agregar sus propios métodos para manejar la lógica de la aplicación, tales como la determinación de lo que sucede cuando el usuario hace clic en el botón Aceptar.

12.-Nos vamos al archivo App.axml.cs y damos doble clic. Ahi es donde escribiremos nuestro código.
13.-Ahora regresamos a la parte de diseño del archivo MainWindows.xaml y damos doble clic en el botón Ok.

Nos debe llevar a la siguiente ventana.


 Notaremos que aparece un codigo adicional  es el código del evento del botón que se llama button1_Click.
Dentro de las llaves escribiremos el siguiente código:
MessageBox.Show("Hello"+textbox1.Text);


14.-Vamos al menú depurar y le damos en iniciar depuración.

Lo que el código hace es mostrar un mensaje con Hello y el nombre que haya agregado en la caja de texto.

El resultado será el siguiente:
click en la imagen para ampliar

 


No hay comentarios:

Publicar un comentario en la entrada