MSDN España

Noticias, avisos, reflexiones... del equipo que hay detrás de MSDN en España... también tendremos alguna que otra firma invitada :)

Windows 8 Tips & Tricks. Actualizar Live Tile de forma local (XAML/C#)

Windows 8 Tips & Tricks. Actualizar Live Tile de forma local (XAML/C#)

[Nota: Este artículo pertenece a nuestra serie de Windows 8 Tips & Tricks]

Una de las novedades de Windows 8 es el dinamismo de los iconos de las aplicaciones. Los iconos dinámicos, o live tiles, permiten que las aplicaciones proporcionen información al usuario de un solo vistazo en la pantalla de Inicio. En este Tips&Tricks veremos cómo hacer que nuestra aplicación aproveche este recurso.

Hay dos cosas que tenemos que tener en cuenta a la hora de crear nuestro live tile:

  1. Los tiles pueden ser cuadrados o rectangulares. Si creamos una actualización teniendo en cuenta sólo uno de ellos y el usuario tiene la aplicación en el otro tamaño, nunca se mostrará.
  2. Los tiles los describimos en XML, aunque no será necesario que escribamos el código a mano.

Para una mayor consistencia y uniformidad entre aplicaciones, existen unas plantillas predefinidas para crear nuestros Live Tiles. Podéis elegir cualquiera, pero tened en cuenta que debéis soportar tanto el tamaño cuadrado como el rectangular. Nosotros hemos elegido TileSquareText04 y TileWideImageAndText02.

Empecemos diseñando nuestro live tile rectangular con texto e imagen (TileWideImageAndText02). Para ello queremos obtener un xml que tenga una estructura similar a esta:

<tile>
  <visual>
    <binding template="TileWideImageAndText02">
      <image id="1" src="imagen.png"/>
      <text id="1">Nuestro texto</text>
    </binding>  
  </visual>
</tile>

Lo primero que tenemos que hacer es obtener la plantilla TileWideImageAndText02 usando el método GetTemplateContent de TileUpdateManager. Luego obtenemos el primer elemento text de esa plantilla y le insertamos el texto que queremos mostrar. Sabemos que ese elemento texto existe porque está en la plantilla TileWideImageAndText02. También añadiremos una imagen buscando el elemento image y poniendo la ruta a la imagen en su atributo src. En el ejemplo hemos declarado la variable imagen como dynamic para ahorrarnos ahormados:

private XmlDocument CrearIconoLargoTextoImagen(string texto, string rutaImagen)
{
    var tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideImageAndText02);
    //Añadimos nuestro texto
    tileXml.GetElementsByTagName("text")[0].InnerText = texto;
    //Obtenemos la etiqueta <image>
    dynamic imagen = tileXml.GetElementsByTagName("image");            
    //Añadimos la ruta a la imagen dentro del atributo "src"
    imagen[0].SetAttribute("src", rutaImagen);            
    return tileXml;
}

El método anterior nos devuelve un XmlDocument que contiene el código XML del live tile rectangular, pero debemos crear también el cuadrado. Para ello creamos un segundo método que hará lo propio para el cuadrado. Primero obtenemos la plantilla TileSquareText04 y luego dentro del elemento text añadimos el texto que queremos mostrar:

private XmlDocument CrearIconoCuadradoTexto(string texto)
{
    var tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareText04);
    tileXml.GetElementsByTagName("text")[0].AppendChild(tileXml.CreateTextNode(texto));
    return tileXml;
}

Con esto tenemos dos métodos que nos devuelven dos XMLs distintos, uno para un live tile cuadrado y otro para uno rectangular. Sin embargo, nosotros no queremos realizar dos actualizaciones distintas, sino hacer una única actualización que sea capaz de mostrarse en ambos tamaños. Podemos conseguir esto juntando ambos XML en uno sólo que tenga una estructura similar a esta:

<tile>
  <visual>      
    <binding> <-! El cuadrado -->
      <text />
    </binding>
    <binding> <-! El largo -->
      <image />
      <text />
    </binding>
  </visual>
</tile>

El método obtiene el XML del tile rectangular y lo almacena en la variable larga. Luego pide el primer elemento binding (con todos sus hijos) del XML del tile cuadrado y lo almacena en cuadrada. A continuación inserta el elemento binding que acaba de extraer dentro del elemento visual del XML del tile rectangular:

private XmlDocument CrearIconoCuadradoYLargo(string texto, string rutaImagen)
{
    //Obtenemos el XML del icono largo
    var larga = CrearIconoLargoTextoImagen(texto,rutaImagen);
    //Obtenemos el XML del icono cuadrado y extraemos su etiqueta <binding>
    var cuadrada = larga.ImportNode(CrearIconoCuadradoTexto(texto).
        GetElementsByTagName("binding")[0], true);
    //Insertamos en el XML del icono largo el binding del icono cuadrado y hacemos que sean 
    //hermanos (ambos tienen a <visual> como padre)
    larga.GetElementsByTagName("visual")[0].AppendChild(cuadrada);
    return larga;
}

En este momento tenemos un método que crea el XML para un tile rectangular, otro para un tile cuadrado y otro que se encarga de combinar ambos XML. Ahora sólo nos queda programar un método que sea capaz de actualizar el tile de la aplicación usando los métodos anteriores.

Para actualizar el tile local primero debemos crear un actualizador, que será el encargado de lanzar las actualizaciones de los tiles. Cada actualización puede tener una fecha de expiración pasada la cual la actualización no volverá a ser mostrada. En el ejemplo hemos optado por hacer que la actualización expire a los 60 minutos:

private void ActualizarTile()
{
    //Creamos el actualizador
    var tileUpdateManager = TileUpdateManager.CreateTileUpdaterForApplication();
    //Enviamos una actualización con el XML combinado
    tileUpdateManager.Update(new TileNotification(
        CrearIconoCuadradoYLargo("Me gustan los Live Tiles :)", "ms-appx:///Assets/gatito.jpg"))
    {
        //Fijamos una expiración de 60 minutos
        ExpirationTime = DateTimeOffset.UtcNow.AddMinutes(60) 
    });
}

Si tienes alguna duda, recuerda que tienes a tu disposición el foro de desarrollo de aplicaciones para Windows 8 en castellano, donde podrás compartir tus conocimientos con la comunidad de desarrolladores y encontrar ayuda para resolver tus dudas técnicas, y una Introducción al desarrollo de aplicaciones para Windows 8.

También puedes estar al día de todas las novedades a través de nuestros rincones en las redes sociales:

Un saludo,

      Pablo Carballude