I. Avant-propos et introduction

I-A. Un mot sur l'auteur

Je suis Nathanael Marchand, diplômé 2009 de Polytech'Annecy-Chambéry. Actuellement chez So@t, j'occupe le poste d'Expert .Net qui regroupe des missions de consulting sur les technologies .Net, d'audit, de formation interne et externe, la veille technologique ainsi que l'animation des communautés.

Vous pouvez me retrouver ici sur Developpez.com où j'anime et modère la partie .Net ainsi que dans les différentes communautés (Silverlight, Windows Phone, Windows 8, etc.).

Vous pouvez également me retrouver sur des événements comme les Tech'Days ou les rendez-vous des communautés où j'anime des sessions.

Image non disponible

I-B. Introduction

Introduites avec Windows Phone, les tuiles sont le point d'entrée vers une application. Mais elles sont aussi bien plus que ça ! En effet, elles ont été conçues pour être également un vecteur d'information. Tuiles simples ou larges, animations, badges, tuiles secondaires et gestion du contenu, nous allons voir les principaux points des tuiles ainsi que revoir les « guidelines » du Windows Store afin d'éviter les pièges de celles-ci.

II. Premiers pas avec la tuile principale

II-A. Configurer sa tuile principale

Lors de la création d'une nouvelle application, un certain nombre de ressources est automatiquement inclus dans la solution comme une image pour l'écran de chargement, des images pour la tuile principale, etc. Nous allons passer en revue ce qui est nécessaire et utile pour bien démarrer. Tout d'abord, il faut ouvrir le manifeste de l'application (fichier Package.appxmanifest de la solution). Il devrait ressembler à celui-ci :

Image non disponible

C'est la section « Tile » qui nous intéresse. Tout d'abord, elle contient le logo principal de taille 150x150, c'est l'image de la tuile standard carrée. Ensuite, le « Wide Logo » est une image de 310x150, c'est l'image de la tuile élargie, elle est optionnelle. L'utilisateur a en effet la possibilité d'activer ou de désactiver ce mode s'il est disponible. Enfin, le « Small Logo » est une petite image de 30x30 qui est utilisée lorsque la tuile s'anime. Nous verrons son utilisation plus tard dans cet article.

Pour mon application d'exemple « plop », j'ai choisi les logos suivants :

Logo Wide Logo Small Logo
Image non disponible Image non disponible Image non disponible

« Short Name » est le nom de l'application qui figurera sur la tuile principale. « Show Name » laisse la possibilité d'afficher ou non le nom sur la tuile. Dans le cas où par exemple la tuile large comporte déjà le nom de l'application dans le logo, il est inutile (voire déconseillé) d'afficher une deuxième fois le nom comme sur l'exemple suivant :

Image non disponible

Pour la tuile normale c'est par contre tout à fait justifié, vu qu'elle ne comporte pas le nom dans son image :

Image non disponible

Le champ suivant « Foreground text » permet de régler la couleur des textes dans la tuile : soit blanc, soit noir. C'est pratique en fonction de la couleur de fond du logo.

Enfin, le dernier champ « Background Color » permet de définir la couleur de fond de la tuile, on en a notamment besoin lorsqu'on anime la tuile.

Voilà tout pour les options de configuration de la tuile principale. Nous allons désormais nous pencher sur ce qu'il est possible de faire avec cette tuile, notamment l'animer.

II-B. Faire vivre sa tuile

Une tuile qui ne s'anime pas ne présente que peu d'intérêt. De plus comparée à une autre application qui possède la même fonctionnalité, l'utilisateur préférera celle avec la tuile animée car il la sentira plus vivante, enfin ça ne serait pas trop dans la philosophie Windows 8.

II-B-1. Premier contact

Pour notre première animation de tuile, nous allons commencer par un exemple simple. Suite à un clic sur un bouton, nous allons pousser notre premier contenu :

 
Sélectionnez

<Button
	Content="Pousser de l'info"
	Height="50"
	Width="200"
	Click="OnButtonClick" />
 
Sélectionnez

