Menu

A

|

A

Astuce : Tuile a 5 faces (Windows 8.1)

Voici une petite astuce qui peut être intéressante pour les développeurs Windows 8.1 (et par extension sur Windows 8 ça marche aussi). Comment faire pour créer une tuile ayant 5 Templates différents qui défilent et ce dans les trois tailles (carré, rectangle et large).

En fait ce n’est pas si sorcier que ça. Tout d’abord il déterminer les Templates que vous voulez afficher, pour cela vous pouvez les consulter tous les Templates sur MSDN, ce qui vous donnera une bonne vision de ce qu’il est possible de faire avec les tuiles sous Windows 8.1.

Vous avez trouvé de quoi vos tuiles vont être constituées ? Il n’y à plus qu’a la mettre en place.

Pour définir votre tuile dynamique, il faut générer un XML qui décrit ce que vous voulez afficher et les données qui les constituent. Pour cela deux moyen de créer ce XML. La première façon est de récupérer le template d’une tuile avec la fonction statique :

XmlDocument template = Windows.UI.NotificationsTileUpdateManager.GetTemplateContent(TileTemplateType type)

Vous pouvez donc récupérer les templates un par un et les modifier avec les API XML.

La seconde façon de faire est de constituer son XML en mode « texte » classique, de le charger dans une instance XmlDocument. Les deux techniques reviennent au même, donc après c’est une question de point de vue et de façon d’implémenter les choses.

Si l’on veut par exemple avoir 5 templates différents de tuile « wide », il faut créer un XML de cette forme (on peut bien sûr alterner les différents Templates, aucune nécessiter d’avoir 5 fois le même) :

<tile>
    <visual>
        <binding template="TileWideImage" branding="None">
            <image id="1" src="ms-appx:///Assets/Tiles/Tile00.png"/>
        </binding>
    </visual>
</tile>

Cette portion de XML permet de générer une face de notre tuile, elle sera de type « TileWideImage » et utilisera une ressource image qui est contenue dans mon applicatif. Vous remarquez l’attribut « branding » sur l’élément « binding », il permet de ne pas afficher le logo de l’application dans le coin inférieur gauche, il faut donc le mettre à « None » et c’est réglé.

Ceci est donc une des faces de notre tuile dynamique, si on veut donc avoir jusqu’a 5 faces, il faut générer 5 XML de ce type. Mais une fois générer, comment on les affecte ? Voici comment on procède :

// Considérons nos 5 XML correspondant
// aux 5 faces de notre tuile dynamique
XmlDocument tile1 = ... ;
XmlDocument tile2 = ... ;
XmlDocument tile3 = ... ;
XmlDocument tile4 = ... ;
XmlDocument tile5 = ... ;

// Création de l'instance qui permet
// d'affecter notre tuile dynamique
TileUpdater tileUpdater = TileUpdateManager.CreateTileUpdaterForApplication();

// On active le défilement de nos faces
tileUpdater.EnableNotificationQueue(true);

// On transforme nos XML en TileNotification
// qui représente une face convertie dans
// le système de tuile dynamique Windows 8
TileNotification tn1 = new TileNotification(tile1);
TileNotification tn2 = new TileNotification(tile2);
TileNotification tn3 = new TileNotification(tile3);
TileNotification tn4 = new TileNotification(tile4);
TileNotification tn5 = new TileNotification(tile5);

// Ensuite on supprime toutes les définitions
// de face déjà enregistrées pour cette tuile
tileUpdater.Clear();

// Pour finir on ajoute nos nouvelles définitions
tileUpdater.Update(tn1);
tileUpdater.Update(tn2);
tileUpdater.Update(tn3);
tileUpdater.Update(tn4);
tileUpdater.Update(tn5);

Bien sûr j’ai volontairement décomposé toutes les étapes pour bien comprendre ce qu’il se passe. Une fois que vous avez fait toutes ses opérations, votre tuile dynamique est prête et s’exécute sans soucis.

Dans le cas décrit ci-dessus, cela ne crée qu’une tuile dynamique en mode « Wide ». Pour gérer les autres tailles (« square » et « large »), il vous suffit d’ajouter d’autres Templates, Windows 8 fera le tri au moment de l’affichage.

