Practica POO 2-3

Enero 2015

Campo 1: Datos Personales. Crear un Docume nto en Word que incluya una caratula que conte nga tus datos. Dicho docume nto ser guardado como: Ape lli do Paterno_nombre alumno_Practi ca2-3_2AV1_POO

Campo 2: Objetivos.

Compre nde r los fundame ntos de mejorar la interface en C#.

Campo 3: Desarrollo de la Prctica .

1. Abrir la aplicaci n de Visual Studi o.

2. Ve al men File o Archivo, de pe ndi endo de l i di oma de l programa. 3. Crea un Nuevo Proye cto y selecciona la opcin de WPF Appli cation y Nombralo como Aplicacion2

PROGRAMACIN ORIENTADA A OBJETOS 3er. PARCIAL

Practica #2 Disear ventana de Interfaz

Daniel V zquez de la Rosa [email protected]

Instituto Politcni co Naci onal

Ingeni era en Aeronuti ca

1/4 Programacin Orientada a Objetos E S I M E T i c o m a n , Mxico, 2015

4. Se creara el proye cto con una ventana de apli cacin.

5. En la parte de de bajo de la ventana, se crea el cdigo del Form de Inicio

6. Comenzar a escribir al final de la lnea de Title=MainWindow, despus de Width=525, el siguiente texto:

AllowsTransparency="True" WindowStyle="None" Background="Transparent" WindowStartupLocati on="CenterScreen" ResizeMode="CanResize WithGrip"

Que de be r de que dar de ntro de l smbolo >

Lo que har que la ventana pierda sus propi e dade s iniciales.

7. Escri bir dentro de la etiqueta Grid, la etiqueta border, despus de haber escrito las lneas anteriores.

Una vez escrito la etiqueta border, di reigirse a la ventana de propi e dade s y dar click en la parte de bsque da y escri bi r Background y seleccionar el tercer cuadro de la seccin Background.

2/4 Programacin Orientada a Objetos

E S I M E T i c o m a n , Mxico, 2015

Lo que har que apare zca una paleta de colores

Y podrs escoger el color de tu preferencia seleccionando primeramente las dos flechas en la barra de color.

8. Posteriormente en la barra de bsqueda donde escribiste Background, escribe Corner y escribe los valores 100,100,100,100, lo que har que tu ventana que de con los bordes re dondeados.


9. En la ventana de abajo podrs observar que se ha creado cdigo, dadas las caractersticas que le has proporcionado a tu ventana.

Situate en la lnea de bajo de y escribe:

Esto hara que se creen tres secciones en tu ventana que acabas de disear.

Posteriormente escribirs debajo de el siguiente texto y ve observando los cambios en la ventana cada que escribes una lnea. Por lo que el cdigo de ber ir que dando de la siguie nte forma:

10. Posteriormente daremos click en la lnea de la etiqueta border al final del valor 1 y procederemos a darle color a esta seccin creada, escri bi endo de nuevo la palabra background en la ventana de propi e dade s.


Una vez que aparece la ventana de Background, seleccionaremos el tercer cuadro para darle un color a la seccin central de nuestra apli caci n. As, que pue des seleccionar el color que ms te agrade .

11. Una vez que le diste color a la seccin central, regresa al cdi go y agrega la propi e dad height=Auto a las etiquetas RowDefinitions, como se muestra a continuaci n:

L que har que la ventana quede:

Por lo que ajustaremos la forma de la seccin central y el tamao, agregando la propi e dad corner al cdi go como se muestra a continuaci n:

Lo que har que nuestra ventana luzca as:


12. Ahora ajustaremos el tamao de la secci n central dentro de nuestra ventana, utilizando la etiqueta paddi ng y alineando el te xto inferi or.

13. Daremos movilidad a nuestra ventana si vamos al cdi go y tecleamos la propi e dad

MouseLeftButtonDown en la seccin que corresponde a la barra de titulo, una vez que escribas el texto de la propiedad aparecer la leyenda de nuevo evento por lo que deberas de dar click en esa opcin.

Una vez que has dado doble click sobre la leyenda nuevo evento (New Event) se mostrara como en la siguiente imagen:

14. Una vez creado el evento, damos clic con el botn derecho sobre el evento creado y aparecer un men del cual seleccionaremos ver cdigo. Esto nos permite ir al evento creado para darle funcionalidad a nuestra ventana.