private void OnButtonClick(object sender, RoutedEventArgs e)
{
	var content = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText03);
	var textNode = (XmlElement)content.SelectSingleNode("/tile/visual/binding/text[@id=1]");
	textNode.InnerText = "Mon application, elle roxxe !";
	
	var updater = TileUpdateManager.CreateTileUpdaterForApplication();
	updater.Update(new TileNotification(content));
}

Après lancement de l'application et clic sur le bouton, on se retrouve avec ceci:
Image non disponible
En fait, pour mettre à jour la tuile, le TileUpdateManager a besoin d'un bout de XML. C'est dans ce XML que sont toutes les informations relatives à la mise à jour (modèle, images et texte à utiliser).
Pour nous faciliter la tâche, il est possible de récuperer un modèle via la méthode GetTemplateContent. Ensuite, il suffit de remplir les différentes données nécessaires (ici la ligne de texte). Enfin, il faut créer un TileUpdater pour l'application et lui passer une TileNotification créée à l'aide du XML souhaité.
Pour information, le TileWideText03 correspond à ce XML :

 
Sélectionnez

<tile>
  <visual>
    <binding template="TileWideText03">
      <text id="1">Text Header Field 1</text>
    </binding>  
  </visual>
</tile>

II-B-2. Choisir son modèle

Comme nous l'avons vu ci-dessus, il faut utiliser un modèle, puis le remplir et enfin, l'envoyer au gestionnaire de mise à jour.
Oui mais quels sont les modèles disponibles ?
La liste de tous les modèles est disponible sur MSDN. Les modèles sont triés par catégories de tuile (tuile simple ou large) ainsi que par contenu (image, texte, image+texte, « peek »). Le mode « peek » permet en une mise à jour d'alterner image et texte (exemple : une information avec son image).
Si parmi les 45 modèles disponibles aucun ne convient, sachez qu'il n'est pas possible d'en créer un nouveau et qu'il faudra reconsidérer votre choix. Il est également impossible de modifier la police d'écriture ou la taille de celle-ci. Les couleurs sont celles choisies dans le manifeste de l'application.

II-B-3. Annuler la notification

Il est très simple d'annuler ladite notification et de revenir à la tuile par défaut, il suffit d'appeller la méthode Clear.

 
Sélectionnez

var updater = TileUpdateManager.CreateTileUpdaterForApplication();
updater.Clear();

II-B-4. Expiration de l'information

Il est très important pour l'utilisateur d'avoir toujours une information à jour. Pour cela, il est vivement recommandé d'indiquer une date d'expiration pour la notification. Attention, elle doit être cohérente avec la période de rafraîchissement de l'information. Par exemple, pour un site d'actualité, une journée est une bonne période de validité. Pour un score sportif « temps réél », il faudrait plutôt envisager quelques minutes. La seule modification à faire est du côté de l'instanciation de TileNotification, ici la notification sera valable une journée :

 
Sélectionnez

var updater = TileUpdateManager.CreateTileUpdaterForApplication();
updater.Update(new TileNotification(content) { ExpirationTime = DateTime.Now.AddDays(1) });

II-B-5. File de notifications

Une tuile supporte jusqu'à 5 notifications différentes. Elle n'est pas activée par défaut mais une file est disponible. La tuile s'anime et cycle entre les notifications de manière périodique. Sans activer la file, une nouvelle notification écrase la précédente. Adaptons l'exemple que nous avons utilisé jusqu'à présent :

 
Sélectionnez

var content1 = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText03);
var textNode1 = (XmlElement)content1.SelectSingleNode("/tile/visual/binding/text[@id=1]");
textNode1.InnerText = "Mon application, elle roxxe !";

var content2 = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText03);
var textNode2 = (XmlElement)content2.SelectSingleNode("/tile/visual/binding/text[@id=1]");
textNode2.InnerText = "Elle est vraiment chouette !";

var updater = TileUpdateManager.CreateTileUpdaterForApplication();
updater.Update(new TileNotification(content1));
updater.Update(new TileNotification(content2));

