Windows Phone 7 Panorama y Pivot
-
Upload
carola-velazquez -
Category
Documents
-
view
584 -
download
1
Transcript of Windows Phone 7 Panorama y Pivot
![Page 1: Windows Phone 7 Panorama y Pivot](https://reader034.fdocuments.us/reader034/viewer/2022042814/5561e88ed8b42a9d068b50a6/html5/thumbnails/1.jpg)
LABORATORIO DE WINDOWS PHONE
![Page 2: Windows Phone 7 Panorama y Pivot](https://reader034.fdocuments.us/reader034/viewer/2022042814/5561e88ed8b42a9d068b50a6/html5/thumbnails/2.jpg)
WINDOWS PHONE
![Page 3: Windows Phone 7 Panorama y Pivot](https://reader034.fdocuments.us/reader034/viewer/2022042814/5561e88ed8b42a9d068b50a6/html5/thumbnails/3.jpg)
CONTROL PANORAMA
![Page 4: Windows Phone 7 Panorama y Pivot](https://reader034.fdocuments.us/reader034/viewer/2022042814/5561e88ed8b42a9d068b50a6/html5/thumbnails/4.jpg)
CONTROL PIVOT
![Page 5: Windows Phone 7 Panorama y Pivot](https://reader034.fdocuments.us/reader034/viewer/2022042814/5561e88ed8b42a9d068b50a6/html5/thumbnails/5.jpg)
Ejercicio: Adictos al Cine
![Page 6: Windows Phone 7 Panorama y Pivot](https://reader034.fdocuments.us/reader034/viewer/2022042814/5561e88ed8b42a9d068b50a6/html5/thumbnails/6.jpg)
Ejercicio
• Crear un Nuevo Proyecto.• Comprender:
– Control Panorama: Items– MediaElement.– MediaElement.– Control Pivot: Items
• Usar:– Navegación.– Controles.– Personalización.
![Page 7: Windows Phone 7 Panorama y Pivot](https://reader034.fdocuments.us/reader034/viewer/2022042814/5561e88ed8b42a9d068b50a6/html5/thumbnails/7.jpg)
Nuevo Proyecto
• Crear nuevo Proyecto en Visual Studio para Windows Phone
![Page 8: Windows Phone 7 Panorama y Pivot](https://reader034.fdocuments.us/reader034/viewer/2022042814/5561e88ed8b42a9d068b50a6/html5/thumbnails/8.jpg)
Crear Proyecto
![Page 9: Windows Phone 7 Panorama y Pivot](https://reader034.fdocuments.us/reader034/viewer/2022042814/5561e88ed8b42a9d068b50a6/html5/thumbnails/9.jpg)
Crear Proyecto
![Page 10: Windows Phone 7 Panorama y Pivot](https://reader034.fdocuments.us/reader034/viewer/2022042814/5561e88ed8b42a9d068b50a6/html5/thumbnails/10.jpg)
Crear Proyecto
• Cambiar el Nombre de la App
![Page 11: Windows Phone 7 Panorama y Pivot](https://reader034.fdocuments.us/reader034/viewer/2022042814/5561e88ed8b42a9d068b50a6/html5/thumbnails/11.jpg)
Control Panorama
• Cambiamos el nombre al Título del Panorama
![Page 12: Windows Phone 7 Panorama y Pivot](https://reader034.fdocuments.us/reader034/viewer/2022042814/5561e88ed8b42a9d068b50a6/html5/thumbnails/12.jpg)
Control Panorama
• Arrastra las imágenes que usas a tu proy.
![Page 13: Windows Phone 7 Panorama y Pivot](https://reader034.fdocuments.us/reader034/viewer/2022042814/5561e88ed8b42a9d068b50a6/html5/thumbnails/13.jpg)
Control Panorama
• Personalizar el fondo:
![Page 14: Windows Phone 7 Panorama y Pivot](https://reader034.fdocuments.us/reader034/viewer/2022042814/5561e88ed8b42a9d068b50a6/html5/thumbnails/14.jpg)
Control Panorama - Items
• Dos Items
![Page 15: Windows Phone 7 Panorama y Pivot](https://reader034.fdocuments.us/reader034/viewer/2022042814/5561e88ed8b42a9d068b50a6/html5/thumbnails/15.jpg)
Control Panorama - Items
• Colocar Tres Items al Panorama
![Page 16: Windows Phone 7 Panorama y Pivot](https://reader034.fdocuments.us/reader034/viewer/2022042814/5561e88ed8b42a9d068b50a6/html5/thumbnails/16.jpg)
Control Panorama – Item 1
• Abre MainViewModel.cs en la carpeta ViewsModels
![Page 17: Windows Phone 7 Panorama y Pivot](https://reader034.fdocuments.us/reader034/viewer/2022042814/5561e88ed8b42a9d068b50a6/html5/thumbnails/17.jpg)
Control Panorama – Item 1
• En LoadData() debe quedar:
Porque sólo se visualizan dos lineas?
![Page 18: Windows Phone 7 Panorama y Pivot](https://reader034.fdocuments.us/reader034/viewer/2022042814/5561e88ed8b42a9d068b50a6/html5/thumbnails/18.jpg)
Control Panorama – Item 1
• Cambiar Rectángulos por Imágenes
![Page 19: Windows Phone 7 Panorama y Pivot](https://reader034.fdocuments.us/reader034/viewer/2022042814/5561e88ed8b42a9d068b50a6/html5/thumbnails/19.jpg)
Control Panorama – Item 2
• Agregar un Video
![Page 20: Windows Phone 7 Panorama y Pivot](https://reader034.fdocuments.us/reader034/viewer/2022042814/5561e88ed8b42a9d068b50a6/html5/thumbnails/20.jpg)
Control Panorama – Item 2
![Page 21: Windows Phone 7 Panorama y Pivot](https://reader034.fdocuments.us/reader034/viewer/2022042814/5561e88ed8b42a9d068b50a6/html5/thumbnails/21.jpg)
Control Panorama – Item 2
• Manejar el Video
![Page 22: Windows Phone 7 Panorama y Pivot](https://reader034.fdocuments.us/reader034/viewer/2022042814/5561e88ed8b42a9d068b50a6/html5/thumbnails/22.jpg)
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
![Page 23: Windows Phone 7 Panorama y Pivot](https://reader034.fdocuments.us/reader034/viewer/2022042814/5561e88ed8b42a9d068b50a6/html5/thumbnails/23.jpg)
• 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
![Page 24: Windows Phone 7 Panorama y Pivot](https://reader034.fdocuments.us/reader034/viewer/2022042814/5561e88ed8b42a9d068b50a6/html5/thumbnails/24.jpg)
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
![Page 25: Windows Phone 7 Panorama y Pivot](https://reader034.fdocuments.us/reader034/viewer/2022042814/5561e88ed8b42a9d068b50a6/html5/thumbnails/25.jpg)
• 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>
![Page 26: Windows Phone 7 Panorama y Pivot](https://reader034.fdocuments.us/reader034/viewer/2022042814/5561e88ed8b42a9d068b50a6/html5/thumbnails/26.jpg)
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!
![Page 27: Windows Phone 7 Panorama y Pivot](https://reader034.fdocuments.us/reader034/viewer/2022042814/5561e88ed8b42a9d068b50a6/html5/thumbnails/27.jpg)
Control Pivot
• Agraga un nuevo elemento
![Page 28: Windows Phone 7 Panorama y Pivot](https://reader034.fdocuments.us/reader034/viewer/2022042814/5561e88ed8b42a9d068b50a6/html5/thumbnails/28.jpg)
Control Pivot - Items
![Page 29: Windows Phone 7 Panorama y Pivot](https://reader034.fdocuments.us/reader034/viewer/2022042814/5561e88ed8b42a9d068b50a6/html5/thumbnails/29.jpg)
Control Pivot – Item 1
![Page 30: Windows Phone 7 Panorama y Pivot](https://reader034.fdocuments.us/reader034/viewer/2022042814/5561e88ed8b42a9d068b50a6/html5/thumbnails/30.jpg)
Control Pivot – Item 2
• Inserta Links:
![Page 31: Windows Phone 7 Panorama y Pivot](https://reader034.fdocuments.us/reader034/viewer/2022042814/5561e88ed8b42a9d068b50a6/html5/thumbnails/31.jpg)
Control Pivot – Item 3
![Page 32: Windows Phone 7 Panorama y Pivot](https://reader034.fdocuments.us/reader034/viewer/2022042814/5561e88ed8b42a9d068b50a6/html5/thumbnails/32.jpg)
Navegacion Panorama - Pivot
![Page 33: Windows Phone 7 Panorama y Pivot](https://reader034.fdocuments.us/reader034/viewer/2022042814/5561e88ed8b42a9d068b50a6/html5/thumbnails/33.jpg)
Navegacion Panorama - Pivot
![Page 34: Windows Phone 7 Panorama y Pivot](https://reader034.fdocuments.us/reader034/viewer/2022042814/5561e88ed8b42a9d068b50a6/html5/thumbnails/34.jpg)
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!
![Page 35: Windows Phone 7 Panorama y Pivot](https://reader034.fdocuments.us/reader034/viewer/2022042814/5561e88ed8b42a9d068b50a6/html5/thumbnails/35.jpg)
![Page 36: Windows Phone 7 Panorama y Pivot](https://reader034.fdocuments.us/reader034/viewer/2022042814/5561e88ed8b42a9d068b50a6/html5/thumbnails/36.jpg)
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
![Page 37: Windows Phone 7 Panorama y Pivot](https://reader034.fdocuments.us/reader034/viewer/2022042814/5561e88ed8b42a9d068b50a6/html5/thumbnails/37.jpg)
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