windows phone 7 panorama y pivot

LABORATORIO DE WINDOWS PHONE

WINDOWS PHONE

CONTROL PANORAMA

CONTROL PIVOT

Ejercicio: Adictos al Cine

Ejercicio

• Crear un Nuevo Proyecto.• Comprender:

– Control Panorama: Items– MediaElement.– MediaElement.– Control Pivot: Items

• Usar:– Navegación.– Controles.– Personalización.

Nuevo Proyecto

• Crear nuevo Proyecto en Visual Studio para Windows Phone

Crear Proyecto

Crear Proyecto

Crear Proyecto

• Cambiar el Nombre de la App

Control Panorama

• Cambiamos el nombre al Título del Panorama

Control Panorama

• Arrastra las imágenes que usas a tu proy.

Control Panorama

• Personalizar el fondo:

Control Panorama - Items

• Dos Items

Control Panorama - Items

• Colocar Tres Items al Panorama

Control Panorama – Item 1

• Abre MainViewModel.cs en la carpeta ViewsModels

Control Panorama – Item 1

• En LoadData() debe quedar:

Porque sólo se visualizan dos lineas?

Control Panorama – Item 1

• Cambiar Rectángulos por Imágenes

Control Panorama – Item 2

• Agregar un Video

Control Panorama – Item 2

Control Panorama – Item 2

• Manejar el Video

Control Panorama – Item 3

• Agrega el Proyecto que realizaste en el lab anterior: Convertidor de Unidades

Click derecho sobre

la Solucion (no el la Solucion (no el

proyecto),

selecciona la opción

de “Agregar” y

luego “Agregar un

Proyecto Existente”

Elegi el nombre de tu

proyecto anterior:

App Convertidor de

Unidades

• Agrega el Proyecto como una referencia para poder usarlo en tu App Cine:

Control Panorama - Item 3

Click derecho

sobre sobre

“References”,

Agregar referencia

Elije la Pestaña

Proyectos y

selecciona el

Proyecto, luego

Aceptar

Control Panorama - Item 3

• Importa la referencia con el espacio de nombres de tu Proyecto y el alias “local”

Escribe xmlns:local=“ ” y

dentro del paréntesis

ingresa la tecla “c” y se

te desplegará un menú te desplegará un menú

de opciones, selecciona

el nombre del proyecto

que agregaste como

referencia en el paso

anterior.

Te debe quedar un código similar, variará el nombre de tu Proyecto

• Agrega la App Convertidor de la siguiente manera:

En MainPage.xaml de tu App de Peliculas:<controls:PanoramaItem Header="My App">

<local:segundaPagina>

Control Panorama – Item 3

<local:segundaPagina></controls:PanoramaItem>

Control Panorama – Item 3

• Comenta el botón Volver en la segundaPagina.xml y coloca en “Auto” las Propiedades Height de las filas, excepto en la ultima.en la ultima.

Prueba tu App!

Control Pivot

• Agraga un nuevo elemento

Control Pivot - Items

Control Pivot – Item 1

Control Pivot – Item 2

• Inserta Links:

Control Pivot – Item 3

Navegacion Panorama - Pivot

Navegacion Panorama - Pivot

Navegacion Panorama - Pivot

Prueba tu App!• Seguramente notarás que en el Item 1 del Control

Panorama, todas las películas van al mismo Control Pivot, utilizando lo aprendido reemplaza el código por controles como Imágenes y TextBlock, código por controles como Imágenes y TextBlock, en Grid o StackPanel para que queden de manera similar y cada película navegue a su control Pivot.

• También puedes realizar cambios como agregar un nuevo Item al Control Pivot y colocar allí los trailers de cada Película.

• Personaliza tu App!

Paginas de Interés• http://mspcarojujuy.wordpress.com• http://cells.puertadeenlace.net• http://msdn.microsoft.com/en-us/library/ff431744(VS.92).aspx• http://www.microsoft.com/design/toolbox/• http://create.msdn.com/en-us/home/getting_started• http://create.msdn.com/en-us/home/getting_started

Email de Contacto• caro_eve@hotmail.com• nosesiloleo@hotmail.com

• matias_alfaro@arnet.com.ar

Carola VelazquezManuel TolabaMatias Alfaro

Realiza tu Aplicación:

• Realiza una app sobre tu idolo, un • Realiza una app sobre tu idolo, un actor, un deportista o sobre un tema.•Agrega enlaces a páginas como Wikipedia, Facebook y Twitterrelacionados a tu tema.•Agrega información relacionada usando los controles vistos.• Personaliza tu app cambiando las imágenes.

Sube tu App a Yallapps