Windows Phone 7.8. Actualizar tiles.

wp8-tilesIntroducción

En Windows Phone 8 y en el reciente Windows phone 7.8 contamos con nuevos tiles que componen la pantalla de inicio. Si tenemos una aplicación desarrollada para Windows Phone 7 y no queremos (o podemos) actualizarla a Windows Phone 8 podemos acceder mediante reflexión a características de la API de Tiles de Windows Phone 7.8 y Windows Phone 8. De esta forma si nuestra aplicación se ejecuta en un dispositivo Windows Phone 7 mostrará los Tiles habituales (1 único tamaño y plantilla). Sin embargo, si se ejecuta en dispositivos con Windows Phone 7.8 o Windows Phone 8 podemos ofrecer a nuestros usuarios características de los nuevos Tiles.

Suena interesante, ¿verdad?. En la entrada actual vamos a analizar como realizar esta tarea.

Utilizando los nuevos Tiles de Windows Phone 8 desde una App Windows Phone 7

Vamos a crear una aplicación Windows Phone 7 de ejemplo para probar como acceder por reflexión a las APIs de Tiles de Windows Phone 8.

Windows Phone Application

En este ejemplo para simplificar al máximo el proceso y lograr concentrar toda la atención en lo importante vamos a seleccionar un proyecto de tipo Windows Phone Application.

En el constructor de nuestra aplicación vamos a actualizar el tile de la aplicación:

ShellTile tile = ShellTile.ActiveTiles.First();

if (tile != null)
{
     StandardTileData tileData = new StandardTileData
     {
          Title = "Titulo",
          Count = 19,
          BackTitle = "Título trasero",
          BackContent = "Contenido"
     };

     tile.Update(tileData);
}

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.

Si compilamos el resultado que obtenemos es el siguiente:

WP78 Tile 01

Modificar el archivo de manifiesto

En el explorador de soluciones hacemos clic derecho sobre el arhivo WMAppManifest.xml Elegimos la opción “Text Editor”. Justo debajo del elemento <App> debemos añadir:

<AppExtra xmlns="" AppPlatformVersion="8.0">
    <Extra Name="Tiles"/>
</AppExtra>

Usando reflexión

Dependiendo del sistema operativo donde se ejecute la aplicación debemos actualizar el tile tal y como haríamos en Windows Phone 7 o mediante reflexión. Por lo tanto, lo primero que debemos conseguir es un método rápido y sencillo para distinguir entre las distintas versiones de sistema operativo. Creamos una variable estática que almacena donde almacenaremos la versión exacta del sistema Windows Phone 7.8 (7.10.8859):

private static Version wp7Version = new Version(7, 10, 8858);

Utilizaremos la variable creada en el get de una propiedad que comparará la versión establecida con la versión del sistema devolviendo un bool. El bool será true si el sistema es Windows Phone 7.8 o Windows 8. De esta forma podremos detectar ante que versión del sistema estamos y actualizar el Tile de la Aplicación en consecuencia.

public static bool isWp8Version { get { return Environment.OSVersion.Version >= wp7Version; } }

Tan sólo debemos utilizar un simple if:

if (isWp8Version)
{

}
else
{

}

Para usar reflexión lo primero que debemos hacer es obtener un objeto de un tipo en concreto (vamos a poner un ejemplo sencillo):

var mytype = Type.GetType("assembly-name");

Invocamos al constructor del tipo:

var mynewtile = mytype.GetConstructor(new Type[] { }).Invoke(null);

Una vez creado el objeto, podemos asignar valores a sus propiedades. Lo primero que debemos hacer es obtener el tipo de la propiedad a utilizar. Accedemos a la propiedad (utilizando el nombre de la misma). Obtendremos un objeto de tipo PropertyInfo con toda la información de la propiedad:

var setMethod = instance.GetType().GetProperty("Property").GetSetMethod();

Por último, invocamos a la propiedad pasandole el valor deseado:

setMethod.Invoke(instance, new object[] { value });

El proceso es “pesado” y repetitivo. Por lo tanto, la mejor opción será crear un método que reciba la instancia, propiedad y valor para facilitarnos la vida a la hora de utilizar propiedades del tile por reflexión:

private static void SetProperty(object instance, string property, object value)
{
     var method = instance.GetType().GetProperty(property).GetSetMethod();
     method.Invoke(instance, new object[] { value });
}

Vamos a utilizar reflexión para utilizar los nuevos tiles. Primero obtenemos el tipo del objeto FlipTileData y creamos una nueva instancia. Posteriormente, utilizamos el método anteriormente creado para asignar las propiedades correspondientes con los valores deseados. Por último, actualizaremos el tile:

Type flipTileData = Type.GetType("Microsoft.Phone.Shell.FlipTileData, Microsoft.Phone");

Type shellTile = Type.GetType("Microsoft.Phone.Shell.ShellTile, Microsoft.Phone");

var tileToUpdate = ShellTile.ActiveTiles.First();

var UpdateTileData = flipTileData.GetConstructor(new Type[] { }).Invoke(null);

SetProperty(UpdateTileData, "Title", "Título");
SetProperty(UpdateTileData, "Count", 19);
SetProperty(UpdateTileData, "BackTitle", "Título Atrás");
SetProperty(UpdateTileData, "BackContent", "Contenido.");
SetProperty(UpdateTileData, "WideBackContent", "Contenido para el tile en tamaño ancho.");

