Épingler les vignettes secondaires au menu Démarrer

  • Article

Cette rubrique vous guide tout au long des étapes pour créer une vignette secondaire pour votre application Windows et l’épingler au menu Démarrer.

Screenshot of secondary tiles

Pour en savoir plus sur les vignettes secondaires, consultez la Vue d’ensemble des vignettes secondaires.

Ajouter un espace de noms

L’espace de noms Windows.UI.StartScreen inclut la classe SecondaryTile.

using Windows.UI.StartScreen;

Initialiser la vignette secondaire

Les vignettes secondaires consistent en plusieurs composants clés...

  • TileId : identificateur unique qui vous permet d’identifier la vignette parmi vos autres vignettes secondaires.
  • DisplayName : nom que vous souhaitez afficher sur la vignette.
  • Arguments : arguments que vous souhaitez renvoyer à votre application lorsque l’utilisateur clique sur votre vignette.
  • Square150x150Logo : logo requis, affiché sur la vignette de taille moyenne (et redimensionné en vignette de petite taille si aucun petit logo n’est fourni).

Vous DEVEZ fournir des valeurs initialisées pour toutes les propriétés ci-dessus, sinon vous obtiendrez une exception.

Vous pouvez utiliser différents constructeurs, mais l’utilisation du constructeur qui prend en charge les composants tileId, displayName, arguments, square150x150Logo et desiredSize vous permet de vous assurer de définir toutes les propriétés requises.

// Construct a unique tile ID, which you will need to use later for updating the tile
string tileId = "City" + zipCode;

// Use a display name you like
string displayName = cityName;

// Provide all the required info in arguments so that when user
// clicks your tile, you can navigate them to the correct content
string arguments = "action=viewCity&zipCode=" + zipCode;

// Initialize the tile with required arguments
SecondaryTile tile = new SecondaryTile(
    tileId,
    displayName,
    arguments,
    new Uri("ms-appx:///Assets/CityTiles/Square150x150Logo.png"),
    TileSize.Default);

Facultatif : ajouter la prise en charge des tailles de vignettes plus grandes

Si vous souhaitez afficher des notifications de vignette enrichies sur votre vignette secondaire, vous souhaiterez probablement autoriser l’utilisateur à redimensionner sa vignette pour qu’elle soit large ou grande, afin qu’il puisse voir encore plus de votre contenu.

Pour activer des tailles de vignettes larges et grandes, vous devez fournir les logos wide310x150Logo et Square310x310Logo. En outre, si possible, vous devez fournir le logo Square71x71Logo pour la petite taille de vignette (sinon, nous allons réduire la taille de votre logo Square150x150Logo requis pour la petite vignette).

Vous pouvez également fournir un logo Square44x44Logo unique, qui est éventuellement affiché dans le coin inférieur droit lorsqu’une notification est présente. Si vous ne le fournissez pas, le logo Square44x44Logo de votre vignette principale sera utilisé à la place.

// Enable wide and large tile sizes
tile.VisualElements.Wide310x150Logo = new Uri("ms-appx:///Assets/CityTiles/Wide310x150Logo.png");
tile.VisualElements.Square310x310Logo = new Uri("ms-appx:///Assets/CityTiles/Square310x310Logo.png");

// Add a small size logo for better looking small tile
tile.VisualElements.Square71x71Logo = new Uri("ms-appx:///Assets/CityTiles/Square71x71Logo.png");

// Add a unique corner logo for the secondary tile
tile.VisualElements.Square44x44Logo = new Uri("ms-appx:///Assets/CityTiles/Square44x44Logo.png");

Facultatif : activer l’affichage du nom d’affichage

Par défaut, le nom d’affichage ne s’affiche PAS. Pour afficher le nom complet sur une vignette moyenne/large/grande, ajoutez le code suivant.

// Show the display name on all sizes
tile.VisualElements.ShowNameOnSquare150x150Logo = true;
tile.VisualElements.ShowNameOnWide310x150Logo = true;
tile.VisualElements.ShowNameOnSquare310x310Logo = true;

Facultatif : vignettes secondaires 3D

Vous pouvez améliorer votre vignette secondaire pour Windows Mixed Reality en ajoutant des éléments multimédias 3D. Les utilisateurs peuvent placer des vignettes 3D directement dans leur accueil Windows Mixed Reality au lieu du menu Démarrer lors de l’utilisation de votre application dans un environnement Mixed Reality. Par exemple, vous pouvez créer des photosphères 360° qui sont directement liées à une application visionneuse de photos à 360°, ou laisser les utilisateurs placer un modèle 3D d’une chaise à partir d’un catalogue de meubles qui ouvre une page de détails sur les options de prix et de couleur de cet objet lorsqu’il est sélectionné. Pour commencer, reportez-vous à la Documentation du développeur sur la réalité mixte.

Épingler la vignette secondaire

Enfin, demandez à épingler la vignette. Notez qu’il faut pour cela appeler à partir d’un thread d’interface utilisateur. Sur le Bureau, une boîte de dialogue s’affiche pour demander à l’utilisateur de confirmer s’il souhaite épingler la vignette.

Important

Si vous êtes une application de bureau utilisant le Pont du bureau, vous devez d’abord effectuer une étape supplémentaire, comme décrit dans Épingler à partir d’applications de bureau

// Pin the tile
bool isPinned = await tile.RequestCreateAsync();

// TODO: Update UI to reflect whether user can now either unpin or pin

Vérifier s’il existe une vignette secondaire

Si votre utilisateur visite une page de votre application qu’il a déjà épinglée au menu Démarrer, vous souhaiterez afficher à la place un bouton « Détacher ».

Par conséquent, lorsque vous choisissez le bouton à afficher, vous devez d’abord vérifier si la vignette secondaire est actuellement épinglée.

// Check if the secondary tile is pinned
bool isPinned = SecondaryTile.Exists(tileId);

// TODO: Update UI to reflect whether user can either unpin or pin

Désépingler une vignette secondaire

Si la vignette est actuellement épinglée et que l’utilisateur clique sur votre bouton « Détacher », vous souhaiterez désépingler (supprimer) la vignette.

// Initialize a secondary tile with the same tile ID you want removed
SecondaryTile toBeDeleted = new SecondaryTile(tileId);

// And then unpin the tile
await toBeDeleted.RequestDeleteAsync();

Mise à jour d’une vignette secondaire

Si vous devez mettre à jour les logos, le nom d’affichage ou tout autre élément de la vignette secondaire, vous pouvez utiliser RequestUpdateAsync.

// Initialize a secondary tile with the same tile ID you want to update
SecondaryTile tile = new SecondaryTile(tileId);

// Assign ALL properties, including ones you aren't changing

// And then update it
await tile.UpdateAsync();

Énumérer toutes les vignettes secondaires épinglées

Si vous avez besoin de connaître toutes les vignettes épinglées par votre utilisateur, au lieu d’utiliser SecondaryTile.Exists, vous pouvez également utiliser SecondaryTile.FindAllAsync().

// Get all secondary tiles
var tiles = await SecondaryTile.FindAllAsync();

Envoyer une notification de vignette

Pour savoir comment afficher du contenu enrichi sur votre vignette via des notifications par vignette, consultez Envoyer une notification par vignette locale.