WinRT. Tiles Secundarios.

Introducción

Los Tiles (baldosas) son uno de los pilares fundamentales de la atractiva interfaz de usuario que tenemos disponible en Windows 8.

Tenemos disponibles dos tipos de Tiles:

  • Tile de Aplicación.Es el acceso directo a una aplicación creado en el proceso de instalación.
  • Tiles Secundarios. Se crean desde una aplicación en concreto por una acción realizada por el usuario. Permiten destacar contenido interesante de la aplicación en la pantalla de inicio.

En esta entrada vamos a centrarnos en como crear tiles secundarios desde nuestra aplicación.

Tile Secundario

Antes de trabajar de manera correcta con los tiles secundarios debemos resolver algunas de las dudas básicas que surgen de inicio de trabajar con ellos:

  • Utilizan un template para definir su layout.
  • Pueden tener 150 x 150px o 310 x 150px de tamaño.
  • Pueden mostrar notificaciones (Nos centraremos en las notificaciones locales en una próxima entrada).
  • Pueden ser reorganizados en la pantalla de inicio por el usuario.
  • El usuario puede eliminar el tile secundario correspondiente a una aplicación sin tener que eliminar la aplicación.
  • Todos los tiles secundarios correspondientes a una aplicación son eliminados al eliminar la aplicación.

¿Cómo lo creamos?

Como siempre solemos hacer vamos a realizar un ejemplo lo más simple posible pero que nos sea válida para lograr nuestros objetivos. La plantilla selecciona para realizar el ejemplo lo más simple posible será “Blank Application”.

Antes de nada, vamos a comenzar resolviendo una de las principales dudas que surgen al trabajar con Tiles Secundarios:

Sólo el usuario puede crear un Tile secundario, NO se pueden crear Tiles secundarios automáticamente por código. Por lo tanto, para crear un tile secundario desde nuestra aplicación debemos hacer dos pasos básicos:

  • Tras hacer alguna acción el usuario (pulsar un botón o un elemento de una lista por ejemplo) creamos el tile.
  • Tras crear el tile un mensaje de confirmación le aparecerá al usuario para anclar el tile a la pantalla de inicio.

Todo lo necesario para trabajar con tiles secundarios está incluido en la clase Windows.UI.StartScreen.SecondaryTile. Para crear el tile podemos utilizar las siguientes propiedades:

  • tileId : Identificador del Tile. Propiedad de tipo String.
  • shortName : Nombre que aparecerá en el Tile.
  • displayName : Nombre que aparecerá en el Tooltip del Tile.
  • arguments : Argumentos que se le puede pasar a la aplicación al abrirse mediante el Tile. En este punto nos centraremos en una futura entrada.
  • tileOptions : Enumeración TileOptions.
  • logoReference : URI de la imágen del Tile.
  • wideLogoReference : URI de la imágen ancha del Tile.

NOTA: El constructor más completo (donde se utilizan todas las propiedades) de un objeto tile secundario es el siguiente:

public SecondaryTile(
 string tileId,
 string shortName,
 string displayName,
 string arguments,
 TileOptions tileOptions,
 Uri logoReference,
 Uri wideLogoReference
)

Comenzamos el ejemplo creando la interfaz de usuario. Nuestro objetivo es anclar y desanclar un tile secundario por lo que la creación de la interfaz es simple:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
     <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
          <Button x:Name="btnCreate" Content="Crear Tile Secundario"/>
          <Button x:Name="btnDelete" Content="Eliminar Tile Secundario"/>
     </StackPanel>
</Grid>

Hemos añadido dos botones. El primero de ellos nos permite anclar un tile secundario a la pantalla de inicio. El segundo, determina si sigue estando en la pantalla de inicio el tile y en caso afirmativo lo desancla. Añadimos los eventos Click de cada botón:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
     <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
          <Button x:Name="btnCreate" Content="Crear Tile Secundario" Click="BtnCreateClick"/>
          <Button x:Name="btnDelete" Content="Eliminar Tile Secundario" Click="BtnDeleteClick"/>
     </StackPanel>
</Grid>

En la clase correspondiente:

private void BtnCreateClick(object sender, RoutedEventArgs e)
{

}

private void BtnDeleteClick(object sender, RoutedEventArgs e)
{

}

Hasta ahora, muy sencillo, ¿verdad?. Comenzamos a trabajar a fondo con los tiles secundarios. Antes que nada lo primero que debemos hacer es añadir la referencia:

using Windows.UI.StartScreen;

Tras añadir la referencia, vamos a utilizar un constructor similar al visto anteriormente para crear el tile secundario. Lo primero que vamos a hacer es preparar todas las variables necesarias:

var tileID = "TileSecundario.1";
var shortName = "Tile Secundario";
var displayName = "Prueba de TileSecundario";
var secondaryTileArg = "test";
var squareLogo = new System.Uri("ms-appx:///Assets/Logo.png");
var tileOptions = TileOptions.ShowNameOnLogo;

Creamos el objeto de tipo SecondaryTile pasandole las variables anteriores:

var secondarytile = new SecondaryTile(tileID, shortName, displayName, secondaryTileArg, tileOptions, squareLogo);

¿Y ya esta?. Casi. Hemos creado el objeto SeondaryTile. A continuación vamos a utilizar el método RequestCreateForSelectionAsync para crear el tile. Al llamar al método RequestCreateForSelectionAsync aparecerá en pantalla un popup que mostrará un previsualización del tile secundario que se va a añadir a la pantalla de inicio pidiendo la confirmación para crearlo.El método que vamos a utilizar requiere un par de parámetros:

  • Selection. De tipo Rec.
  • PreferredPlacement. De tipo Placement.

