¿Qué son las baldosas?

Las Baldosas (Tiles): Según MSDN las baldosas son los enlaces a las aplicaciones que son mostradas en el menú de inicio y existen 2 tipos de de estas baldosas, las de aplicación y las secundarias.

Tipos

Las Baldosas de Aplicación son aquellas que se crean cuando la aplicación es Anclada al menú de inicio. Las Baldosas Secundarias son las que se crean mediante programación y dada la solicitud del usuario.

Características

Es importante conocer algunas de las características de las baldosas para así poder pasar a la creación de las mismas. Empecemos por mencionar que las baldosas poseen 2 caras, la frontal y la posterior y cada una de ellas tiene diferentes características que podríamos aprovechar para mostrar la información que deseamos.

 Cara frontal

En la cara frontal  observamos que tenemos una imagen de fondo, un contador y un título y podemos disponer de estos 3 elementos de la forma que queramos para cumplir con nuestro objetivo.

Imagen de fondo: como su nombre nos sugiere es la imagen que se muestra  en el fondo de la baldosa.

Contador: conocido en inglés también con el nombre de «Badge» (distintivo) y es un número entre 0 (cero) y 99, cabe destacar que si este número no es establecido o se establece en cero, no será mostrado.

Título: es una cadena de caracteres que representa el título de la aplicación y que se muestra en una única línea, soporta alrededor de 15 caracteres antes de truncar el texto puesto que de ser el mismo mayor que el ancho de la baldosa no será mostrado.

Cara Frontal

Cara posterior

Si vemos la cara posterior de la baldosa  nos encontraremos con imagen de fondo posterior, contenido posterior y título posterior. Estos elementos serán útiles para complementar la información principal mostrada en la cara frontal.

Imagen de fondo posterior: como en el caso de la cara frontal es la imagen que se muestra al fondo de la baldosa y no necesariamente debe ser la misma para ambas caras.

Contenido posterior: se trata de una cadena de caracteres que se puede utilizar para desplegar información y permite alrededor de 40 caracteres antes de truncar el texto, por las mismas razones expuestas anteriormente.

Título posterior: como en el caso de la cara frontal es una cadena de caracteres con soporte de alrededor de 15 caracteres antes de truncar el texto.

Es necesario aclarar que existen algunas restricciones que aplican para las imágenes de fondo, tanto para la frontal como para la posterior, entre ellas se pueden mencionar que sólo se soportan archivos jpg y png, no se pueden aplicar animaciones, las dimensiones de las imágenes deben ser de 173 x 173 píxeles, de lo contrario serán ajustadas a estas dimensiones (con lo que se podría distorsionar). Está permitido el uso de imágenes remotas, pero sólo si se pueden acceder por protocolo http, es decir, el https no está permitido, tampoco está permitido emplear imágenes de más de 80 KB, si el archivo es mayor simplemente no se descargará y por supuesto si la imagen tarda más de 30 segundos en descargar se abortará la descarga (y con ello cualquier otro cambio que se haya hecho).

Bien, creo que ya he hablado (escrito) mucho y no hay nada de código, así que pasemos a poner las manos a las obras.

Cara Posterior

Crear las Baldosas Principales

Si has desarrollado aplicaciones para Windows Phone anteriormente observarás que existen unas imágenes por omisión colocadas en el directorio de nuestra aplicación, de ellas miraremos Background.png, si observamos sus propiedades notaremos que sus dimensiones son exactamente 173 x 173 píxeles y si la modificamos veremos que eventualmente, se modificará la baldosa de la aplicación cuando la anclamos al menú inicio (si no sabes cómo anclar, simplemente en la lista de aplicaciones presionas sobre la que desees anclar hasta que aparezca el menú y pulsas sobre «anclar al inicio»).  En particular mostraré  la baldosa por omisión de una aplicación que estoy desarrollado y modificaré el mismo para que se aprecie la diferencia.

