Les nouvelles tuiles de Windows Phone 8

Nouvelles tailles de tuiles

Ce n’est plus une surprise, Windows Phone 8 dispose d’un nouvel écran d’accueil et de nouvelles tuiles.

Sous Mango, nous avions à notre disposition uniquement des tuiles de 173pixels sur 173.

Maintenant sous Mango, nous avons à disposition 3 types de tuiles :

  • la petite de 159 pixels sur 159
  • la standard de 336 pixels sur 336
  • la large de 691 pixels sur 336

A noter, la tuile large n’est pas obligatoire contrairement aux deux autres, proposez là uniquement si cela à du sens, l’application native calculatrice n’en est pas disposé.

Nouveau type de tuile

En plus des différentes tailles, il existe différente type de tuiles.

Flip

Le premier type est déjà connu, il s’agit des tuiles “flip”, qui se retourne régulièrement pour laisser apparaitre la face arrière de la tuile.

Ce type d’animation n’existe évidemment pas pour la taille “petite”, il serait quasi impossible de lire le contenu de la face arrière. Il est toutefois disponible pour les deux tailles “normale” et “large”, à noter, la taille large permet d’afficher une plus grande quantité de texte mais est limité à 3 lignes.

Vous remarquerez que l’animation de la rotation est un peu plus violente qu’avant (avec un effet élastique).

A noter, le nom de l’application n’est pas visible en mode “petit”.

Iconic

Un des nouveaux types s’appelle “Iconic”, non disponible pour les développeurs tierces, mais déjà présent sous Windows Phone 7. Il est notamment utilisé par les applications natives Mail, SMS, Marketplace, etc…

Celui se compose d’un logo et d’un compteur accolé et est disponible dans les 3 tailles :

La petite et la tuile normale sont assez similaire. La tuile large ressemble à peut près à la tuile calendrier, un compteur en bas à droite avec le logo de l’application et un texte composé d’un titre et d’une description.

Pour utiliser ce genre de tuile, il faut fournir une image, correspondant au logo. Evidemment, les dimensions de ce dernier n’est pas identique aux dimensions de la tuiles, voici les dimensions requises :

  • la petite de 110 pixels sur 110
  • la standard de 202 pixels sur 202
  • la large de 110 pixels sur 110 (la même que la petite)

Cycle

Le dernier type de tuile est lui aussi connu des utilisateurs WP7, mais non accessible aux développeurs, il s’agit des tuiles cycliques. Cette tuile permet de faire défiler 9 images consécutivement comme la tuile “photo” de windows phone 7. L’effet n’est pas disponible en mode “petit”.

Une bonne nouvelle par rapport à Windows 8, est que vous n’êtes pas obligé de gérer les tuiles normales et les tuiles larges séparément, vous pouvez les gérer en un seul accès.

A savoir, si vous souhaitez activer la tuile large, alors seule les parties gauche des images seront visibles dans la tuile normale.

Voyons comment faire.

Comment créer une tuile “flip”

Au lien de créer une StandardTileData, il suffit de créer une FlipTileData :


FlipTileData TileData = new FlipTileData()
{
Title = "[titre]",
BackTitle = "[titre de la tuile arrière]",
BackContent = "[contenu de la tuile arrière]",
WideBackContent = "[contenu de la tuile arrière en affichage large]",
Count = [compteur],
SmallBackgroundImage = [fond de la petite tuile],
BackgroundImage = [font de la tuile normale],
BackBackgroundImage = [fond de la tuile arrière normale],
WideBackgroundImage = [font de la tuile large],
WideBackBackgroundImage = [font de la tuile arrière large],
};

Créer une tuile iconic

 

IconicTileData TileData = new IconicTileData()
{
Title = "Fuse",
Count = 42,
WideContent1 = "Sortie de Windows Phone 8",
WideContent2 = "le parisien - 30/10/12",
WideContent3 = "un très bon accueil par le publique",
SmallIconImage = "/assets/smallicon.png",
IconImage = "/assets/icon.png",
BackgroundColor = Color.Red
};

A noter ici, SmallIconImage sert à la fois pour l’affiche petit et large et nous avons une propriété BackgroundColor pour personnaliser la couleur de la tuile (car nous n’avons pas assez aux background contrairement aux autres).

A savoir : si le canal alpha de BackgroundColor est différent de 255, la couleur système sera utilisée.

Créer une tuile cyclique

Enfin pour créer une tuile cyclique, il suffit de créer une CycleTileData comme ceci :


CycleTileData cycleTile = new CycleTileData()
{
Title = "TVShow";
Count = 42;
SmallBackgroundImage = new Uri("/Assets/logo.jpg", UriKind.Relative);
CycleImages = new Uri[]
{
new Uri("/Assets/Tiles/lost.jpg", UriKind.Relative),
new Uri("/Assets/Tiles/breakingbad.jpg", UriKind.Relative),
new Uri("/Assets/Tiles/battlestargalactica.jpg", UriKind.Relative),
new Uri("/Assets/Tiles/doctorwho.jpg", UriKind.Relative),
new Uri("/Assets/Tiles/walkingdead.jpg", UriKind.Relative),
new Uri("/Assets/Tiles/personofinterest.jpg", UriKind.Relative),
new Uri("/Assets/Tiles/fringe.jpg", UriKind.Relative),
new Uri("/Assets/Tiles/theoffice.jpg", UriKind.Relative),
new Uri("/Assets/Tiles/sherlock.jpg", UriKind.Relative),
}
};

Attention à ne pas mettre plus de 9 images dans la liste CycleImages. Vous pouvez toutefois en mettre moins si vous le souhaitez.

Attention !!!

Une fois qu’une tuile est créé avec un type (cycle, iconic, flip), il n’est pas possible de mettre à jour la tuile avec un autre type, une exception sera alors levée. Il est donc indisposable de demander à l’utilisateur de supprimer manuellement sa tuile avant.