La seconde notification écrase la première. Il faut donc activer la file à l'aide de l'instruction EnableNotificationQueue qui prend en paramètre un booléen indiquant si oui ou non on active la file. Ainsi, avec le code suivant, sur le bureau, on observe l'alternance des deux messages :

 
Sélectionnez

var content1 = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText03);
var textNode1 = (XmlElement)content1.SelectSingleNode("/tile/visual/binding/text[@id=1]");
textNode1.InnerText = "Mon application, elle roxxe !";

var content2 = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText03);
var textNode2 = (XmlElement)content2.SelectSingleNode("/tile/visual/binding/text[@id=1]");
textNode2.InnerText = "Elle est vraiment chouette !";

var updater = TileUpdateManager.CreateTileUpdaterForApplication();

updater.EnableNotificationQueue(true);

updater.Update(new TileNotification(content1));
updater.Update(new TileNotification(content2));

Comme précisé ci-dessus, 5 notifications peuvent être mises en file. Lorsque la sixième arrive, la première sort (First-in, First-out).

II-B-6. Le Tag d'une notification

Vu que la file des notifications est une FIFO, comment faire si je veux remplacer uniquement la troisième ? Faut-il renvoyer les quatre autres plus la nouvelle ? Une solution plus simple existe : c'est le Tag, une propriété de la classe TileNotification. Lorsqu'une nouvelle notification arrive au TileUpdateManager, celui-ci vérifie les notifications existantes et si une notification existe déjà avec le même Tag, alors il la remplace, sinon il la met en file. Voyons l'exemple avec deux boutons :

 
Sélectionnez

private void OnButtonClick(object sender, RoutedEventArgs e)
{
	var content1 = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText03);
	var textNode1 = (XmlElement)content1.SelectSingleNode("/tile/visual/binding/text[@id=1]");
	textNode1.InnerText = "Mon application, elle roxxe !";

	var content2 = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText03);
	var textNode2 = (XmlElement)content2.SelectSingleNode("/tile/visual/binding/text[@id=1]");
	textNode2.InnerText = "Elle est vraiment chouette !";

	var updater = TileUpdateManager.CreateTileUpdaterForApplication();
	updater.Clear();
	updater.EnableNotificationQueue(true);

	updater.Update(new TileNotification(content1) { Tag = "tag1" });
	updater.Update(new TileNotification(content2) { Tag = "tag2" });
}

private void OnAnotherButtonClick(object sender, RoutedEventArgs e)
{
	var content1 = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText03);
	var textNode1 = (XmlElement)content1.SelectSingleNode("/tile/visual/binding/text[@id=1]");
	textNode1.InnerText = "Mon application, elle envoie le pâté !";

	var content2 = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText03);
	var textNode2 = (XmlElement)content2.SelectSingleNode("/tile/visual/binding/text[@id=1]");
	textNode2.InnerText = "Elle surpoutre tout !";

	var updater = TileUpdateManager.CreateTileUpdaterForApplication();

	updater.Update(new TileNotification(content1) { Tag = "tag1" });
	updater.Update(new TileNotification(content2) { Tag = "tag3" });
}

Lors d'un appui sur le premier bouton (qui déclenche OnButtonClick), on voit l'alternance des deux messages.
Lorsque l'on appuie sur le second bouton, on s'apercoit que le message "Mon application, elle roxxe !" a laissé la place à "Mon application, elle envoie le pâté !". En effet, les deux notifications possèdent le même tag. Le message "Elle surpoutre tout !", lui, a simplement été mis en file, aucune notification existante n'ayant le même tag.

Cette méthode est très pratique pour, par exemple, gérer les catégories de notification ; typiquement, pour un flux d'information on souhaite qu'une actualité Sport ne puisse que remplacer une autre actualité Sport et non pas Politique.

II-B-7. Le calendrier de notification

Jusqu'à présent, les notifications sont tout de suite affichées. Il est cependant possible de définir quand celles-ci apparaîtront. Au lieu d'utiliser Update, il suffit d'utiliser AddToSchedule et de passer une instance de ScheduledTileNotification (classe quasi-identique à TileNotification) qui prend en paramètre le moment à partir duquel la notification doit apparaître. Ainsi, dans l'exemple suivant, la première notification est affichée immédiatement, la seconde une minute après :

 
Sélectionnez

