windows phone 7 panorama y pivot
TRANSCRIPT
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• [email protected]• [email protected]
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