Nos permite indicar el tamaño y posición del popup.

NOTA: Tras el paso anterior podríamos definir otras propiedades como el color del texto (Foreground) por ejemplo.

private static Rect GetElementRect(FrameworkElement element)
{
     GeneralTransform buttonTransform = element.TransformToVisual(null);
     Point point = buttonTransform.TransformPoint(new Point());
     return new Rect(point, new Size(element.ActualWidth, element.ActualHeight));
}

Podemos además tener constancia de que el tile se ha creado correctamente capturando el valor booleano devuelto por el método:

bool isPinned = await secondarytile.RequestCreateForSelectionAsync(GetElementRect((FrameworkElement)sender), Placement.Below);

if (isPinned)
{
     MessageDialog infoSecondaryTile = new MessageDialog("Tile Secundario creado con éxito!");
     await infoSecondaryTile.ShowAsync();
}

Veamos como queda el evento Click del botón al completo:

private async void BtnCreateClick(object sender, RoutedEventArgs e)
{
     var tileID = "TileSecundario.1";
     var shortName = "Tile Secundario";
     var displayName = "Prueba de TileSecundario";
     var secondaryTileArg = "test";
     var squareLogo = new System.Uri("ms-appx:///Assets/Logo.png");
     var tileOptions = TileOptions.ShowNameOnLogo;

     var secondarytile = new SecondaryTile(tileID, shortName, displayName, secondaryTileArg, tileOptions, squareLogo);

     bool isPinned = await secondarytile.RequestCreateForSelectionAsync(GetElementRect((FrameworkElement)sender), Placement.Below);

     if (isPinned)
     {
          MessageDialog infoSecondaryTile = new MessageDialog("Tile Secundario creado con éxito!");
          await infoSecondaryTile.ShowAsync();
     }
}

Si ejecutamos la aplicación y pulsamos el botón veremos lo siguiente:

Continuamos. Acabamos de aprender como anclar un tile secundario a la pantalla de inicio. El siguiente paso lógico es como desanclarlo. Pero… no tan rápido. Antes incluso de desanclar un tile secundario primero debemos comprobar que realmente esta anclado (el usuario puede desanclarlo en cualquier momento):

if (SecondaryTile.Exists("TileSecundario.1"))
{

}

Tras verificar que el tile existe debemos obtenerlo para eliminarlo. Para ello vamos a utilizar el método FindAllAsync. Dicho método nos devuelve un listado con todos los tiles creados por nuestra aplicación. Como tenemos el ID correspondiente al que acabamos de crear, para obtenerlo será tan sencillo como:

var tiles = await SecondaryTile.FindAllAsync();
SecondaryTile tile = tiles.FirstOrDefault(d => d.TileId == "TileSecundario.1");

Por último, utilizaremos el método RequestDeleteForSelectionAsync para eliminar el tile. Al igual que para anclar el tile, para eliminarlo, será el usuario el encargado de hacerlo aceptando el popup que pide confirmación. NO podemos eliminar por código de manera automática tiles:

bool isUnpinned = await tile.RequestDeleteForSelectionAsync(GetElementRect((FrameworkElement)sender), Windows.UI.Popups.Placement.Below);

if (isUnpinned)
{
     MessageDialog infoSecondaryTile = new MessageDialog("Tile Secundario eliminado con éxito!");
     await infoSecondaryTile.ShowAsync();
}

Veamos como queda el evento Click completo del botón:

private async void BtnDeleteClick(object sender, RoutedEventArgs e)
{
     if (SecondaryTile.Exists("TileSecundario.1"))
     {
          var tiles = await SecondaryTile.FindAllAsync();
          SecondaryTile tile = tiles.FirstOrDefault(d => d.TileId == "TileSecundario.1");

          bool isUnpinned = await tile.RequestDeleteForSelectionAsync(GetElementRect((FrameworkElement)sender), Windows.UI.Popups.Placement.Below);

          //Otra forma de hacerlo:
          //bool isUnpinned = await tile.RequestDeleteAsync();

          if (isUnpinned)
          {
               MessageDialog infoSecondaryTile = new MessageDialog("Tile Secundario eliminado con éxito!");
               await infoSecondaryTile.ShowAsync();
          }
     }
}

Puedes ver de un vistazo todo el ejemplo realizado en video a continuación:

También puedes descargar el ejemplo realizado:

Nada más por hoy. Seguiremos viendo peculiaridades y más posibilidades con ellos en futuras entradas (como actualizar el tile con notificaciones locales, etc). Espero que lo visto en esta entrada os sea de utilidad. Cualquier duda o sugerencia podéis plantearlas en los comentarios.

Conclusiones

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. Algunos ejemplos de uso interesante:

  • Aplicaciones del tiempo.
  • Notificar fechas de un Calendario.
  • Notificacicaciones actualizaciones en Redes sociales.

Por contra, recuerda NO abusar nunca de su uso ya que suele provocar el efecto contrario al buscado (el usuario recibe tanta información que puede incluso llegar a decidir desinstalar nuestra aplicación).

Más información

Extra

Recordar para aquellos interesados el siguiente artículo:

Donde analizamos como gestionar tiles secundarios en Windows Phone.

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