Modèles de mosaïques spéciaux
Remarque
Les vignettes Vie sont une fonctionnalité Windows 10 qui n’est pas prise en charge sur les versions ultérieures de Windows. Pour les nouvelles applications, nous vous recommandons de suivre les instructions actuelles pour les icônes d’application.
Les modèles de mosaïques spéciales sont des modèles uniques qui sont animés ou vous permettent simplement de faire des choses qui ne sont pas possibles avec les vignettes adaptatives. Chaque modèle de vignette spécial a été spécifiquement créé pour Windows 10, à l’exception du modèle de vignette emblématique, un modèle spécial classique mis à jour pour Windows 10. Cet article couvre trois modèles de vignette spéciaux : Iconique, Photos et Personnes.
Modèle de vignette emblématique
Le modèle emblématique (également appelé modèle « IconWithBadge ») vous permet d’afficher une petite image au centre de la vignette.
Comment créer une vignette emblématique
Les étapes suivantes couvrent tout ce que vous devez savoir pour créer une vignette emblématique pour Windows 10. À un niveau élevé, vous avez besoin de votre ressource d’image emblématique, puis vous envoyez une notification à la vignette à l’aide du modèle emblématique, puis vous envoyez une notification de badge qui fournit le numéro à afficher sur la vignette.
Étape 1 : Créer vos ressources d’image au format PNG
Créez les ressources d’icône pour votre vignette et placez-les dans vos ressources de projet avec vos autres ressources. Au minimum, créez une icône de 200 x 200 pixels, qui fonctionne à la fois pour les vignettes petites et moyennes. Pour offrir la meilleure expérience utilisateur, créez une icône pour chaque taille. Aucun remplissage n’est nécessaire sur ces ressources. Consultez les détails du dimensionnement dans l’image ci-dessous. Windows 10 sur tablette, ordinateur portable et ordinateur de bureau prend uniquement en charge les ressources d’icône carrée.
Enregistrez les ressources d’icône au format PNG et avec transparence.
Étape 2 : Créer votre vignette de base
Vous pouvez utiliser le modèle emblématique sur les vignettes primaires et secondaires. Si vous l’utilisez sur une vignette secondaire, vous devez d’abord créer la vignette secondaire ou utiliser une vignette secondaire déjà épinglée. Les vignettes primaires sont implicitement épinglées et peuvent toujours être envoyées des notifications.
Étape 3 : Envoyer une notification à votre vignette
Bien que cette étape puisse varier selon que la notification est envoyée localement ou via l’envoi push du serveur, la charge utile XML que vous envoyez reste la même. Pour envoyer une notification de vignette locale, créez un TileUpdater pour votre vignette (vignette primaire ou secondaire), puis envoyez une notification à la vignette qui utilise le modèle de vignette emblématique, comme indiqué ci-dessous. Dans l’idéal, vous devez également inclure des liaisons pour des tailles de vignette larges et volumineuses à l’aide de modèles de vignette adaptatifs.
Voici un exemple de code pour la charge utile XML :
<tile>
<visual>
<binding template="TileSquare150x150IconWithBadge">
<image id="1" src="Iconic.png" alt="alt text"/>
</binding>
<binding template="TileSquare71x71IconWithBadge">
<image id="1" src="Iconic.png" alt="alt text"/>
</binding>
</visual>
</tile>
Cette charge utile XML de modèle de vignette emblématique utilise un élément d’image qui pointe vers l’image que vous avez créée à l’étape 1. Votre vignette est maintenant prête à afficher le badge en regard de votre icône ; tout ce qui est laissé est d’envoyer des notifications de badge.
Étape 4 : Envoyer une notification de badge à votre vignette
Comme à l’étape 3, cette étape peut varier selon que la notification est envoyée localement ou par le biais de l’envoi push du serveur, mais la charge utile XML que vous envoyez reste la même. Pour envoyer une notification de badge local, créez un BadgeUpdater pour votre vignette (vignette primaire ou secondaire), puis envoyez une notification de badge avec votre valeur souhaitée (ou désactivez le badge).
Voici un exemple de code pour la charge utile XML :
<badge value="2"/>
Le badge de la vignette est mis à jour en conséquence.
Étape 5 : Mettre tout ensemble
L’image suivante montre comment les différentes API et charges utiles sont associées à chaque aspect du modèle de vignette emblématique. Une notification de vignette (qui contient ces <éléments de liaison> ) est utilisée pour spécifier le modèle emblématique et la ressource d’image ; une notification de badge spécifie la valeur numérique ; les propriétés de vignette contrôlent le nom d’affichage, la couleur et bien plus encore.
Modèle de vignette Photos
Le modèle de vignette photos vous permet d’afficher un diaporama de photos sur votre vignette dynamique. Le modèle est pris en charge sur toutes les tailles de vignette, y compris les petites et se comporte de la même façon sur chaque taille de vignette. L’exemple ci-dessous montre cinq cadres d’une vignette moyenne qui utilise le modèle de photos. Le modèle dispose d’une animation de zoom et de fondu croisé qui passe par les photos et boucles sélectionnées indéfiniment.
Comment utiliser le modèle de photos
L’utilisation du modèle de photos est facile si vous avez installé la bibliothèque notifications. Bien que vous puissiez utiliser du code XML brut, nous vous recommandons vivement d’utiliser la bibliothèque afin que vous n’ayez pas à vous soucier de la génération de contenu XML ou d’échappement XML valide.
Windows affiche jusqu’à 12 photos dans un diaporama.
Pour plus d’informations sur l’envoi de la notification de vignette, consultez l’article Envoyer des notifications.
<!--
To use the Photos template...
- On any adaptive tile binding (like TileMedium or TileWide)
- Set the hint-presentation attribute to "photos"
- Add up to 12 images as children of the binding.
-->
<tile>
<visual>
<binding template="TileMedium" hint-presentation="photos">
<image src="Assets/1.jpg" />
<image src="ms-appdata:///local/Images/2.jpg"/>
<image src="http://msn.com/images/3.jpg"/>
<!--TODO: Can have 12 images total-->
</binding>
<!--TODO: Add bindings for other tile sizes-->
</visual>
</tile>
/*
To use the Photos template...
- On any TileBinding object
- Set Content property to new instance of TileBindingContentPhotos
- Add up to 12 images to Images property of TileBindingContentPhotos.
*/
TileContent content = new TileContent()
{
Visual = new TileVisual()
{
TileMedium = new TileBinding()
{
Content = new TileBindingContentPhotos()
{
Images =
{
new TileBasicImage() { Source = "Assets/1.jpg" },
new TileBasicImage() { Source = "ms-appdata:///local/Images/2.jpg" },
new TileBasicImage() { Source = "http://msn.com/images/3.jpg" }
// TODO: Can have 12 images total
}
}
}
// TODO: Add other tile sizes
}
};
Modèle de vignette Contacts
L’application Contacts dans Windows 10 utilise un modèle de vignette spécial qui affiche une collection d’images dans des cercles qui glissent verticalement ou horizontalement sur la vignette. Ce modèle de vignette a été disponible depuis Windows 10 Build 10572, et tout le monde peut l’utiliser dans son application.
Le modèle de vignette Contacts fonctionne sur les vignettes de ces tailles :
Vignette moyenne (TileMedium)
Vignette large (TileWide)
Grande vignette (bureau uniquement) (TileLarge)
Si vous utilisez la bibliothèque Notifications, vous devez utiliser le modèle de vignette Contacts pour créer un objet TileBindingContentPeople pour votre contenu TileBindingContentPeople. La classe TileBindingContentPeople a une propriété Images où vous ajoutez vos images.
Si vous utilisez du code XML brut, définissez la présentation d’indicateur sur « people » et ajoutez vos images en tant qu’enfants de l’élément de liaison.
L’exemple de code C# suivant suppose que vous utilisez la bibliothèque notifications.
TileContent content = new TileContent()
{
Visual = new TileVisual()
{
TileMedium = new TileBinding()
{
Content = new TileBindingContentPeople()
{
Images =
{
new TileBasicImage() { Source = "Assets/ProfilePics/1.jpg" },
new TileBasicImage() { Source = "Assets/ProfilePics/2.jpg" },
new TileBasicImage() { Source = "Assets/ProfilePics/3.jpg" },
new TileBasicImage() { Source = "Assets/ProfilePics/4.jpg" },
new TileBasicImage() { Source = "Assets/ProfilePics/5.jpg" },
new TileBasicImage() { Source = "Assets/ProfilePics/6.jpg" },
new TileBasicImage() { Source = "Assets/ProfilePics/7.jpg" },
new TileBasicImage() { Source = "Assets/ProfilePics/8.jpg" },
new TileBasicImage() { Source = "Assets/ProfilePics/9.jpg" }
}
}
}
}
};
<tile>
<visual>
<binding template="TileMedium" hint-presentation="people">
<image src="Assets/ProfilePics/1.jpg"/>
<image src="Assets/ProfilePics/2.jpg"/>
<image src="Assets/ProfilePics/3.jpg"/>
<image src="Assets/ProfilePics/4.jpg"/>
<image src="Assets/ProfilePics/5.jpg"/>
<image src="Assets/ProfilePics/6.jpg"/>
<image src="Assets/ProfilePics/7.jpg"/>
<image src="Assets/ProfilePics/8.jpg"/>
<image src="Assets/ProfilePics/9.jpg"/>
</binding>
</visual>
</tile>
Pour une expérience utilisateur optimale, nous vous recommandons de fournir le nombre suivant de photos pour chaque taille de vignette :
- Vignette moyenne : 9 photos
- Vignette large : 15 photos
- Grande vignette : 20 photos
Le fait d’avoir ce nombre de photos permet de quelques cercles vides, ce qui signifie que la vignette ne sera pas trop occupée visuellement. N’hésitez pas à ajuster le nombre de photos pour obtenir l’apparence qui vous convient le mieux.
Pour envoyer la notification, consultez Choisir une méthode de remise de notification.