Si ha tenido la ocasión de ver un Windows Phone antes de Windows Developer Preview, habrá notado que las similitudes son mas que notables, en concreto en lo que se refiere a los iconos, unos elementos mucho mayores que lo habitual y que poseen información adicional. Para muestra un par de imágenes:

En este articulo se verá una definición de estos iconos, los Live Tiles, sus características y como actualizarlos desde nuestra aplicación.

Los tiles: Definición y características

Un Tile (cuya traducción a castellano sería algo así como baldosa) es en su base un icono que identifica nuestra aplicación. Un Live Tile, es un icono vivo, que además de servir como primera imagen de nuestra aplicación permite que el usuario reciba información de esta aún estando cerrada. Se pueden actualizar los tiles de varias maneras:

En la aplicación principal, lo que se verá en este artículo
Usando un proceso en segundo plano, que servirá para actualizar la aplicación aunque ésta esté cerrada.
Mediante una notificación push desde un servidor remoto

Existen dos tipos de tiles:

Básico, de tamaño 150x150px y obligatorio para poder enviar la aplicación al marketplace.
Ancho (Wide), de tamaño 310x150px y opcional, permitirá mostrar un icono que ocupe dos espacios contiguos.

Además, existe como en Windows Phone la opción de crear Tiles secundarios con información adicional y que permitan un acceso directo a un apartado concreto de nuestra aplicación.

Implementación

Para este ejemplo, se parte de la aplicación MVCTask que estaba desarrollando, donde se actualizará el tile para que muestre el número total de proyectos. Este código se ejecutará tras recibir desde el servidor la información de proyectos.

        /// <summary>
        /// Actualiza el icono de la aplicación con un número
        /// </summary>
        /// <param name="numero"></param>
        void ActualizarIcono(int numero)
        {
            // Se obtiene desde la plantilla el documento XML que contendrá el XML del icono
            XmlDocument badgeXml = BadgeUpdateManager.GetTemplateContent(BadgeTemplateType.BadgeNumber);

            // Se edita el XML para agregar los datos deseados, en este caso un número
            XmlElement badgeElement = (XmlElement)badgeXml.SelectSingleNode("/badge");
            badgeElement.SetAttribute("value", "" + numero.ToString());
            badgeElement.SetAttribute("version", "1");

            // Se crea una notificación desde el XML editado
            BadgeNotification badge = new BadgeNotification(badgeXml);

            // Finalmente, se actualiza el contenido de la aplicación
            BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badge);
        }

A diferencia de Windows Phone, en este caso las Tiles no se especifican de una manera explícita, sino que es necesario crear un texto en formato XML que contendrá esta información. Esto permite poder crear tiles más complejos que en el sistema móvil.

La función mostrada anteriormente obtiene el XML básico de un constructor, agrega el dato del número (en este caso value, que contendrá el número de proyectos obtenidos), se crea un nuevo elemento Badge a partir de este XML, y finalmente usando el BadgeUpdateManager, se actualiza el icono de la aplicación, quedando entonces de esta manera:

Como se aprecia, el propio sistema se encarga de crear todo el estilo alrededor de la notificación, y se puede ver la diferencia entre los iconos.

Conclusiones

Los Live Tiles permiten conseguir una interacción con el usuario más allá de la de hacer de lanzador de la aplicación, lo que aumenta las posibilidades de que el usuario vuelva a ejecutarla respecto a aplicaciones que no posean estas características.

En el próximo artículo se verá cómo crear un tile de tamaño doble con más información, así como un tile secundario que acceda a un proyecto concreto.