Windows Phone 8. Live Tiles.

Introducción. Tiles: Nuevos tamaños y plantillas

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

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.

La pantalla principal (Home Screen) de Windows Phone 8 ha sufrido un importante rediseño. ahora se permiten Tiles de diferentes tamaños (pequeño, normal, ancho).

Plantillas (Tile templates):

En Windows Phone 8 tenemos ahora tres plantillas (formato visual) diferentes para los Tiles:

  • Flip. Produce una animación similar a la ya vista en Tiles de Windows Phone 7.5. Rota entre dos vistas.
Flip
  • Iconic. Muestra un icono, un título y podría mostrar también un contador.
Iconic
  • Cycle. Van cambiandose cíclicamente imágenes hasta un máximo de nueve imágenes.
Cycle

NOTA: La plantilla seleccionada para el Tile de Aplicación no se puede cambiar programáticamente por lo que su correcta elección es muy importante.

NOTA: Los tamaños en píxeles para las distintas plantillas en cada tamaño son:

Flip y Cycle Iconic
Pequeño 159 × 159 pixels 110 × 110 pixels
Normal 336 × 336 pixels 202 × 202 pixels
Ancho 691 × 336 pixels N/A

Manos a la obra

Vamos a crear una aplicación de ejemplo donde utilizaremos todas las plantillas de Tiles iremos viendo sus posibilidades:

Aplicación de Windows Phone

Como ya hemos mencionado, en Windows Phone 8 contamos con tres  plantillas (formato visual) de Tiles. Vamos a crear un ejemplo que nos permita crear un Tile con cada plantilla. Para ello, vamos a añadir a nuestra interfaz tres botones. Cada botón creará un Tile de cada plantilla:

<!--ContentPanel. Colocar aquí el contenido adicional-->
<StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <Button Content="Flip Tile"/>
     <Button Content="Iconic Tile"/>
     <Button Content="Cycle Tile"/>
</StackPanel>

Si compilamos a este punto veremos algo como lo siguiente:

Interfaz Usuario

Añadimos los eventos Click de cada botón:

<!--ContentPanel. Colocar aquí el contenido adicional-->
<StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <Button Content="Flip Tile" Click="FlipTileButtonClick"/>
     <Button Content="Iconic Tile" Click="IconicTileButtonClick"/>
     <Button Content="Cycle Tile" Click="CycleTileButtonClick"/>
</StackPanel>

En el code-behind (MainPage.xaml.cs):

private void FlipTileButtonClick(object sender, RoutedEventArgs e)
{

}

private void IconicTileButtonClick(object sender, RoutedEventArgs e)
{

}

private void CycleTileButtonClick(object sender, RoutedEventArgs e)
{

}

FlipTile

En Windows Phone 7 ya contabamos con la posibilidad de crear Tiles Secundarios de una aplicación y actualizar el Tile de la Aplicación. Entre la personalización con la que podíamos jugar teníamos, el título del Tile (Title), un contador (Count), imágen (BackgroundImage), etc. Recordamos que el Tile tenía dos vistas, una delantera y una trasera. La plantilla FlipTile es es equivalente a la que ya teníamos en Windows Phone 7. En Windows Phone 8, contamos con dos plantillas más, IconicTile y CycleTile.

Para trabajar con los Tiles seguimos contando con un clase ya conocida, ShellTile. La API ShellTile es la que nos permite trabajar con los Live Tiles de nuestra aplicación.

Las propiedades básicas de la plantilla FlipTile son:

  • Title. Texto que aparece en la parte inferior del Tile. No aparece en Tiles de tamaño pequeño.
  • Count. Número que aparece en la parte derecha del Tile.
  • BackgroundImage. Color de fondo del Tile. Si no se utiliza se utilizará el color del sistema.
  • BackTitle. Texto mostrado en la parte inferior izquiera de la parte posterior de un Tile de tamaño normal o grande (ancho).
  • BackContent. Texto mostrado en la parte posterior de un Tile de tamaño normal.
  • BackBackgroundImage. Fondo de la parte posterior del Tile.
  • SmallBackgroundImage. Color de fondo del Tile en tamaño pequeño.
  • WideBackgroundImage. Fondo del Tile en tamaño grande (ancho).
  • WideBackBackground. Fondo de la parte posterior del Tile en tamaño grande (ancho).
  • WideBackContent. Texto mostrado en la parte superior derecha del Tile en tamaño grande.

FlipTile

private void FlipTileButtonClick(object sender, RoutedEventArgs e)
{
     FlipTileData flipTile = new FlipTileData();
     flipTile.Title = "Título Flip Tile";
     flipTile.Count = 33;

     flipTile.BackTitle = "Título trasero Flip Tile";
     flipTile.BackContent = "Contenido parte trasera";
     flipTile.WideBackContent = "Contenido ancho parte trasera";

     flipTile.SmallBackgroundImage = new Uri("Assets/Tiles/FlipCycleTileSmall.png", UriKind.Relative);
     flipTile.BackgroundImage = new Uri("Assets/Tiles/FlipCycleTileMedium.png", UriKind.Relative);
     flipTile.WideBackgroundImage = new Uri("Assets/Tiles/FlipCycleTileLarge.png", UriKind.Relative);

     ShellTile.Create(new Uri("/MainPage.xaml?id=tile", UriKind.Relative), flipTile, true);
}

