PROGRAM ACIN ORIENTADA A OBJETOS

3er. PARCIAL

Instituto Politcni co Naci onal

Practica #2

Disear ventana de Interfaz

Daniel V zquez de la Rosa
d_vazquez@outlook.com

Ingeni era en Aeronuti ca

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

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

1/4

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.

Programacin Orientada a Objetos

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

2/4

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.

Programacin Orientada a Objetos

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

3/4

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 <Border CornerRadius="100"> y escribe:
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
</Grid>
Esto hara que se creen tres secciones en tu ventana que acabas de disear.

Posteriormente escribirs debajo de </Grid.RowDefinitions> el siguiente texto y ve observando los

cambios en la ventana cada que escribes una lnea.
<TextBlock Grid.Row="0" Text="Ventana de Acceso" TextAlignment="Center"></TextBlock>
<Border Grid.Row="1"></Border>
<TextBlock Grid.Row="2" Text="Barra de Estado"></TextBlock>
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.

Programacin Orientada a Objetos

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

4/4

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:

Programacin Orientada a Objetos

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

5/4

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.

Programacin Orientada a Objetos

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

6/4

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:

Programacin Orientada a Objetos

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

7/4

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

Damos click al final de la palabra <image y nos dirigimos a la ventana de l explorador en visual C#, y
nos posi ci onamos sobre el nombre de nuestro proye cto que es Aplicaci on2, damos click con el botn
derecho y seleccionamos Agregar (Add) y Ele mento Exi stente (Existing Item)

Al hacer esto se desplegara una ventana del e xplorador de Windows, donde de be rs dirigirte a tu
carpe ta donde tengas imge nes, sin embargo de be rs especificar el tipo o formato de imagen que de sea
agregar dando click en la opci n inferi or. (Selecciona el formato .gi f, .jpg, .png) y selecciona la imagen
que desees.
Esto har que se agregue la imagen a nuestro e xplorador de visual C#

Programacin Orientada a Objetos

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

8/4

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

Programacin Orientada a Objetos

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

9/4

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.

Programacin Orientada a Objetos

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

10/

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.

Programacin Orientada a Objetos

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

11/

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.

Programacin Orientada a Objetos

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

12/