Windows Phone. Tiles Secundarios.

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 segundo tipo de Tiles, los Tiles Secundarios.

Propiedades

Antes de trabajar de manera correcta con los Tiles secundarios debemos conocer que es y que podemos hacer con ellos. Vamos a comenzar analizandolos. 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.

Bien. Ya hemos visto en que consisten los Tiles secundarios. 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.

Para poder crear o eliminar Tiles secundarios utilizaremos la API ShellTile (también disponemos de otras API muy interesantes como ShellTileSchedule que nos permitirá hacer actualizaciones periódicas de la imágen de nuestro Tile que veremos en próximas entradas).

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. En el proyecto de ejemplo (que podrás descargar al final de la entrada) se ha agregado una imágen que representa la lluvia ya que uno de los casos más sencillos y con el que se logra entender muy facilmente la utilidad de los Tiles es la típica aplicación meteorológica y eso simularemos.

Tras agregar la imagen que utilizaremos, vamos a modificar la interfaz para permitir al usuario crear y eliminar el Tile secundario:

<!--ContentPanel. Colocar aquí el contenido adicional-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <StackPanel>
          <Button x:Name="btnCrearTile" Content="Crear Tile Secundario" Click="btnCrearTile_Click"/>
          <Button x:Name="btnEliminarTile" Content="Eliminar Tile Secundario" Click="btnEliminarTile_Click"/>
     </StackPanel>
</Grid>

El resultado es el siguiente:

Muy sencillo. Hemos añadido dos botones. El primero nos creará el Tile secundario. El segundo eliminará al Tile creado previamente. Nos hemos subscrito al evento Click de cada botón. Vamos a analizar que se hace al pulsar cada botón.

Lo primero que debemos hacer para utilizar la API ShellTile es añadir el using a Microsoft.Phone.Shell:

using Microsoft.Phone.Shell;

Veamos como crear el Tile secundario:

private void btnCrearTile_Click(object sender, RoutedEventArgs e)
{
     ShellTile tileSecundario = ShellTile.ActiveTiles.FirstOrDefault(
     tile => tile.NavigationUri.ToString().Contains("MainPage.xaml"));

     if (tileSecundario == null)
     {
          StandardTileData tileInfo = new StandardTileData
          {
               Title = "Vista Delantera",
               BackgroundImage = new Uri("/IMGS/Lluvia.png", UriKind.Relative),
               Count = 7,
               BackTitle = "Vista Trasera",
               BackBackgroundImage = new Uri("/IMGS/Lluvia.png", UriKind.Relative),
               BackContent = "Lluvia"
          };

          ShellTile.Create(new Uri("/MainPage.xaml", UriKind.Relative), tileInfo);
     }
}

El resultado es el siguiente:

Vista Delantera.

Vista Trasera.

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

Paremonos a analizar el código. Lo primero que hemos hecho es comprobar si existe el tile secundario o no (verificamos la propiedad NavigationUri). Utilizamos para ello la propiedad ActiveTiles de la clase ShellTile, la cual es un diccionario que contiene todos los Tiles de la aplicación.

En caso de no existir, creamos un objeto de tipo StandardTileData. Por último, utilizamos el método Create(Uri, ShellTileData) para crear y añadir el Tile a la pantalla inicial. En cuanto creamos el Tile secundario somos redirigidos a la pantalla inicial.

Si pulsamos sobre el Tile nos llevará directamente a la página “MainPage.xaml”.

Veamos como eliminar el Tile secundario:

private void btnEliminarTile_Click(object sender, RoutedEventArgs e)
{
     ShellTile tileSecundario = ShellTile.ActiveTiles.FirstOrDefault(
     tile => tile.NavigationUri.ToString().Contains("MainPage.xaml"));

     if (tileSecundario != null)
     {
          tileSecundario.Delete();

          MessageBox.Show("Tile Secundario eliminado con éxito.");
     }
}

El resultado es el siguiente:

Lo que hemos hecho es buscar si existe o no el tile secundario. Si existe lo eliminamos (si salimos de la aplicación veremos que ya no existe el Tile secundario en la pantalla inicial). El tile secundario se puede eliminar por código utilizando el método Delete y también cuando el usuario desinstala la aplicación o quita el Tile de la pantalla principal.

Podéis ver el ejemplo en el siguiente video:

También podéis descargar el ejemplo a continuación:

Nada más por hoy. Los Tiles secundarios nos brindan una gran cantidad de posibilidades. Nos permiten ofrecer un acceso directo y rápido a la información deseada por el usuario. Además podemos notificar la información más fundamental directamente en la pantalla de inicio del usuario. Seguiremos viendo peculiaridades y más posibilidades con ellos en futuras entradas. Espero que lo visto en esta entrada os sea de utilidad. Cualquier duda o sugerencia podéis plantearlas en los comentarios.

Más información:

La Liga Silverlight: Día 11: Live Tiles

Krasis (fragmento del Libro “Windows Phone 7.5 “Mango” – Desarrollo Silverlight” de Josué Yeray del que hablamos en esta entrada): TRUCO: Añadiendo Live Tiles a tu aplicación Windows Phone 7.5

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