private void OnButtonClick(object sender, RoutedEventArgs e)
{
	var content1 = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText03);
	var textNode1 = (XmlElement)content1.SelectSingleNode("/tile/visual/binding/text[@id=1]");
	textNode1.InnerText = "Mon application, elle roxxe !";

	var content2 = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText03);
	var textNode2 = (XmlElement)content2.SelectSingleNode("/tile/visual/binding/text[@id=1]");
	textNode2.InnerText = "Elle est vraiment chouette !";

	var updater = TileUpdateManager.CreateTileUpdaterForApplication();
	updater.Clear();
	updater.EnableNotificationQueue(true);

	updater.Update(new TileNotification(content1));
	updater.AddToSchedule(new ScheduledTileNotification(content2, DateTime.Now.AddMinutes(1)));
}

Il est également possible de parcourir les notifications déjà plannifiées à l'aide de GetScheduledTileNotifications qui retourne un énumérateur de notifications. Enfin, il est possible d'annuler une planification à l'aide de RemoveFromSchedule qui prend en paramètre la ScheduledTileNotification à annuler.

II-B-8. Les notifications distantes

Au lieu de créer dans l'application les différentes notifications de tuiles, il est possible de déléguer cette tâche à un site internet. Il est en effet possible d'utiliser un fichier XML qui reprend exactement le contenu XML passé en paramètre du constructeur TileNotification hébergé ou généré à la volée sur un site internet. C'est possible en faisant ceci :

 
Sélectionnez

private void OnButtonClick(object sender, RoutedEventArgs e)
{
	var updater = TileUpdateManager.CreateTileUpdaterForApplication();
	updater.StartPeriodicUpdate(new Uri("http://monsite/monfichier.xml"), PeriodicUpdateRecurrence.Hour);
}

Il est à noter que la méthode prend en paramètre l'URL du fichier XML et la périodicité avec laquelle l'agent va surveiller ce fichier.
Il est également possible de passer un tableau d'URL pour bénéficier des 5 notifications possibles par tuile comme le montre l'exemple suivant :

 
Sélectionnez

private void OnButtonClick(object sender, RoutedEventArgs e)
{
	var updater = TileUpdateManager.CreateTileUpdaterForApplication();
	var urls = new[]
		{
			new Uri("http://monsite/monfichier1.xml"),
			new Uri("http://monsite/monfichier2.xml"),
			new Uri("http://monsite/monfichier3.xml"),
			new Uri("http://monsite/monfichier4.xml"),
			new Uri("http://monsite/monfichier5.xml"),
		};

	updater.StartPeriodicUpdateBatch(urls, PeriodicUpdateRecurrence.Hour);
}

II-B-9. Gérer les préférences de l'utilisateur

L'utilisateur peut ne pas toujours activer les notifications, parfois c'est même spécifié dans les règles de groupe Active Directory. Il se peut également qu'il préfère opter pour une tuile simple plutôt qu'une tuile large (si elle est disponible). Afin de connaître la préférence de l'utilisateur concernant ses possibilités de notifications, il est possible d'interroger la propriété Setting du TileUpdater. C'est une énumération qui prend les valeurs du tableau qui suit.

Valeur Explication
Enabled Notifications activées.
DisabledForApplication Notifications désactivées pour cette application.
DisabledForUser Notifications désactivées pour cet utilisateur.
DisabledByGroupPolicy Notifications désactivées par l'administrateur du domaine.
DisabledByManifest Notifications désactivées par le manifeste de l'application.

Lorsque l'utilisateur désactive les notifications, la tuile large est automatiquement desactivée.
Il n'est d'ailleurs pas possible de savoir si l'utilisateur utilise la tuile simple ou large. Il faut donc envoyer les notifications à la fois pour la tuile simple et pour la tuile large. Essayons avec cette exemple :

 
Sélectionnez