15. Escribimos dentro del evento el cdigo

this.DragMove(); con lo cual nuestro evento quedara como se ve a continuacin:

Si ejecutas tu aplicacin observaras que ahora la ventana la puedes mover si seleccionas la barra de ttulo que creamos con el texto Ventana de Acceso.

Regresamos a nestra vista de diseo en la seccin MainWindow.xaml

16. Disearemos ahora la parte central de nuestra apli caci n, por lo que de beremos crear un nuevo

grid de la siguiente manera:

Una vez escrito esto, contina con la creacin de ms secciones dentro de esta ventana central, como se ve a continuaci n:


17. Ahora insertaremos una imagen, para ello usaremos la etiqueta imagen

Damos click al final de la palabra

18. Una vez cargada la imagen, debemos de agregarla a nuestro cdi go de la siguiente manera:

Que dando dentro de ventana como se muestra en la siguiente imagen:

Nota: Recuerda que la imagen ser la que tu hayas elegido, as como el nombre de dicha imagen.

19. Ahora crearemos los controles de dicha ventana, que sern los cuadros de te xto y dos botone s, comenzando con introducir el siguiente cdi go:

Y ahora creamos los botone s


Nuestra ventana se ver como se muestra en la siguiente imagen

20. Ahora daremos acci n a los controle s creados, para ello nos posi ci onamos en el cdi go, de spu s de la palabra salir (2 botn), y nos dirigimos a la ventana de propi e dade s, y damos click en el icono del rayo(eventos), lo que har se desplieguen los diferentes eventos que podemos crear.

Ubicamos el evento Click y escribimos BotonSalir(evento) y damos Ente r, lo que nos llevara al cdi go de dicho evento, el cual quedara como se muestra a conti nuaci n:

Este cdi go le dar la funcionalidad al botn Salir (cerrara la ventana de apli caci n).

21. Ahora proce deremos a dar formato a los controle s creados modi ficando y aadi endo nuevas

propiedade s a las etiquetas ya creadas.

10/ Programacin Orientada a Objetos E S I M E T i c o m a n , Mxico, 2015

22. Damos formato de igual manera a los botone s creados

23. Damos formato al te xto de los bloque s de te xto

24. Creare mos un eve nto para la imagen que permitir cambiar la imagen cuando el mouse se coloque sobre la imagen.

Para ello nos colocamos en la etiqueta imagen, de spu s del valor 100 y escri bi mos la propi e dad

MouseLeave=""

Y de igual manera crearemos un evento como lo hicimos en el paso 13, escribimos un nuevo evento llamado MouseEnter y de igual manera creamos un nuevo evento, lo cual quedara de la siguiente forma:

Y al posi ci onarnos con el mouse sobre el evento Image_MouseEnter y dar click con el botn derecho seleccionamos ver cdi go, lo que nos llevara a la ventana de cdigo y de beremos de tener el orden como se muestra.


25. Antes de continuar de bers de agregar una segunda imagen colocndote en la ventana del e xplorador de proye ctos, botn derecho, Agregar (Add) y Elemento Exi stente(Exi sting Item)

Y selecciona de nueva cuenta una segunda image n.

26. Una vez cargada tu segunda image n, de beras de escri bir el siguiente cdi go en los eventos creados:

Responde:

1) La creacin de controles a travs de cdi go de etiquetas se te complico y porque?

2) Crea una Ventana de acceso propia la cual contendr ahora tres cuadros los cuales pe di rn la informaci n de Nick, Password y corre o electrnico, tres botones los cuales sern Accesar, Ayuda y Cerrar.

3) Cul es la diferencia de este programa con relacin a los anteriores?

Una vez creados los programas, copia el cdigo en el documento de Word que creaste con la caratula y tus datos, el documento deber de contener los cdigos realizados, as, como las pantallas de captura de tu programa ejecutndose.

Al final anota un breve resumen de la creacin de aplicaciones visuales, posteriormente despus del resumen anota tus conclusiones.

Estas Prcticas debern de entregarse a ms tardar el da sbado 14/02/2015 antes de las 10:00 PM, toda prctica que no sea enviada dentro de este horario ser evaluada con cero.


Practica POO 2-3

Documents

Transcript of Practica POO 2-3