10.4.12

Aprender Windows Phone 7 (parte 54): Windows Phone Toolkit – HubTile

Vamos a ver otro de los controles que trae el Silverlight for Windows Phone Toolkit. Para recordar, este Toolkit en un paquete que contiene un montón de controles nuevos para utilizarlos en nuestras aplicaciones Windows Phone 7 que nos ahorran tener que desarrollarlos y probarlos nosotros. Y además son gratuítas.

En este tutorial vamos a aprender a manejar el control HubTile.



Este control te permite añadir tiles animadas dentro de tu aplicación (no en el Live Tile de tu aplicación) y utilizarlas para mostrar información.

Para los que no sepáis que es un Tile. Nos referimos a esos iconos que aparecen en la pantalla principal de Windows Phone 7.



El control HubTile te permite personalizar el tile cambiando la imagen que incorpora, el titulo, el mensaje y las notificaciones.

Si todavía no os habéis instalado este paquete tenéis este tutorial que hemos creado en este blog sobre cómo hacerlo paso a paso:

http://libreyextremo.blogspot.com/2011/11/aprender-windows-phone-7-parte-29-como.html


Creando la aplicación

Abrimos Visual Studio y creamos un nuevo proyecto, para ello hay que pulsar en el menú "File" -> opción "New Project".

En la nueva ventana he seleccionado las opciones "Visual C#" -> "Silverlight for Windows Phone" -> "Windows Phone Application". Los demás datos son:



Name = HubTileExample
Location = (la que queráis, yo lo puse en...) C:\A_warterrain_A\Ejemplos WP7\HubTileExample\
SolutionName = HubTileExample

A continuación se pide la versión de la aplicación. Seleccionamos Windows Phone 7.1 y damos a Ok.



Vamos a agregar la librería del Windows Phone Toolkit a nuestro proyecto. La librería se encuentra en el directorio bin dentro de la carpeta donde se descargó el paquete que será:

Para Sistemas Operativos de 64 bit:
C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Toolkit\

Para Sistemas Operativos de 32 bit:
C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Toolkit\

En mi caso la dll se encontraba en la ruta:

C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Toolkit\Aug11\Bin\ Microsoft.Phone.Controls.Toolkit.dll

Para agregar esta librería, hay que pulsar con el botón derecho en el elemento "References" de nuestro proyecto en el Explorador de Soluciones y seleccionar la opción "Add reference".



Tras buscar en la ruta la librería y agregarla aparecerá entre las referencias del proyecto:



A continuación, cuando en una página de la aplicación queramos utilizar los controles del toolkit, primero habrá que agregar el espacio de nombres del toolkit. Para ello en el archivo xaml de la página deberá agregarse la etiqueta xmlns:toolkit a la etiqueta phone:


Vamos a agregar una imagen para mostrarla en el tile. El nombre de la imagen será "ApplicationTileNew.png". Para ello pulsamos con el botón derecho en el proyecto y seleccionamos "Add" -> "Existing Item...":



Después hay que ir a las propiedades de la imagen agregada y poner su propiedad Build Action el valor "Content".

Para insertar el control HubTile, primero vamos a añadir en el código XAML nuestro control HubTile:



Veamos lo que hace el código XAML:
- Source: indica la imagen que aparecerá en el control HubTile.
- Title: es el título que aparecerá en el control.
- Message: es un mensaje adicional.
- Background: color de fondo del control Hub.

Si lanzamos la aplicación seleccionando "Debug" -> "Start Debugging" veremos lo siguiente:



También aparece el título pasado un momento:



Y un poco después aparecerá tanto el título como el mensaje:



Como véis es muy fácil de usar y puede mejorar mucho la experiencia de usuario de vuestra aplicación.


Modificando el control HubTile

Ya hemos visto el modo básico de utilizar un Control HubTile. Ahora vamos a ver cómo modificarlo.

Lo que quiero hacer es añadir un botón y que al pulsarlo, cambie el control Hub mostrando otro titulo, otro mensaje, otra imagen y teniendo otro color de fondo.

Muy sencillo.

He añadido un botón que hará el cambio. Cuando se pulse el botón se ejecutará un método buttonChangeHubTile_Click que modificará el título, el mensaje, el background y la imagen. Para ello ejecutaremos el código:

this.hubTile.Message = "Nuevos correos";
this.hubTile.Title = "Mi bandeja";
this.hubTile.Background = new SolidColorBrush(Colors.Blue);
this.hubTile.Source = new BitmapImage(new Uri("ApplicationIconChange.png", UriKind.RelativeOrAbsolute));

La imagen ApplicationIconChange.png que agregaremos (de igual forma que hicimos antes) es la siguiente:



Lanzamos la aplicación seleccionado "Debug" -> "Start Debugging".

Cuando pulsamos en el botón, se cambia el HubTile:





Muy sencillo.

Os dejo de ejercicio que metáis un evento Tap en el control HubTile. Y que cuando el usuario pulse en el HubTile, se abra una ventana con más información.


Os dejo el código fuente de estos este ejemplo:

Código fuente tutorial 54 aprender Windows Phone.


Tutorial desarrollado por Grupo Libre y Extremo (Talavera de la Reina).

No comments:

Post a Comment