private void OnButtonClick(object sender, RoutedEventArgs e)
{
	var updater = TileUpdateManager.CreateTileUpdaterForApplication();
	updater.Clear();

	for (var i = 0; i <= 5; i++)
	{
		var content = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText03);
		var textNode = (XmlElement)content.SelectSingleNode("/tile/visual/binding/text[@id=1]");
		textNode.InnerText = "Text " + i;
		updater.Update(new TileNotification(content));
	}

	for (var i = 0; i <= 5; i++)
	{
		var content = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareText03);
		var textNode = (XmlElement)content.SelectSingleNode("/tile/visual/binding/text[@id=1]");
		textNode.InnerText = "Text " + i;
		updater.Update(new TileNotification(content));
	}
}

Si pour la tuile simple, cela fonctionne correctement, on s'apercoit que l'on ne voit pas les notifications de la tuile large. En effet, le TileUpdater a considéré les cinq premières et les cinq suivantes comme dix notifications distinctes. Les cinqs notifications de la tuile simple ont donc poussé de la file les notifications pour la tuile large !
La solution est de lier une notification de tuile simple avec une notification de tuile large en manipulant le XML de chacune pour les fusionner. Pour rappel, le XML d'une notification ressemble au premier bout de code. On veut arriver au second bout de code XML, pour cela, on utilise le troisème bout de code C# qui fusionne les deux.

 
Sélectionnez

<tile>
  <visual>
    <binding template="TileWideText03">
      <text id="1">Text 0</text>
    </binding>
  </visual>
</tile>
 
Sélectionnez

<tile>
  <visual>
    <binding template="TileWideText03">
      <text id="1">Text 0</text>
    </binding>
    <binding template="TileSquareText03">
      <text id="1">Text 0</text>
    </binding>
  </visual>
</tile>
 
Sélectionnez

private void OnButtonClick(object sender, RoutedEventArgs e)
{
	var updater = TileUpdateManager.CreateTileUpdaterForApplication();
	updater.Clear();

	foreach (var i in Enumerable.Range(0, 5))
	{
		var wideContent = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText03);
		var wideTextNode = (XmlElement)wideContent.SelectSingleNode("/tile/visual/binding/text[@id=1]");
		wideTextNode.InnerText = "Text " + i;

		var simpleContent = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareText03);
		var simpleTextNode = (XmlElement)simpleContent.SelectSingleNode("/tile/visual/binding/text[@id=1]");
		simpleTextNode.InnerText = "Text " + i;

		var simpleBinding = wideContent.ImportNode(simpleContent.SelectSingleNode("/tile/visual/binding"), true);
		var visual = (XmlElement)wideContent.SelectSingleNode("/tile/visual"); visual.AppendChild(simpleBinding);

		updater.Update(new TileNotification(wideContent));
	}
}

Désormais, nos notifications fonctionnent correctement, on a bien cinq notifications pour la tuile simple et cinq pour la tuile large.

II-C. Du point de vue des « guidelines »

Les « guidelines » du Windows Store concernant la tuile primaire sont disponibles sur MSDN.

D'une manière générale, on observe plusieurs points importants notés ci-dessus. Au niveau de ce qui est présentation de la tuile, on remarque vraiment la philosophie d'uniformisation de l'expérience utilisateur ; chaque tuile doit se ressembler pour éviter de perdre l'utilisateur tout en réussissant à se distinguer et se démarquer par son logo, son contenu, ses couleurs. L'autre point important est que l'information doit venir à l'utilisateur mais sans l'agresser : interdit de faire de la pub, du « cliquez-moi » ou même de matraquer le logo de l'application. Enfin, dernier point important, c'est la fraîcheur du contenu : le contenu ne doit pas être périmé, doit être mis à jour souvent. Il est préférable de se dire, « bon, je n'arriverai pas à animer suffisamment ma tuile alors j'abandonne la tuile large » plutôt que de s'obstiner à avoir une tuile vide ou, pire, obsolète !

III. Aller plus loin avec les tuiles secondaires

III-A. Qu'est ce qu'une tuile secondaire ?

