Windows Phone. El Tile de Aplicación.

Los Tiles (baldosas) son uno de los pilares fundamentales de la atractiva interfaz de usuario que tenemos disponible en Windows Phone.

Su funcionalidad básica es la de redirigir al usuario a cierto contenido tras pulsar sobre ellos.

Tenemos disponibles dos tipos de Tiles:

  • Tile de Aplicación.Es el acceso directo a una aplicación creado por el usuario tras anclar al incio la misma.
  • Tiles Secundarios. Se crean desde una aplicación en concreto por una acción realizada por el usuario.

En esta entrada vamos a centrar toda nuestra atención en el primer tipo de Tiles, los Tiles de Aplicación.

El Tile de Aplicación se ancla al inicio por una acción realizada por el usuario. Aunque no esté anclado, siempre existe. No se puede borrar.

Propiedades

Los Tiles tienen dos vistas distintas, la frontal y la trasera (tras producirse un rotación). En ambas vistas podemos mostrar información.

¿Que tipo de información?

En la vista frontal podemos lograr algo como lo siguiente:

Contamos con las siguientes propiedades:

  • Contador. Espera un valor numérico comprendido entre 0 y 99. Muy útil para realizar notificaciones. Por ejemplo, número de mensajes pendientes.
  • Imagen. Es la imágen que mostrará el Tile de fondo. El tamaño recomendado es de 173x173px. El formato puede ser jpg y png. Es recomendable utilizar png para aprovechar las transparencias.
  • Título. Cadena que podemos utilizar para proporcionar información.

En la vista trasera podemos llegar a mostrar algo como lo siguiente:

Las propiedades con las que contamos son:

  • Contenido. Es una cadena que nos ayuda a proporcionar una información extra al usuario. podemos dejar al cadena vacía y no se mostraría al usuario.
  • Imagen. Al igual que en la vista frontal, es la imagen de fondo.
  • Título. Cadena con información para el usuario. Al igual que el contenido puede dejarse como cadena vacía.

Vamos a trabajar con ellos. Para ello como solemos hacer vamos a crear un proyecto para realizar las pruebas.

Creamos un nuevo proyecto:

La plantilla seleccionada será “Windows Phone Application” para simplificar al máximo el ejemplo.

La información básica del Tile viene establecida en el archivo de manifiesto, WMAppManifiest.xml. En futuras entradas hablaremos mejor de este archivo. De momento, nos quedaremos con que es un archivo xml y que la sección que nos interesa es una llamada TemplateType5:

<TemplateType5>
     <BackgroundImageURI IsRelative="true" IsResource="false">Background.png</BackgroundImageURI>
     <Count>0</Count>
     <Title>El tiempo</Title>
</TemplateType5>


Podemos ver establecido el título, el contador y la imágen del Tile. Vamos a modificar esos parámetros (y alguno más) desde código. Para ello vamos a crearnos la siguiente interfaz:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <StackPanel>
          <Button x:Name="btnImagen" Content="Cambiar imágen Tile"/>
          <Button x:Name="btnContador" Content="Cambiar contador"/>
          <Button x:Name="btnContenido" Content="Cambiar contenido"/>
          <Button x:Name="btnTrasera" Content="Cambiar imágen Vista Trasera"/>
     </StackPanel>
</Grid>

Tenemos cuatro botones. Cada uno de ellos nos permitirá modificar alguna de las propiedades principales del Tile (podríamos modificarlas todas juntas en un único botón, lo realizamos así buscando conseguir el mejor resultado didáctico). Vamos a añadir los eventos Click de cada botón:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <StackPanel>
          <Button x:Name="btnImagen" Content="Cambiar imágen Tile" Click="btnImagen_Click"/>
          <Button x:Name="btnContador" Content="Cambiar contador" Click="btnContador_Click"/>
          <Button x:Name="btnContenido" Content="Cambiar contenido" Click="btnContenido_Click"/>
          <Button x:Name="btnTrasera" Content="Cambiar imágen Vista Trasera" Click="btnTrasera_Click"/>
     </StackPanel>
</Grid>

 

private void btnImagen_Click(object sender, RoutedEventArgs e)
{

}

private void btnContador_Click(object sender, RoutedEventArgs e)
{

}

private void btnContenido_Click(object sender, RoutedEventArgs e)
{

}

private void btnTrasera_Click(object sender, RoutedEventArgs e)
{

}