Como podemos observar en el código anterior, en primer lugar creamos un nuevo objeto de tipo FlipTileData. Le asignamos las propiedades que ya analizamos anteriormente. Las novedades y lo más interesante son la asignación de tres imágenes diferentes para cada uno de los tamaños posibles del Tile. Por último, utilizando la API ShellTile para crear el Tile.

Hasta ahora no tenemos grandes cambios con respecto a lo que teníamos.

IconicTile

Nueva plantilla. Da el aspecto típico de muchas aplicaciones del sistema. Un icono blanco con fondo transparente.

Las propiedades básicas de la plantilla IconicTile son:

  • Title. Texto que aparece en la parte inferior del Tile. No aparece en Tiles de tamaño pequeño.
  • Count. Número que aparece en la parte derecha del Tile.
  • BackgroundColor. Color de fondo del Tile. Si no se utiliza se utilizará el color del sistema.
  • SmallIconImage. Imágen utilizada como icono cuando el tamaño del Tile es pequeño.
  • IconImage. Imágen utilizado como icono en el Tile cuando el tamaño es medio o grande.
  • WideContent1. Primera línea mostrada en el Tile cuando el tamaño es grande (ancho).
  • WideContent2. Segunda línea mostrada en el Tile cuando el tamaño es grande (ancho).
  • WideContent3. Tercera línea mostrada en el Tile cuando el tamaño es grande (ancho).

IconicTile

private void IconicTileButtonClick(object sender, RoutedEventArgs e)
{
     IconicTileData iconTile = new IconicTileData();
     iconTile.Title = "Iconic Tile";
     iconTile.Count = 21;

     iconTile.IconImage = new Uri("Assets/Tiles/FlipCycleTileMedium.png", UriKind.Relative);
     iconTile.SmallIconImage = new Uri("Assets/Tiles/FlipCycleTileSmall.png", UriKind.Relative);

     iconTile.WideContent1 = "Ejemplo Iconic Tile";
     iconTile.WideContent2 = "Texto Contenido Ancho";
     iconTile.WideContent3 = "Podemos utilizar hasta 3 líneas!";

     ShellTile.Create(new Uri("/MainPage.xaml?id=iconic", UriKind.Relative), iconTile, true);
}

El código de la parte superior es muy parecido al utilizado en el FlipTile. Creamos un objeto de tipo IconicTileData y asignamos las propiedades principales (las más destacables las propiedades WideContent que nos permiten muchas posibilidades cuando el tamaño del Tile es ancho). Por último, de nuevo utilizamos la clase ShellTile para crear el Tile.

CycleTile

La segunda nueva plantilla sin duda, proporciona una enorme cantidad de posibilidades. Es algo que muchos desarrolladores requerían. Nos permite crear Tiles muy similares al Tile de Imágenes que ya teníamos en Windows Phone 7. Podemos añadir un conjunto de imágenes que van rotando cíclicamente (de ahí el nombre).

Las propiedades básicas de la plantilla CycleTile son:

  • Title. Texto que aparece en la parte inferior del Tile. No aparece en Tiles de tamaño pequeño.
  • Count. Número que aparece en la parte superior derecha del Tile en cualquier tamaño.
  • SmallBackgroundImage. Imágen que aparece en el Tile cuando el tamaño es pequeño.
  • CycleImages. Conjunto de imágenes (máximo 9) dinámicas (van rotando) que se muestran cuando el tamaño del Tile es normal o grande (ancho).

CycleTile

private void CycleTileButtonClick(object sender, RoutedEventArgs e)
{
     CycleTileData cycleTile = new CycleTileData();
     cycleTile.Title = "Cycle Tile";
     cycleTile.Count = 25;

     cycleTile.SmallBackgroundImage = new Uri("Assets/Tiles/FlipCycleTileSmall.png", UriKind.Relative);

     List<Uri> images = new List<Uri>();
     images.Add(new Uri("Assets/Tiles/CycleTile1.png", UriKind.Relative));
     images.Add(new Uri("Assets/Tiles/CycleTile2.png", UriKind.Relative));
     cycleTile.CycleImages = images;

     ShellTile.Create(new Uri("/MainPage.xaml?id=cycle", UriKind.Relative), cycleTile, true);
}

Como podemos observar en el código de la parte superior en esta ocasión utilizamos un objeto de tipo CycleTileData y asignamos las propiedades principales (es el que cuenta con menos). La propiedad más destacable es CycleImages que espera un IEnumerable de URIs (se han añadido dos en nuestro ejemplo, el límite son nueve).

Tras añadir la lógica de cada botón estamos preparados para probar nuestra aplicación de ejemplo:

Tiles. Tamaño medio.

Tiles. Tamaño pequeño.

Tiles. Tamaño grande.

Puedes ver el resultado conseguido en este ejemplo en movimiento a continuación:

También puedes descargar el ejemplo realizado:

Espero que lo visto en la entrada os resulte interesante además de útil. En próximas entradas seguiremos profundizando en su uso. Recordar, cualquier duda o sugerencia será bienvenida en los comentarios de la entrada.

NOTA: Las imágenes de cada plantilla con sus propiedades pertenecen a la MSDN.

Más información

Artículos relacionados

3 pensamientos en “Windows Phone 8. Live Tiles.

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

  2. Buenas. Se que es antiguo, pero ¿podrías hacer un articulo haciendo un tile del tipo de contactos/people? El que tiene forma de mosaico

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