Vous pouvez offrir la possibilité à l'utilisateur de créer des tuiles secondaires. Ce sont d'autres points d'entrée vers votre application. Attention, le but n'est pas de créer un raccourci vers une partie de l'application qui serait accessible via la navigation mais bien de faire comme si cette partie était une partie indépendante avec ses propres notifications. Une application dans l'application en quelque sorte. Il est donc très important d'animer la tuile sous peine de refus de validation lors de la soumission au Windows Store.

III-B. Comment créer une tuile secondaire ?

Il n'est pas possible de créer une tuile secondaire de manière programmatique, cependant il est possible de demander à l'utilisateur s'il souhaite le faire.

 
Sélectionnez
private void OnButtonClick(object sender, RoutedEventArgs e)
{
	var secondaryTile = new SecondaryTile
		{
			TileId = "secondaryTile1",
			ShortName = "Plop is back",
			DisplayName = "Ma description",
			BackgroundColor = Color.FromArgb(0, 255, 0, 151),
			ForegroundText = ForegroundText.Light,
			Logo = new Uri("ms-appx:///Assets/logo_plain_150.png"),
			WideLogo = new Uri("ms-appx:///Assets/logo_wide_plain_150.png"),
			SmallLogo = new Uri("ms-appx:///Assets/logo_plain_24.png"),
			TileOptions = TileOptions.ShowNameOnLogo | TileOptions.CopyOnDeployment,
			Arguments = "im-the-arguments"
		};

	secondaryTile.RequestCreateAsync();
}

De cette manière, l'utilisateur recoit un popup lui demandant de confirmer. Sa réponse est la valeur de retour de RequestCreateAsync.
On peut remarquer que les paramètres de création sont assez analogues à ceux que l'on a réglé dans le manifeste pour la tuile principale. Ainsi, il n'est pas nécessaire de détailler « ShortName », « DisplayName », « BackgroundColor », « ForegroundText », « Logo », « WideLogo », « SmallLogo » et « TileOptions ».
« TileId » est un identifiant qui permet de reconnaître la tuile secondaire parmis les autres. Il est déconseillé de mettre une valeur aléatoire. « Arguments » est une chaîne de caractères passée à l'application lors du lancement et qui permet de distinguer un lancement à partir de la tuile primaire d'un lancement d'une tuile secondaire (et éventuellement passer des arguments sur la section de l'application à atteindre). On récupère les arguments dans la méthode OnLaunched de l'application :

 
Sélectionnez
sealed partial class App
{
	public App()
	{
		InitializeComponent();
	}

	protected override void OnLaunched(LaunchActivatedEventArgs args)
	{
		var arguments = args.Arguments; //On peut récupérer la valeur ici

		if (args.PreviousExecutionState == ApplicationExecutionState.Running)
		{
			Window.Current.Activate();
			return;
		}

		Window.Current.Content = new MainPage();
		Window.Current.Activate();
	}
}

Il est également possible de récuperer l'identifiant de la tuile via la propriété TileId de l'objet LaunchActivatedEventArgs.

III-C. Animer les tuiles secondaires

L'animation des tuiles secondaires se fait exactement de la même manière qu'avec les tuiles primaires. La seule différence est au niveau de l'obtention du TileUpdater qui se fait de la manière suivante (le paramètre est le TileId de ladite tuile) :

 
Sélectionnez
TileUpdateManager.CreateTileUpdaterForSecondaryTile("secondaryTile1");

III-D. Du point de vue des « guidelines »

Les « guidelines » du Windows Store concernant les tuiles secondaires sont disponibles sur MSDN. Elles complètent celles sur la tuile principale en spécifiant bien ce qui a été précédé dans l'introduction de la partie, à savoir qu'une tuile secondaire n'est pas un simple raccourci.

IV. Les badges

IV-A. Kézako ?

Un badge est un autre moyen de diffuser de l'information sur la tuile, c'est une petite icône en bas à droite de celle-ci qui affiche soit un pictogramme, soit un numéro.
Elle permet par exemple d'afficher le nombre de tâches en attente dans l'application ou un drapeau indiquant la disponibilité dans une conversation.

IV-B. Créer un badge

