Dia 1: Live tiles

Estándar

live-tiles

Si estás familiarizado con el desarrollo para Windows Phone 7 entonces ya sabes que es un live tile. Se trata de unas de las características únicas de Windows Phone que cada uno puede manipular. En Windows Phone 8, Microsoft añade más posibilidades de crear live tiles y también los hizo más flexible para los usuarios finales realmente  puedan personalizar su teléfono.

Uno de los principales cambios es que los live tiles ahora pueden ser establecidos en  3 tamaños diferentes. Pequeño, medio y ancho.También hay 3 plantillas diferentes para crear live tiles que muestran información sobre las diferentes maneras: la plantilla Flip, la plantilla cycle y la plantilla iconic.

Los tamaños utilizados en estas plantillas son :

IC652795

Flip Cycle Iconic
Small 159 * 159px 159 * 159px 110 * 110px
Medium 336 * 336px 336 * 336px 202 * 202px
Wide 691 * 336px 691 * 336px

 

Plantilla Flip

IC652796

En esta plantilla contaremos con dos partes donde definir el contenido del tile. En la cara frontal, podremos definir una imagen, un contador y un título. En la cara trasera, podremos definir una imagen, un título y un contenido. La plantilla está soportada en los tres tamaños de tiles disponibles. Sin embargo, en el tamaño Small, no mostrará la información de la cara trasera; solo lo hará en los tamaños Medium y Large. Ahora nos vamos al codigo.
Comenzamos con un nuevo proyecto vacío y agregamos un botón.Agregamos un evento click y colocamos allí nuestro código de creación de flip para hacerla lo más fácil posible. En el evento click empezaremos añadiendo el código para agregar los live tile y nos quedaría de esta forma :

private void Button_Click(object sender, RoutedEventArgs e)
{

ShellTile tile = ShellTile.ActiveTiles.FirstOrDefault();
FlipTileData fliptile = new FlipTileData();
fliptile.Title = “Memes”;
fliptile.Count = 9;
fliptile.BackTitle = “CarlosAriash”;
fliptile.BackContent = “Back medium”;
fliptile.WideBackContent = “back Wide”;
fliptile.SmallBackgroundImage = new Uri(“Assets/Fome.jpg”, UriKind.Relative);
fliptile.BackgroundImage = new Uri(“Assets/llorando.jpg”, UriKind.Relative);
fliptile.WideBackgroundImage = new Uri(“Assets/wonmalaonda.jpeg”, UriKind.Relative);
tile.Update(fliptile);

}

Podemos  conseguir un tile activ0  mediante la consulta de la clase ShellTile. Después crearemos un objeto FlipTileData donde podemos establecer todas las propiedades del nuevo tile.Vamos a configurar el título, contador y otras propiedades. Algunas propiedades sólo están en el modo pequeño, algunos sólo se utilizan en el modo de medio o ancho y algunos se utilizan en todas las modalidades, como el recuento.Estamos añadiendo 3 imágenes diferentes para los 3 tamaños del tile.Cuando terminamos de definir las propiedades en el tile que podemos llamar el método update de nuestro objeto  tile y pasar el FlipTileData a ella para establecer el nuevo tile.

Title El título se muestra en la parte inferior izquierda de la parte delantera del tile. se mostrará en los live tile medianos y anchos.
Count el contador es el número en el círculo negro en la parte superior derecha de cada tile. La cuenta se muestra en todos los tamaños de tile.
BackgroundImage La imagen de fondo es la imagen que aparece en el fondo de la parte delantera del tile en tamaño mediano
BackBackgroundImage Para establecer el fondo de la parte posterior del tile use el BackBackgroundImage
BackContent BackContent es el texto que aparece en la parte posterior de un tile de tamaño mediano
BackTitle Título que se muestra en la parte inferior izquierda de la espalda de un tile en mediano y grande
SmallBackgroundImage El fondo del tile en tamaño pequeño.
WideBackgroundImage La imagen de fonto del tile grande.
WideBackBackgroundImage El fondo de la parte posterior del tile large
WideBackContent Texto que aparece en la parte superior izquierda de la parte posterior del tile large

Plantilla Iconic

IC652798

La plantilla Iconic es una nueva plantilla que esta disponible en Windows Phone 8 y creo que es un muy buen complemento para el SDK de WP. Un montón de aplicaciones utilizan tile con un icono blanco y fondo transparente para que parezca aplicaciones nativas de WP. Sin embargo muchas personas tienen problemas para dimensionar el icono y el contador donde no se ven llamativas como las aplicaciones de correo o centro de mensajes. Para hacer esto mas facil para todos Microsoft creo la plantilla de tile iconic y funciona casi similar a la FlipTile Solo que estamos usando un Objeto IconicTileData en lugar de FlipTileData. Quedando algo de esta Forma el Codigo.

private void Button_Click_1(object sender, RoutedEventArgs e)
{

ShellTile tile = ShellTile.ActiveTiles.FirstOrDefault();

IconicTileData icontile = new IconicTileData();
icontile.Title = “Plantilla Iconic”;
icontile.Count = 12;

icontile.IconImage = new Uri(“Assets/Beverage-Milk-Shake.png”, UriKind.Relative);
icontile.SmallIconImage = new Uri(“Assets/Beverage-Juice-01.png”, UriKind.Relative);

icontile.WideContent1 = “CarlosAriash Blog”;
icontile.WideContent2 = “Dia 1”;
icontile.WideContent3 = “Live Tile”;

ShellTile.Create(new Uri(“/MainPage.xaml”, UriKind.Relative), icontile, true);
}

 

Quedando como resultado esto :

1

Wide

 

Pantilla Cycle

IC652797

en  Iconic tenemos un monton de posibilidades para los live tile para poder crear aplicaciones en mosaico de fotos donde un conjunto de imagenes gira en vueltas del tile.

Para la creacion de este live tile Cycle se hace de la misma manera que la creacion de las demas 2 plantillas. Por lo cual el codigo nos quedara de esta forma :

CycleTileData cycleicon = new CycleTileData();

cycleicon.Title = “Plantilla Cycle”;
cycleicon.Count = 5;

cycleicon.SmallBackgroundImage = new Uri(“Assets/Beverage-Milk-Shake.png”, UriKind.Relative);

List<Uri> images = new List<Uri>();
images.Add(new Uri(“Assets/Fome.jpg”, UriKind.Relative));
images.Add(new Uri(“Assets/llorando.jpg”, UriKind.Relative));
images.Add(new Uri(“Assets/wonmalaonda.jpeg”, UriKind.Relative));
cycleicon.CycleImages = images;

ShellTile.Create(new Uri(“/MainPage.xaml?id=cycle”, UriKind.Relative), cycleicon, true);

 

Y nos da como resultado esto :

1

 

El máximo de las imágenes para la plantillo de Cycle es de 9 Imagenes y ira rotando las imagenes con una animacion de deslizamiento suave. Las de propiedades disponibles de cada plantilla  se encuentra en cada imagen adjuntada en los distintos tipos de live tile.

Nos vemos en el proximo post!🙂

Como siempre dejo el codigo Sample para que puedan revisar ustedes mismos el codigo Descargalo Aqui 🙂

 

 

 

 

 

 

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