A la izquierda la baldosa predeterminada y a la derecha la baldosa modificada

Como notarás no he hecho nada especial para crear esta baldosa, pero supongamos que deseamos personalizarla y para ello usaremos «Microsoft.Phone.Shell»:

var mainTile = ShellTile.ActiveTiles.First();
            if (mainTile != null)
            {
                StandardTileData NewTile = new StandardTileData
                {
                    Title = "Mensaje de prueba",//17 caracteres para mostrar que el contenido se trunca
                    BackgroundImage = new Uri("/Images/Tile.png", UriKind.Relative),
                    Count = 1,//Mostramos el contador
                    BackTitle = "Título posterior",
                    BackBackgroundImage = new Uri("/Images/BackTile.png", UriKind.Relative),
                    BackContent = "Este es el contenido posterior"
                };
                mainTile.Update(NewTile);
            }

En particular este código lo agregué en el constructor de la clase de la Página, pero puede ser invocado desde otro lugar del código y el resultado es el siguiente:

Baldosa modificada por código

Bueno, como hemos visto se han modificado las características de la baldosa principal y logramos mostrar la información que deseamos dar a nuestros usuarios, es importante destacar que las características de la baldosa se pueden modificar independientemente, es decir, no es necesario modificar todas al mismo tiempo. Por ejemplo, si sólo queremos modificar la imagen de fondo podemos hacerlo sin necesidad de alterar el contador o el título.

Si recuerdan al principio mostraba que con sólo modificar la imagen de fondo de la baldosa se tenía este cambio reflejado en el menú del teléfono sin mayor esfuerzo, y aquí está el truco, si no te gusta escribir código la plataforma se encarga de crear dicha baldosa principal y podemos ajustar sus características en el archivo WMAppManifest.xml ubicado en la carpeta Properties, en dicho archivo existe una sección llamada Tokens, sin embargo acá sólo podemos modificar el título, la uri de la imagen de fondo y el contador, es decir, sólo podemos modificar la cara frontal de la baldosa.

Modificando el WMAppManifest.xml

 Crear baldosas secundarias

Ya hemos trabajado un poco con las baldosas principales y ahora queremos brindar a los usuarios la posibilidad de que accedan a información directamente desde el menú de inicio sin necesidad de abrir la aplicación y navegar hasta dicha información, es por ello que existen las baldosas secundarias y como se comentó anteriormente éstas sólo se pueden crear mediante programación.

El procedimiento para crear las baldosas secundarias es bastante similar al que se realiza para la creación de las baldosas principales, sin embargo, ahora debemos asegurarnos de que no intentamos crear una baldosa ya existente, veamos el código:

 //Comprobamos que no existe la baldosa que apunta a "theUri", theUri es el uri de la página de la aplicación con la información que queremos mostrar por ejemplo /PaginaDetalles.xaml?idDetalle=10
var Tile = ShellTile.ActiveTiles.FirstOrDefault(x => x.NavigationUri.ToString().Contains(theUri));

if (Tile == null)
{
    //Creamos los datos de la baldosa
    StandardTileData NewTile = new StandardTileData
    {
        BackgroundImage = new Uri("/Images/SBackground.png", UriKind.Relative),
        Title = txtTitulo.Text,
        Count = 1,
        BackTitle = String.Format("Creada {0}", DateTime.Now.ToString()),
        BackContent = txtContenido.Text,
        BackBackgroundImage = new Uri("SBBackground.png", UriKind.Relative)
    };
    //Finalmente se crea la baldosa 
    ShellTile.Create(new Uri(theUri, UriKind.Relative), NewTile);
}

Y así tenemos la baldosa lista para mostrar, claro, el código anterior debe ser agregado en alguna función, en mi caso, está en el evento que maneja el botón «Anclar» y el resultado obtenido es el siguiente:

Baldosa secundaria

Esperando que este artículo le haya sido de ayuda (y si no se vale preguntar), me despido hasta una próxima oportunidad. Saludos.