Puesto que vamos a necesitar la API ShellTile para poder cumplir nuestras pretensiones, debemos añadir el siguiente using:

using Microsoft.Phone.Shell;

Recordamos que la API ShellTile es la que nos permite trabajar con los Live Tiles de nuestra aplicación. Para actualizar la información del Tile de la Aplicación utilizaremos el método Update de la API. Dicho método espera un objeto de tipo StandardTileData. El objeto StandardTileData incluye la información básica del Tile.

Lo primero que vamos a hacer es incluir en el proyecto los recursos que nos harán falta. Necesitamos la imágen que mostraremos en el Tile. Hacemos clic derecho sobre el proyecto y seleccionamos “Agregar Nueva Carpeta”. La llamamos “IMGS”.

A continuación, hacemos clic derecho sobre la carpeta creada y seleccionamos la opción “Agregar elemento existente”:

Buscamos la imágen deseada y la agregamos al proyecto.

Tras agregar la imagen que utilizaremos, veremos el evento del primer botón que actualiza la imágen del Tile utilizando la imágen que acabamos de añadir. Para ello, asignamos una Uri la propiedad BackgroundImage:

private void btnImagen_Click(object sender, RoutedEventArgs e)
{
     //Obtenemos el primer Tile activo que será siempre el de la aplicación:
     ShellTile tileAplicacion = ShellTile.ActiveTiles.First();

     StandardTileData tileInfo = new StandardTileData();
     tileInfo.BackgroundImage = new Uri("/IMGS/Sol.png", UriKind.Relative);

     tileAplicacion.Update(tileInfo);
}

El siguiente botón debe modificar el contador del Tile. Para ello utilizamos la propiedad Count. Espera un entero entre 1 y 99.

private void btnContador_Click(object sender, RoutedEventArgs e)
{
     ShellTile tileAplicacion = ShellTile.ActiveTiles.First();

     StandardTileData tileInfo = new StandardTileData();
     tileInfo.Count = 33;

     tileAplicacion.Update(tileInfo);
}

También podemos modificar el título del Tile utilizando la propiedad Title:

private void btnContenido_Click(object sender, RoutedEventArgs e)
{
     ShellTile tileAplicacion = ShellTile.ActiveTiles.First();

     StandardTileData tileInfo = new StandardTileData();
     tileInfo.Title = "Soleado";

     tileAplicacion.Update(tileInfo);
}

Por último nos centraremos en como modificar la vista trasera del Tile. Podemos modificar el título, contenido e imágen utilizando las propiedades BackTitle, BackContent y BackBackgroundImage respectivamente:

private void btnTrasera_Click(object sender, RoutedEventArgs e)
{
     ShellTile tileAplicacion = ShellTile.ActiveTiles.First();

     StandardTileData tileInfo = new StandardTileData();
     tileInfo.BackTitle = "El Tiempo";
     tileInfo.BackContent = "Soleado";
     tileInfo.BackBackgroundImage = new Uri("/IMGS/Sol.png", UriKind.Relative);

     tileAplicacion.Update(tileInfo);
}

NOTA: El cambio entre la parte delantera y la trasera del Tile se realiza de manera automática.

Puedes ver en video el resultado de nuestro ejemplo a continuación:

También puedes descargar el ejemplo realizado:

Nada más en esta entrada. Os recomiendo encarecidamente aprovechar esta funcionanlidad. La suelen valorar muy positivamente los usuarios. Si os surgen dudas o sugerencias podéis dejarlas en los comentarios.

Más información:

MSDN: Tiles Overview for Windows Phone. En inglés.

WindowsPhoneGeek: WP7 Application Icon and Application Tile Icon. En inglés.

Blog Libre y Extremo: Aprender Windows Phone 7 (parte 28): Mejora con live tiles tus apps Windows Phone 7 Mango. En español.

