Vignettes pour applications Windows

Une vignette est la représentation d'une application dans le menu Démarrer. Chaque application dispose d’une vignette. Lorsque vous créez un projet d’application Windows dans Microsoft Visual Studio, une vignette par défaut est incluse, présentant le nom et le logo de l’application. Windows affiche cette vignette lorsque votre application est installée pour la première fois. Une fois votre application installée, vous pouvez modifier le contenu de votre vignette avec des notifications. Par exemple, vous pouvez modifier la vignette pour communiquer de nouvelles informations à l’utilisateur, telles que les titres d’actualités ou l’objet du dernier message non lu.

Configurer la vignette par défaut

Lorsque vous créez un projet dans Visual Studio, ce dernier crée une vignette par défaut simple qui affiche le nom et le logo de votre application.

Pour modifier votre vignette, double-cliquez sur le fichier Package.appxmanifest dans votre projet UWP principal pour ouvrir le concepteur (ou cliquez avec le bouton droit sur le fichier et sélectionnez Afficher le code).

  <Applications>
    <Application Id="App"
      Executable="$targetnametoken$.exe"
      EntryPoint="ExampleApp.App">
      <uap:VisualElements
        DisplayName="ExampleApp"
        Square150x150Logo="Assets\Square150x150Logo.png"
        Square44x44Logo="Assets\Square44x44Logo.png"
        Description="ExampleApp"
        BackgroundColor="#464646">
        <uap:SplashScreen Image="Assets\SplashScreen.png" />
      </uap:VisualElements>
    </Application>
  </Applications>

Vous devez mettre à jour quelques éléments :

• DisplayName : remplacez cette valeur par le nom que vous souhaitez afficher sur votre vignette.

• ShortName : étant donné qu’il existe une place limitée pour que votre nom d’affichage s’adapte aux vignettes, nous vous recommandons également de spécifier un ShortName pour vous assurer que le nom de votre application ne soit pas tronqué.

• Images de logo :

  Vous devez remplacer ces images par vos propres images. Vous avez la possibilité de fournir des images pour différentes échelles visuelles, mais vous n’êtes pas obligé de toutes les fournir. Pour vous assurer que le rendu de votre application est correct sur plusieurs appareils, nous vous recommandons de fournir 100 %, 200 % et 400 % de versions d’échelle de chaque image. Pour en savoir plus sur la génération de ces ressources, consultez Icônes et logos d’application.

  Les images mises à l’échelle suivent cette convention de nommage :

  <image name>.scale-<scale factor>.<image file extension>

  Par exemple : SplashScreen.scale-100.png

  Lorsque vous faites référence à l’image, vous l’appelez ainsi : <image name>.<image file extension> (« SplashScreen.png » dans cet exemple). Le système sélectionne automatiquement l’image mise à l’échelle appropriée pour l’appareil à partir des images que vous avez fournies.

• Ce n’est pas obligatoire, mais nous vous recommandons vivement de fournir des logos pour des tailles de vignette larges et volumineuses afin que l’utilisateur puisse redimensionner la vignette de votre application à ces tailles. Pour fournir ces images supplémentaires, vous créez un élément DefaultTile et utilisez les attributs Wide310x150Logo et Square310x310Logo pour spécifier les images supplémentaires :

  <Applications>
        <Application Id="App"
          Executable="$targetnametoken$.exe"
          EntryPoint="ExampleApp.App">
          <uap:VisualElements
            DisplayName="ExampleApp"
            Square150x150Logo="Assets\Square150x150Logo.png"
            Square44x44Logo="Assets\Square44x44Logo.png"
            Description="ExampleApp"
            BackgroundColor="#464646">
            <uap:DefaultTile
              Wide310x150Logo="Assets\Wide310x150Logo.png"
              Square310x310Logo="Assets\Square310x310Logo.png">
            </uap:DefaultTile>
            <uap:SplashScreen Image="Assets\SplashScreen.png" />
          </uap:VisualElements>
        </Application>
      </Applications>

Utiliser des notifications pour personnaliser votre vignette

Une fois votre application installée, vous pouvez utiliser des notifications pour personnaliser votre vignette. Vous pouvez le faire lors du premier lancement de l’application ou en réponse à un événement, tel qu’une notification Push.

Pour savoir comment envoyer des notifications par vignette, consultez Envoyer une notification par vignette locale.