Astuce : Tuile a 5 faces (Windows 8.1)

Voici une petite astuce qui peut être intéressante pour les développeurs Windows 8.1 (et par extension sur Windows 8 ça marche aussi). Comment faire pour créer une tuile ayant 5 Templates différents qui défilent et ce dans les trois tailles (carré, rectangle et large).

En fait ce n’est pas si sorcier que ça. Tout d’abord il déterminer les Templates que vous voulez afficher, pour cela vous pouvez les consulter tous les Templates sur MSDN, ce qui vous donnera une bonne vision de ce qu’il est possible de faire avec les tuiles sous Windows 8.1.

Vous avez trouvé de quoi vos tuiles vont être constituées ? Il n’y à plus qu’a la mettre en place.

Pour définir votre tuile dynamique, il faut générer un XML qui décrit ce que vous voulez afficher et les données qui les constituent. Pour cela deux moyen de créer ce XML. La première façon est de récupérer le template d’une tuile avec la fonction statique :

XmlDocument template = Windows.UI.NotificationsTileUpdateManager.GetTemplateContent(TileTemplateType type)

Vous pouvez donc récupérer les templates un par un et les modifier avec les API XML.

La seconde façon de faire est de constituer son XML en mode « texte » classique, de le charger dans une instance XmlDocument. Les deux techniques reviennent au même, donc après c’est une question de point de vue et de façon d’implémenter les choses.

Si l’on veut par exemple avoir 5 templates différents de tuile « wide », il faut créer un XML de cette forme (on peut bien sûr alterner les différents Templates, aucune nécessiter d’avoir 5 fois le même) :

<tile>
    <visual>
        <binding template="TileWideImage" branding="None">
            <image id="1" src="ms-appx:///Assets/Tiles/Tile00.png"/>
        </binding>
    </visual>
</tile>

Cette portion de XML permet de générer une face de notre tuile, elle sera de type « TileWideImage » et utilisera une ressource image qui est contenue dans mon applicatif. Vous remarquez l’attribut « branding » sur l’élément « binding », il permet de ne pas afficher le logo de l’application dans le coin inférieur gauche, il faut donc le mettre à « None » et c’est réglé.

Ceci est donc une des faces de notre tuile dynamique, si on veut donc avoir jusqu’a 5 faces, il faut générer 5 XML de ce type. Mais une fois générer, comment on les affecte ? Voici comment on procède :

// Considérons nos 5 XML correspondant
// aux 5 faces de notre tuile dynamique
XmlDocument tile1 = ... ;
XmlDocument tile2 = ... ;
XmlDocument tile3 = ... ;
XmlDocument tile4 = ... ;
XmlDocument tile5 = ... ;

// Création de l'instance qui permet
// d'affecter notre tuile dynamique
TileUpdater tileUpdater = TileUpdateManager.CreateTileUpdaterForApplication();

// On active le défilement de nos faces
tileUpdater.EnableNotificationQueue(true);

// On transforme nos XML en TileNotification
// qui représente une face convertie dans
// le système de tuile dynamique Windows 8
TileNotification tn1 = new TileNotification(tile1);
TileNotification tn2 = new TileNotification(tile2);
TileNotification tn3 = new TileNotification(tile3);
TileNotification tn4 = new TileNotification(tile4);
TileNotification tn5 = new TileNotification(tile5);

// Ensuite on supprime toutes les définitions
// de face déjà enregistrées pour cette tuile
tileUpdater.Clear();

// Pour finir on ajoute nos nouvelles définitions
tileUpdater.Update(tn1);
tileUpdater.Update(tn2);
tileUpdater.Update(tn3);
tileUpdater.Update(tn4);
tileUpdater.Update(tn5);

Bien sûr j’ai volontairement décomposé toutes les étapes pour bien comprendre ce qu’il se passe. Une fois que vous avez fait toutes ses opérations, votre tuile dynamique est prête et s’exécute sans soucis.

Dans le cas décrit ci-dessus, cela ne crée qu’une tuile dynamique en mode « Wide ». Pour gérer les autres tailles (« square » et « large »), il vous suffit d’ajouter d’autres Templates, Windows 8 fera le tri au moment de l’affichage.

No Comments

Comments Are Closed