11 pensamientos en “Windows Phone. El Tile de Aplicación.

  1. Buen día

    Tengo una duda, es posible hacer este tipo de tile personalizados, que el contador no sea el circulo, o que el tile sea animado, que tenga algún tipo de control en el? que no conste simplemente del contador, imagen, nombre, titulo.

    • Buenas Cristian!

      Me decidí a escribir este artículo adelantando a otros temas de interés que tengo en cola, precisamente por tu pregunta en otra entrada. Bien, como vemos en el artículo, podemos personalizar el texto e imágen de la vista delantera y la trasera. También podemos utilizar el contador a nuestro gusto de manera muy sencilla. Sin embargo, no podemos modificar la forma del Tile (crear Tiles con forma de estrella por poner un ejemplo), ni la del contador, o la animación del Tile.
      Sin embargo, y a pesar de las limitaciones, veo el uso de Tiles una herramienta muy poderosa. También tenemos a nuestra disposición el uso de Tiles Secundarios que vimos en la siguiente entrada:

      https://javiersuarezruiz.wordpress.com/2012/04/30/windows-phone-tiles-secundarios

      El uso combinado quizás cumpla tus requisitos. También tenemos la posibilidad de refrescar periodicamente los Tiles. Además en muchas ocasiones el refresco del Tile viene acompañado de un buen uso del sistema de notificaciones. Ambos temas los abordaremos en futuras entradas. En caso de que con lo visto no puedas realizar lo que deseas, ¿podrías indicar más información?, ¿que tienes en mente (si se puede contar de manera superficial)?. A mayor información, mejor podremos ayudar.

      Gracias José por tus correctas puntualizaciones (la experiencia de cara al usuario es vital en Windows Phone desde su orígen, buena puntualización con respecto a la homogeneidad). No tengo constancia de momento de cambios en este aspecto en Windows Phone 8 (aunque claro, poco o nada se sabe, a ver si en el Windows Phone Developer Summit conocemos más detalles). Estoy encantado con la creciente participación en las entradas. Una gran motivación para que entre todos vayamos compartiendo más y más conocimientos.

      Un saludo.

      P.D: Gracias José por el enlace a mi blog en el apartado “Otros sitios interesantes” de tu blog.

      • De nada, Javier. Tu blog está muy bien y creo que es uno de los blogs indispensables que todo aficionado a los Windows Phone y Windows 8 debería seguir.
        Un saludo.

  2. Buen artículo, Javier.

    Respecto a lo que pregunta Cristian, yo he estado mirando y no me suena que se puedan hacer tales modificaciones en el Live Tile.

    Yo creo que la idea que tiene Microsoft es que los Live Tile muestren una experiencia al usuario homogénea. Por eso ellos ya te dan una única animación identica para todas las Live Tile y que ellos te definen (imagen delantera, titulo, contador, imagen secundaria, mensaje y titulo secundario). Y tú solo puedes cambiar las dos imágenes y los textos a mostrar nada más.

    Quizás en las próximas versiones del SDK de Windows Phone aumenten los aspectos que el usuario puede modificar en los Live Tile.

    Un saludo.

  3. Hola Javier me gusta mucho tu aplicación de “Las recetas del Chef” y ahi utilizas los Live tiles. Lo que no entiendo pq cuando cargo tu ejemplo en el MVS 2010 Express no se reproduce como en el video. Me salen los 4 botones pero al presionar sobre alguno de ellos voy atras y no veo cambios en el Tile. De hecho el Tile que me sale es el que sale por defecto, AplicationIcon.png

    • Añadir que cuando le doy a alguno de los 4 botones no hace nada, cuando me tendria que llevar al Tile. En App.xaml.cs ya tengo puesto el “using Microsoft.Phone.Shell;”

      • Hola Javier lástima no poder editar mis mensajes para eliminar los otros comentarios. Se me habia pasado “anclar en inicio” para ver los Tiles, ya funciona. Ahora se me plantean 2 preguntas:
        1. Los Tiles que has desarrollado en “Las recetas del Chef” no están en el inicio del tlf sino dentro de la aplicación ¿Como lo puedo hacer?
        2. Los Tiles que utilizas no solo dan la vuelta sino que ademas tienen un movimiento de arriba a abajo y de abajo a arriba ¿Se hace de otra forma?

        Gracias y un saludo.

  4. Hola Javier me gusta mucho tu aplicación de “Las recetas del Chef” y ahí utilizas los Live tiles.

    Ahora se me plantean 2 preguntas:
    1. Los Tiles que has desarrollado en “Las recetas del Chef” no están en el inicio del tlf sino dentro de la aplicación ¿Cómo lo puedo hacer?
    2. Los Tiles que utilizas no solo dan la vuelta sino que además tienen un movimiento de arriba a abajo y de abajo a arriba ¿Se hace de otra forma?

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s