Tout savoir sur les tuiles de Windows 8 (C#/XAML)

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.

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.

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 :

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 :

« 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 :

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

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.

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 :

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écupérer 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▲

II-B-3. Annuler la notification▲

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

II-B-4. Expiration de l'information▲

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

II-B-5. File de notifications▲

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));

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));

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

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" });
}

II-B-7. Le calendrier de notification▲

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)));
}

II-B-8. Les notifications distantes▲

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

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▲

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));
    }
}

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

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

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));
    }
}

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 !

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.

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.

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 reçoit 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és 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 parmi 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 :

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écupérer l'identifiant de la tuile via la propriété TileId de l'objet LaunchActivatedEventArgs.

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) :

TileUpdateManager.CreateTileUpdaterForSecondaryTile("secondaryTile1");

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.

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.

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 :

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 un astérisque (la valeur "alert").

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

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

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 adresse.

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.).

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

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.