23.11.11

Aprender Windows Phone 7 (parte 28): Mejora con live tiles tus apps Windows Phone 7 Mango

Los usuarios de WP7 pueden poner accesos directos a nuestras aplicaciones en la pantalla principal de WP7. Estos iconos se llaman Tiles.



Antes de Windows Phone 7 Mango estos Tiles eran estáticos. Sin embargo ahora esto ya no es así. Se pueden cambiar haciendo que muestren información útil para el usuario.

Se puede cambiar los siguientes aspectos:
- BackgroundImage (imagen de fondo).
- Title (titulo del tile).
- Count (contador que aparece en la esquina superior derecha del tile).
- Back Title (título del segundo tile que aparece transcurrido cierto tiempo).
- Back BackGroundImage (imagen de fondo del segundo tile que aparece transcurrido cierto tiempo).
- Back Content (texto adicional del segundo tile que aparece transcurrido cierto tiempo).



Para aprender a modificar el tile de nuestra aplicación, vamos a hacer un ejemplo muy sencillo. Vamos a tener cuatro imágenes para nuestra aplicación y vamos a cambiar los 6 atributos del live tile.






Para ello agregaremos la librería:

using Microsoft.Phone.Shell;

Y en el cófigo primero obtendremos los Tiles de la aplicación con la instrucción:

ShellTile currentTiles = ShellTile.ActiveTiles.First();


Después definiremos los atributos del live tile a utilizar:

var tilesUpdatedData = new StandardTileData
{
Title = "Live Tile app",
BackgroundImage = new Uri("Background_SB.png", UriKind.Relative),
Count = 1,
BackContent = "Matricula",
BackTitle = "¡Muy bien!",
BackBackgroundImage = new Uri("Background.png", UriKind.Relative)
};

Y para establecer el live tile usaremos la instrucción:

currentTiles.Update(tilesUpdatedData);



Creando el proyecto

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 = LiveTileExample
Location = (la que queráis, yo lo puse en...) C:\A_warterrain_A\Ejemplos WP7\ LiveTileExample \
SolutionName = LiveTileExample



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



Vamos a cambiar el interfaz de la página:

- Titulo “LIVE TILE APP”
- Titulo “principal”.
- Un ListItem con cuatros items para cada imagen a cargar en el live tile.
- Y un Button para hacer los cambios.

Con el siguiente formato final:



Cuando se pulse el botón “Cambiar Tile” se ejecutará el siguiente código fuente:

private void button_Click(object sender, RoutedEventArgs e)
{
var tilesUpdatedData = new StandardTileData
{
Title = "Live Tile app",
BackgroundImage = new Uri("Background_SB.png", UriKind.Relative),
Count = 4,
BackContent = "No puntuado",
BackTitle = "No sabe",
BackBackgroundImage = new Uri("Background.png", UriKind.Relative)
};

ShellTile currentTiles = ShellTile.ActiveTiles.First();

switch (listBoxBackGroundImage.SelectedIndex)
{
case 0:
tilesUpdatedData = new StandardTileData
{
Title = "Live Tile app",
BackgroundImage = new Uri("Background_SB.png", UriKind.Relative),
Count = 1,
BackContent = "Matricula",
BackTitle = "¡Muy bien!",
BackBackgroundImage = new Uri("Background.png", UriKind.Relative)
};
break;
case 1:
tilesUpdatedData = new StandardTileData
{
Title = "Live Tile app",
BackgroundImage = new Uri("Background_N.png", UriKind.Relative),
Count = 2,
BackContent = "Notable",
BackTitle = "¡Bien!",
BackBackgroundImage = new Uri("Background.png", UriKind.Relative)
};
break;
case 2:
tilesUpdatedData = new StandardTileData
{
Title = "Live Tile app",
BackgroundImage = new Uri("Background_B.png", UriKind.Relative),
Count = 3,
BackContent = "Bien",
BackTitle = "¡Sigue asi!",
BackBackgroundImage = new Uri("Background.png", UriKind.Relative)
};
break;
default:
tilesUpdatedData = new StandardTileData
{
Title = "Live Tile app",
BackgroundImage = new Uri("Background_SS.png", UriKind.Relative),
Count = 4,
BackContent = "Suspenso",
BackTitle = "¡Mal!",
BackBackgroundImage = new Uri("Background.png", UriKind.Relative)
};
break;
}

currentTiles.Update(tilesUpdatedData);

}


Pues vamos a ver qué tal ha quedado. Pulsamos en “Debug” -> “Start debugging” arrancaremos el emulador.

Tras un momento en que se ha estado iniciando el emulador, veréis el programa en el emulador de Windows Phone 7.

Podéis seleccionar un item y pulsamos el botón “Cambiar Tile”. Y después pulsamos Back para salir de la aplicación y ver el nuevo Tile.



Para verlo, pulsamos sobre el icono LiveTileExample y dejamos pulsado hasta que aparezca el menú contextual.



Y seleccionamos “Pin to Start” para que ponga el Tile de la aplicación en la pantalla de inicio.

En la pantalla principal aparece el nuevo live Tile.



Aparece la nueva imagen en el tile, con un nuevo titulo y un valor en el contador.

Cuando pasa cierto tiempo se muestran los atributos BackBackground, BackTitle y BackContent.



Podéis entrar en la aplicación y seleccionar otro Tile y volver a salir para ver el cambio en el tile de la aplicación.

Esto da mucho juego.

Las posibilidades son infinitas.

Cuando creéis una aplicación y penséis en crear un Live Tile para vuestra aplicación, plantearos:

¿Qué sería útil mostrar en el Tile de mi aplicación para mis usuarios?

¿Qué necesitan ver en el tile?

Nada más. Disfrutadlo.

No comments:

Post a Comment