De manière analogue aux notifications de tuiles, il suffit de créer un contenu XML pour la tuile sur laquelle on souhaite diffuser l'information comme dans l'exemple qui suit :

 
Sélectionnez
private void OnButtonClick(object sender, RoutedEventArgs e)
{
	var primaryContent = BadgeUpdateManager.GetTemplateContent(BadgeTemplateType.BadgeNumber);

	var primaryBadgeElement = (XmlElement)primaryContent.SelectSingleNode("/badge");
	primaryBadgeElement.SetAttribute("value", "42");

	var primaryUpdater = BadgeUpdateManager.CreateBadgeUpdaterForApplication();
	primaryUpdater.Update(new BadgeNotification(primaryContent));

	var secondaryContent = BadgeUpdateManager.GetTemplateContent(BadgeTemplateType.BadgeGlyph);

	var secondaryBadgeElement = (XmlElement)secondaryContent.SelectSingleNode("/badge");
	secondaryBadgeElement.SetAttribute("value", "alert");

	var secondaryUpdater = BadgeUpdateManager.CreateBadgeUpdaterForSecondaryTile("secondaryTile1");
	secondaryUpdater.Update(new BadgeNotification(secondaryContent));
}

Dans ce bout de code, on peut voir que sur la tuile principale, le badge est la valeur 42. Sur la tuile secondaire, c'est une astérisque (la valeur "alert").

Il est également possible de déléguer ce rôle à un site web qui héberge le contenu. Periodiquement, à la fréquence définie, l'URL sera interrogée et la valeur mise à jour.

 
Sélectionnez
updater.StartPeriodicUpdate(new Uri("http://monsite/badge.xml"), PeriodicUpdateRecurrence.Hour);

IV-C. Les différents badges disponibles

Dans le cas d'un badge numérique, les valeurs de 0 à 99 sont affichées. Au-dessus, c'est 99+ qui est affiché.
Pour le cas des badges avec pictogramme, la liste complète de ceux-ci est disponible à cette addresse.

IV-D. Du point de vue des « guidelines »

Les « guidelines » du Windows Store concernant les badges sont disponibles sur MSDN. Elles sont essentiellement basées sur l'utilité d'un badge. En effet, la signification du numéro ou du pictogramme doit être immédiate pour l'utilisateur et ne doit pas porter à confusion (dans une application de réseau social par exemple, l'utilisateur ne doit pas se poser la question si 10 est son nombre de notifications, de demande d'amis, etc.).

V. L'écran de verrouillage

V-A. Les applications et l'écran de verrouillage

L'écran de verrouillage permet également de diffuser des informations. En effet, l'utilisateur peut selectionner plusieurs applications qui peuvent y figurer en tant que badge et une seule qui peut y figurer de manière détaillée.

V-B. Apparaître sur l'écran de verrouillage

Afin d'apparaître sur l'écran de verrouillage, il faut préciser un logo de 24x24 dans le champ Badge Logo. Il faut également définir si le contenu ne sera que le badge ou le badge avec le texte de la tuile (dans le cas où l'utilisateur aurait choisi l'application en détaillé sur l'écran de verrouillage). Attention, à partir du moment où un logo de badge est défini, il est impératif de déclarer cette option. Cette option oblige également à créer une tâche d'arrière-plan (les tâches d'arrière-plan n'étant pas l'objet de l'article, nous ne détaillerons pas le processus).
Lorsqu'une application est déclarée comme capable d'être sur l'écran de verrouillage, c'est la valeur du badge de la tuile principale et le contenu de la notification de la tuile principale qui figurent sur celui-ci. Il n'est pas possible de personnaliser ce comportement.

VI. Conclusion

Windows 8 introduit un nouveau concept de tuile, massivement salué par la critique sur Windows Phone, pour les applications Metro. Ces tuiles sont un excellent moyen pour un développeur de rappeller que l'application existe et de lui donner l'envie de la lancer. Pour l'utilisateur, c'est également un excellent moyen d'être informé de tout ce qui se passe, d'un seul coup d'oeil, sans avoir à forcément lancer une application.

Merci à l'équipe DotNet, David Catuhe et Cyril Cathala pour la relecture technique ainsi qu'à Kaera pour sa relecture orthographique.