Reto Windows Phone: Control Panorama
¿Qué necesito para empezar?
Para empezar a programar aplicaciones Windows Phone necesitamos descargarnos las Windows Phone developer tools 7.1 Beta 2. Con estas herramientas se puede desarrollar tanto para la versión 7 como para la versión 7.1 o Mango, que es la próxima actualización del sistema operativo.
La descarga incluye a parte de las herramientas para Windows Phone y el emulador, el SDK de Silverlight 4 y DRT, la actualización de las extensiones de XNA Game Studio 4.0, el SDK de Expresion Blend y los WCF Data Services Client para Windows Phone 7.1.
En caso de no tener una versión de Visual Studio 2010 Profesional o superior se instalará Visual Studio 2010 Express para Windows Phone junto con los demás componentes.
Estamos atentos a tus comentarios en el twitter de @esmsdn y en el hashtag #retosmsdn.
Panorama
El control Panorama es un control que se usa como pantalla principal de una aplicación Windows Phone. Este control se caracteriza por extenderse más allá de los limites de la pantalla pudiendo introducir en él la información que queramos destacar de la aplicación. Como ejemplo tenemos el Hub de imágenes, el de contactos, Xbox Live, Marketplace…
Navegación panorámica
Este control permite desplazarse horizontalmente para ir viendo los distintos elementos que contiene.Conforme nos vamos desplazando el título y el fondo se desplazan también dando la sensación de continuidad y mostrando un poco de los elementos que están a los lados.
No mostrar el contenido por completo o mostrar un poco del contenido de los elementos contiguos es importante ya que el usuario tiene que intuir que hay más información,que no se muestra todo el contenido en la sección que se está mostrando en ese momento, y así hagamos que el usuario navegue por todos los elementos del control.
El sistema de navegación ya viene implementado. Nosotros sólo tendremos que diseñar el contenido que queremos que aparezcan en los elementos del control.
Crear aplicación Panorama
Para ver el funcionamiento del control Panorama vamos a crear un proyecto Silverlight para Windows Phone y elegiremos crear una nueva aplicación Windows Phone Panorama. Le daremos el nombre DemoPanorama y aceptaremos.
Nos mostrará un cuadro para elegir la versión de Windows Phone para la que queremos programar. Diremos que Windows Phone 7.1 y aceptaremos.
Una vez creado el proyecto se nos mostrara la vista de diseño y la vista XAML. Lo siguiente que vamos a hacer es identificar las partes del control Panorama con su correspondiente código XAML para que sea más fácil modificar el control para mostrar nuestro propio contenido.
El control tiene un título, una imagen de fondo y una serie de elementos llamados PanoramaItem. Por defecto vienen 2 PanoramaItem, marcados en la imagen en verde y marrón, y se recomiendo no utilizar más de 4 de estos elementos y no sobrecargarlos con muchos controles.
Dentro del PanoramaItem está el contenido. Este contenido lo forma un Header como titulo de los elementos a mostrar, y normalmente un Listbox que contiene los elementos.
Panorama+MVVM
El patron MVVM(Model-View-ViewModel) es un patrón de diseño para permitir un mejor testeo debido a que se intenta no incluir código en el code-behind de las vistas, siendo en el ViewModel donde se exponen y controlan los datos y acciones. Este reto trata sobre el control panorama y no se explicará más conceptos sobre el patrón MVVM.
El Listbox correspondiente a los elementos que se muestran en el PanoramaItem está enlazado con la propiedad Items con lo que los elementos que se mostrarán dentro de ese Listbox serán los elementos que tengamos en esa propiedad. Para mostrarlos se utiliza una plantilla donde tenemos 2 TextBlock, uno que mostrará el contenido LineOne y otro para el LineTwo.
Al seguir el patrón MVVM estos vemos que tenemos 1 carpeta llamada ViewModels que será donde crearemos y cargaremos los datos que queremos mostrar en cada vista. También nos tendremos que crear otra carpeta llamada Views donde estarán todas las pantallas de nuestra aplicación y otro Models donde estarán nuestros modelos de datos que usaremos para mostrar en las vistas. En la carpeta ViewModels podemos ver la clase ItemViewModel.cs y la clase MainViewModel.cs .
Un ItemViewModel es uno de los elementos que se están mostrando en los ListBox y se compone de 3 cadenas de texto, una para cada línea.
La clase MainViewModel es donde tenemos definida la propiedad Items que es una colección de elementos tipo ItemViewModel. También tenemos el método que carga los datos que queremos mostrar. En esta clase es donde iremos creando y cargando los datos que vamos a mostrar en los diferentes PanoramaItem.
Adaptar el control
Ahora que ya sabemos qué es un control Panorama y cómo se implementa vamos a modificar el segundo Item como ejemplo para que muestre una imagen en lugar de mostrar un cuadrado rojo.
La imagen va a ser el logo del blog de MSDN España y la vamos a coger directamente desde internet para este ejemplo.
Primero vamos a modificar el modelo. En la clase ItemViewModel añadimos otra propiedad donde guardaremos la ruta de la imagen. La llamaremos ImageUrl.
private string _imageUrl; public string ImageUrl { get { return _imageUrl; } set { if (value != _imageUrl) { _imageUrl = value; NotifyPropertyChanged("ImageUrl"); } } } |
El siguiente paso es añadir a la carga de los datos esta nueva propiedad. En el método LoadData tendremos que inicializar el ItemViewModel con la ruta del logo también.
this.Items.Add(new ItemViewModel() { LineOne = "Item1", LineTwo = "Cambio rectángulo por imagen", ImageUrl = "https://i1.social.microsoft.com/profile/u/avatar.jpg?displayname=esmsdn&size=large" }); this.Items.Add(new ItemViewModel() { LineOne = "Item2", LineTwo = "Cambio rectángulo por imagen", ImageUrl = "https://i1.social.microsoft.com/profile/u/avatar.jpg?displayname=esmsdn&size=large" }); |
El último paso es cambiar la plantilla de la vista sustituyendo el cuadrado rojo por una imagen y enlazar la propiedad Source de la imagen con la propiedad ImageUrl.
<Image Source="{Binding ImageUrl}" Height="100" Width="100" Margin="12,0,9,0"/> |
Tu turno… ¡el Reto! – Hub de imágenes
En la sección Panorama del reto tenemos una imagen del Hub de imágenes de Windows Phone. Como reto os proponemos modificar el control Panorama que tenemos por defecto para hacerlo igual al Hub de imágenes.
Pista : Se puede hacer de varias formas. Nosotros os proponemos crear 3 propiedades de tipo ItemViewModel, una por cada PanoramaItem, y la carga de datos hacerla estática (no es necesario cargar imágenes dinámicamente de algún proveedor tipo Flickr o Facebook, coger imágenes de los retos). También cambiar ImageUrl a tipo lista para que pueda tener varias imágenes. En el segundo Item utilizar un Grid de 4x2.
Recursos: Centro de desarrollo de Windows Phone
Solución: https://msdn.microsoft.com/es-es/windowsphone/hh527031
Participa: twitter de @esmsdn o hashtag #retosmsdn.
José Perona – @JVPerona - Developer Evangelist Jr.
Ver el primer Reto Windows Phone: Mi primera interfaz metro
Ver el segundo Reto Windows Phone: Navegar por tu aplicación