shellTile.GetMethod("Update").Invoke(tileToUpdate, new Object[] { UpdateTileData });

Ejecutando nuestra aplicación Windows Phone 7 en un dispositivo (o emulador) Windows Phone 7.8 o Windows Phone 8 obtendremos el siguiente resultado:

WP78 Tile 02

De modo que, finalmente el código quedaría:

public MainPage()
{
     InitializeComponent();

     if (isWp8Version)
     {
          Type flipTileData = Type.GetType("Microsoft.Phone.Shell.FlipTileData, Microsoft.Phone");

          Type shellTile = Type.GetType("Microsoft.Phone.Shell.ShellTile, Microsoft.Phone");

          var tileToUpdate = ShellTile.ActiveTiles.First();

          var UpdateTileData = flipTileData.GetConstructor(new Type[] { }).Invoke(null);

          SetProperty(UpdateTileData, "Title", "Título");
          SetProperty(UpdateTileData, "Count", 19);
          SetProperty(UpdateTileData, "BackTitle", "Título Atrás");
          SetProperty(UpdateTileData, "BackContent", "Contenido.");
          SetProperty(UpdateTileData, "WideBackContent", "Contenido para el tile en tamaño ancho.");

          shellTile.GetMethod("Update").Invoke(tileToUpdate, new Object[] { UpdateTileData });
     }
     else
     {
          ShellTile tile = ShellTile.ActiveTiles.First();

          if (tile != null)
          {
               StandardTileData tileData = new StandardTileData
               {
                    Title = "Titulo",
                    Count = 19,
                    BackTitle = "Título trasero",
                    BackContent = "Contenido"
               };

               tile.Update(tileData);
          }
     }
}

Puedes descargar el ejemplo realizado:

Espero que lo visto en la entrada os resulte interesante además de útil. Recordar, cualquier duda o sugerencia será bienvenida en los comentarios de la entrada.

Conclusiones

Una aplicación Windows Phone 7.1 que se ejecuta en dispositivos Windows Phone 7.8 o Windows Phone 8 puede acceder mediante reflexión a características de la nueva API de Tiles. Recordar que en Windows Phone diferenciamos entre 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.

¿Hasta donde podemos llegar?

  • En Tile de Aplicación sólo podemos utilizar la plantilla Flip Tile.
  • Para Tiles Secundarios podemos utilizar todas las plantillas disponibles en Windows Phone 8, Flip Tile, Iconic Tile y Cycle Tile.
  • Podemos utilizar las APIs de ShellTile o notificaciones Push para actualizar el Tile.

Más información

7 pensamientos en “Windows Phone 7.8. Actualizar tiles.

  1. Pingback: Windows Phone 7.8. Actualizar tiles. « Hispafoxing

  2. Buen tutorial… pero hay algo que no he encontrado en ningún lado:

    ¿Cómo asignar diferentes imágenes a cada tamaño de tile?
    Hablo de tiles estáticas, normalitas

    Por ejemplo en tu código y otros que he visto el tile Small y el Medium usan la misma imagen: la llamada “background.png” que en WP7.1 mide 173x173pixeles… lo único que hace WP7.8 es redimensionar la imagen a 210 (médium tile) o 99 (small tile) por lo que el ícono se distorsiona en mayor o menor medida

    Sin embargo varias aplicaciones si utilizan íconos e imágenes distintas

    Será que esta opción está restringida a aplicaciones de Microsoft y sus socios?

  3. Gracias por contestar Javier… gracias al artículo que enlazaste y a otro de MSDN ya entendí el asunto… si me permites yo le agregaría estas líneas:

    DESPUES DE: public static bool isWp8Version
    AGREGAR:
    Uri smallBackgroundImage = new Uri(“nombretilepequeno.png”, UriKind.Relative);
    Uri backgroundImage = new Uri(“nombretilenormal.png”, UriKind.Relative);
    Uri backBackgroundImage = new Uri(“nombretilenormal2.png”, UriKind.Relative);/*opcional*/
    Uri wideBackgroundImage = new Uri(“nombretilewide.png”, UriKind.Relative);
    Uri wideBackBackgroundImage = new Uri(“nombretilewide2.png”, UriKind.Relative);/*opcional*/

    DESPUES DE:
    SetProperty(UpdateTileData, “WideBackContent”, “Contenido para el tile en tamaño ancho.”);
    AGREGAR:
    SetProperty(UpdateTileData, “SmallBackgroundImage”, smallBackgroundImage);
    SetProperty(UpdateTileData, “BackgroundImage”, backgroundImage);
    SetProperty(UpdateTileData, “BackBackgroundImage”, backBackgroundImage);/*opcional*/
    SetProperty(UpdateTileData, “WideBackgroundImage”, wideBackgroundImage);
    SetProperty(UpdateTileData, “WideBackBackgroundImage”, wideBackBackgroundImage);/*opcional*/

    Así ya tendremos distintas imágenes que sean las adecuadas para el tamaño de tile

    En el DEVCenter de WP ya actualizaron el artículo de los tiles para WP7.8
    http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj720574(v=vs.105).aspx

  4. Pingback: Windows Phone 7 y 8: Live Tiles | Windowsphoneando

  5. amigo podrias subir de nuevo el ejemplo? es para estudiarlo, ya que no logro activar los tiles por reflexión. gracias amigo.

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