Développement Windows 10 - Live Tiles
Dans ce chapitre, nous parlerons de l'interaction avec un utilisateur à travers des tuiles. C'est la partie emblématique de Windows 10. Des tuiles sont affichées sur leStart Screen ainsi que sur le Start Menu. En d'autres termes, il s'agit d'un actif d'icône d'application, qui apparaît sous diverses formes dans le système d'exploitation Windows 10. Ce sont les cartes de visite de votre application Universal Windows Platform (UWP).
Anatomie de la tuile
Il existe trois états de tuile.
Basic State - Les composants de base d'une vignette de démarrage se composent d'une plaque arrière, d'une icône et d'un titre d'application.
![](https://assets.edu.lat/windows10_development/images/basic_state.jpg)
Semi-Live state - C'est la même chose que la tuile de base à la seule différence que le badge, qui est un nombre, peut afficher les nombres de 0 à 99.
![](https://assets.edu.lat/windows10_development/images/semi_live_state.jpg)
Live State - Cette tuile contient tous les éléments de la tuile d'état semi-live et montre également une plaque de contenu supplémentaire où vous pouvez mettre tout ce que vous voulez, comme des photos, du texte, etc.
Mettre à jour les tuiles
Il existe quatre façons de mettre à jour les tuiles.
Scheduled - Vous pouvez définir le modèle et l'heure avec ScheduledTileNotification.
Periodic- Lorsque des informations sont récupérées à partir d'un URI et que vous pouvez spécifier l'heure de l'extraction des informations après cette période de temps, par exemple 30 min, 1 h, 6 h. etc.
Local- Un local peut être mis à jour à partir de votre application; soit à partir du premier plan ou de l'application d'arrière-plan.
Push - Il est mis à jour depuis le serveur en poussant les informations du serveur.
Pour créer une vignette, suivez le code donné.
var tileXml =
TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquare150x150Text01);
var tileAttributes = tileXml.GetElementsByTagName("text");
tileAttributes[0].AppendChild(tileXml.CreateTextNode("Hello"));
var tileNotification = new TileNotification(tileXml);
TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);
Update badge est assez simple car il ne s'agit que d'un nombre et vous pouvez définir la valeur du badge comme indiqué ci-dessous.
var type = BadgeTemplateType.BadgeNumber;
var xml = BadgeUpdateManager.GetTemplateContent(type);
var elements = xml.GetElementsByTagName("badge");
var element = elements[0] as Windows.Data.Xml.Dom.XmlElement;
element.SetAttribute("value", "7");
var updator = BadgeUpdateManager.CreateBadgeUpdaterForApplication();
var notification = new BadgeNotification(xml);
updator.Update(notification);
Créons un nouveau projet UWP dans Visual Studio.
Vous verrez les différents fichiers png sous le Assets dossier dans Solution Explorer.
![](https://assets.edu.lat/windows10_development/images/assets_folder.jpg)
Définissons une tuile par défaut et son image dans le manifeste du package.
Double-cliquez sur le package.appxmanifest. Cela ouvre la fenêtre de l'éditeur de manifeste.
Sélectionner Visual Assets languette.
![](https://assets.edu.lat/windows10_development/images/visual_assets.jpg)
Vous pouvez sélectionner les images et les icônes de la vignette de votre application avec l'une des dimensions spécifiées. Sous leTile Images and Logos, des images par défaut sont fournies pour tous les logos tels que
- Logo carré 71x71
- Logo carré 150x150
- Logo carré 310x310
- Logo du magasin
Lorsque vous exécutez votre application, puis accédez à votre écran de démarrage, vous verrez la vignette de votre application.
![](https://assets.edu.lat/windows10_development/images/execute_your_application.jpg)