Comment personnaliser les vignettes de l’écran d’accueil pour les applications de bureau (applications Windows Runtime)

Article
12/11/2015

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Depuis Windows 8.1, les développeurs d’applications Win32 peuvent personnaliser l’aspect de la vignette d’une application de bureau sur l’écran d’accueil. Dans Windows 8, ces vignettes n’étaient fournies que par le système, sans possibilité de personnalisation par le développeur. L’icône de l’application était affichée dans une vignette dont la couleur dépendait de la couleur d’arrière-plan de l’écran d’accueil. Windows 8.1 propose une apparence de vignette par défaut plus variée, mais vous permet également de personnaliser davantage votre vignette avec vos propres couleurs et images.

Les personnalisations disponibles pour la vignette de votre application de bureau sont les suivantes :

des images personnalisées pleine page ;
une couleur d’arrière-plan spécifiée ;
la possibilité d’afficher ou de masquer le nom de l’application sur la vignette ;
une couleur de texte claire ou foncée spécifiée si vous choisissez d’afficher le nom de l’application.

Vous pouvez personnaliser entièrement une vignette, mais vous devez également avoir connaissance des modifications apportées à l’apparence de vignette par défaut, qui peut vous suffire. La vignette par défaut que Windows affecte à votre application est toujours une vignette de taille moyenne qui affiche le nom et l’icône de l’application. Toutefois, depuis Windows 8.1, la disposition a été modifiée et Windows extrait une couleur de l’icône de l’application pour entourer cette icône d’une couleur d’arrière-plan semblable ou complémentaire.

L’image suivante montre l’apparence que des vignettes par défaut identiques ont dans Windows 8 et Windows 8.1, avec la même couleur d’arrière-plan de l’écran d’accueil.

Vignettes Microsoft Office affichées pour Windows 8 et Windows 8.1

Si vous souhaitez personnaliser davantage votre vignette, vous pouvez le faire en utilisant un fichier XML spécifique. Le schéma utilisé par ce fichier est semblable au schéma de vignette utilisé pour les vignettes des applications du Windows Store, mais ne les confondez pas : elles ne sont pas interchangeables. Cette rubrique vous explique comment créer l’exemple de fichier suivant, où tous les attributs sont obligatoires à l’exception des attributs Square150x150Logo et Square70x70Logo qui sont facultatifs.


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements
        BackgroundColor="#FF0000"
        ShowNameOnSquare150x150Logo="on"
        ForegroundText="light"
        Square150x150Logo="Assets\150x150Logo.png"
        Square70x70Logo="Assets\70x70Logo.png"/>
</Application>

Prérequis

Compréhension du code XML
Compréhension des paramètres de ligne de commande
Compréhension de l’empaquetage des ressources et de l’attribution des noms de ressources pour les versions d’images mises à l’échelle, à contraste élevé et localisées. Pour plus d’informations, voir Comment nommer des ressources à l’aide de qualificateurs.

Instructions

Étape 1: Créer un fichier XML de personnalisation

Spécifiez les personnalisations de votre vignette.
Placez le fichier XML dans le même répertoire que votre fichier exécutable.
Donnez-lui le même nom que celui du fichier exécutable, avec l’extension « .VisualElementsManifest.xml ». Par exemple, pour le fichier exécutable « contoso.exe », le fichier XML associé s’appellera « contoso.visualelementsmanifest.xml ».

Ajoutez le code suivant dans le nouveau fichier XML.


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements/>
</Application>

Étape 2: Déclarer une couleur d’arrière-plan

Obligatoire
Indiquez une valeur hexadécimale RVB ou l’une de ces chaînes prédéfinies :
- black (noir)
- silver (argent)
- gray (gris)
- white (blanc)
- maroon (marron)
- red (rouge)
- purple (violet)
- fuchsia (magenta)
- green (vert)
- lime (citron vert)
- olive
- yellow (jaune)
- navy (bleu foncé)
- blue (bleu)
- teal (bleu-vert)
- aqua (cyan)

Les exemples ci-dessous montrent les deux façons d’exprimer la valeur de la couleur :


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements
        BackgroundColor="#FF0000"/>
</Application>


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements
        BackgroundColor="red"/>
</Application>

Étape 3: Indiquer si le nom de l’application doit être affiché sur la vignette

Obligatoire
L’attribut ShowNameOnSquare150x150Logo accepte deux valeurs :
- « on » pour afficher le nom
- « off » pour masquer le nom
Le nom de l’application ne peut s’afficher que dans une taille de vignette moyenne (150 x 150).

Le nom de l’application correspond au nom du fichier de raccourci du menu Démarrer de l’application, ou au nom du fichier exécutable associé en l’absence de fichier de raccourci.


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements
        BackgroundColor="#FF0000"
        ShowNameOnSquare150x150Logo="on"/>
</Application>

Étape 4: Déclarer une couleur de texte de premier plan

Obligatoire, même si ShowNameOnSquare150x150Logo a la valeur « off ».
Fait référence au nom de l’application sur la vignette.
L’attribut ForegroundText accepte deux valeurs :
- « light » pour du texte blanc
- « dark » pour du texte noir

Choisissez une valeur qui se distingue bien par rapport à la couleur d’arrière-plan que vous avez déclarée. Pour une visibilité et une accessibilité optimales, indiquez un rapport d’au moins 4,5 pour 1 entre la luminance de la couleur du texte et celle de la couleur d’arrière-plan. Pour plus d’informations, voir la norme d’accessibilité W3C intitulée G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text.


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements
        BackgroundColor="#FF0000"
        ShowNameOnSquare150x150Logo="on"
        ForegroundText="light"/>
</Application>

Étape 5: Spécifier les images

Facultatif
Fournissez les images pleine page à utiliser à la place de l’icône et l’arrière-plan par défaut.
Seules les tailles de vignette moyenne (150 x 150) et petite (70 x 70) sont prises en charge.
Les restrictions des images de vignette standard s’appliquent :
- Dimensions inférieures ou égales à 1024 x 1024
- Taille de fichier inférieure ou égale à 200 Ko
- Type de fichier .png, .jpg, .jpeg ou .gif

Important Si vous optez pour une image personnalisée, vous devez spécifier une image à la fois pour les attributs Square150x150Logo et Square70x70Logo. Si vous ne spécifiez que l’un de ces attributs, l’ensemble de ce fichier XML est ignoré, et le style par défaut (icône et arrière-plan de l’application) est appliqué à la vignette.

Les meilleures pratiques en matière de conception de vignettes précisent que si votre vignette n’est pas une vignette dynamique, elle ne doit pas réclamer l’espace supplémentaire requis à l’écran pour des vignettes de taille très large (310x150) et large (310x310). La vignette d’une application de bureau étant toujours statique et jamais dynamique, ces tailles de vignette supplémentaires ne sont pas prises en charge dans ce schéma.

Dans cet exemple, les images se trouvent dans un dossier nommé « Assets », frère du fichier YourAppName.VisualElementsManifest.xml. Ces noms de fichiers peuvent être les noms réels ou les noms génériques utilisés pour les fichiers mis à l’échelle, à contraste élevé ou localisés décrits à l’étape 6. Pour plus d’informations sur l’attribution de noms aux ressources d’images, voir la section Remarques.


<Application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <VisualElements
        BackgroundColor="#FF0000"
        ShowNameOnSquare150x150Logo="on"
        ForegroundText="light"
        Square150x150Logo="Assets\150x150Logo.png"
        Square70x70Logo="Assets\70x70Logo.png"/>
</Application>

Voici comment se présente votre fichier .VisualElementsManifest.xml complet. Ajoutez ce fichier à l’installation de votre application en tant que fichier frère du fichier exécutable associé.

Étape 6: Spécifier des images mises à l’échelle, localisées et à contraste élevé

Facultatif, mais recommandé
Si vous ne fournissez pas d’images mises à l’échelle, à contraste élevé ou localisées, vous pouvez ignorer cette étape.
Pour une qualité d’affichage maximale, fournissez un ensemble complet de ressources ajustées pour chaque image spécifiée à l’étape 5. Pour plus d’informations, voir la section Remarques.
Utilisez les conventions de noms du système de gestion des ressources normales et le fichier Resource.pri

Remarque Si vous ne fournissez pas d’ensemble complet de ressources ajustées, Windows ajuste la ou les ressources que vous incluez, si nécessaire. Il est préférable d’inclure l’une des plus grandes tailles (140 % ou 180 %), car une réduction de l’échelle donne normalement de meilleurs résultats qu’une augmentation de l’échelle.

Sur la base des paramètres système actifs au moment de la mise à jour de la vignette, Windows utilise un fichier Resources.pri pour sélectionner la ressource d’image appropriée dans votre ensemble. Nous allons créer ce fichier lors de cette étape.

Créez un dossier de travail. Ce dossier n’est pas inclus dans l’installation de votre application : il est uniquement utilisé pendant la création du fichier Resources.pri. Dans cet exemple, il s’agit du dossier « CreateResources ».
```
md %USERPROFILE%\Documents\CreateResources
```
Créez un sous-répertoire de CreateResources pour contenir vos fichiers image. Dans cet exemple, ce sous-répertoire s’appelle « Assets ».
```
md %USERPROFILE%\Documents\CreateResources\Assets
```
Placez vos images mises à l’échelle, à contraste élevé et/ou localisées dans le dossier « Assets ». Vous pouvez inclure vos images sous la forme d’une simple liste ou structurées en sous-répertoires, tant que vous suivez les conventions d’affectation des noms et de structure requises. Pour cet exemple, nous fournissons les ressources mises à l’échelle et à contraste élevé suivantes, sous forme de liste simple :
- 150x150Logo.scale-80.png
- 150x150Logo.scale-100.png
- 150x150Logo.scale-140.png
- 150x150Logo.scale-180.png
- 70x70Logo.scale-80.png
- 70x70Logo.scale-100.png
- 70x70Logo.scale-140.png
- 70x70Logo.scale-180.png
- 150x150Logo.scale-80_contrast-white.png
- 150x150Logo.scale-100_contrast-white.png
- 150x150Logo.scale-140_contrast-white.png
- 150x150Logo.scale-180_contrast-white.png
- 150x150Logo.scale-80_contrast-black.png
- 150x150Logo.scale-100_contrast-black.png
- 150x150Logo.scale-140_contrast-black.png
- 150x150Logo.scale-180_contrast-black.png
- 70x70Logo.scale-80_contrast-white.png
- 70x70Logo.scale-100_contrast-white.png
- 70x70Logo.scale-140_contrast-white.png
- 70x70Logo.scale-180_contrast-white.png
- 70x70Logo.scale-80_contrast-black.png
- 70x70Logo.scale-100_contrast-black.png
- 70x70Logo.scale-140_contrast-black.png
- 70x70Logo.scale-180_contrast-black.png

Créez un fichier de configuration MakePRI. Il s’agit d’un fichier XML utilisé par MakePRI.exe pour indiquer les images qui sont indexées dans Resources.pri. Exécutez la commande suivante pour créer le fichier de configuration, appelé "TestAppConfig.xml" dans notre exemple. Notez que nous ne plaçons pas ce fichier dans notre dossier CreateResources pour éviter que le fichier de configuration ne soit inclus dans l’index.

Important L’outil en ligne de commande MakePRI.exe est inclus dans le Kit de développement logiciel (SDK) Windows, téléchargeable gratuitement. Si vous utilisez Microsoft Visual Studio, votre installation système contient probablement déjà MakePRI.exe.

Cette commande et la suivante supposent que l’emplacement de MakePRI.exe se trouve dans votre chemin d’accès. Si ce n’est pas le cas, recherchez-le dans « Program Files\Windows Kits » et ajoutez son chemin complet dans ces commandes.


makepri createconfig /cf %USERPROFILE%\Documents\TestAppConfig.xml /dq lang-en-US_scale-100_contrast-high

Argument de commande	Définition
/cf	Chemin d’accès et nom du fichier de configuration en cours de création
/dq	Qualificateur(s) par défaut. Au moins un qualificateur (lang, scale, etc.) est requis.

Créez le fichier Resources.pri. Exécutez la commande suivante, qui utilise le fichier de configuration TestAppConfig.xml que vous venez de créer pour produire un fichier Resources.pri dans le répertoire CreateResources.


makepri new /pr %USERPROFILE%\Documents\CreateResources /cf %USERPROFILE%\Documents\TestAppConfig.xml /in TestApp /of %USERPROFILE%\Documents\CreateResources\Resources.pri

Argument de commande	Définition
/pr	Emplacement racine des fichiers projet
/cf	Chemin d’accès du fichier de configuration XML
/in	Nom de l’index des ressources dans le fichier Resources.pri. Il correspond généralement au nom de l’application.
/of	Emplacement de sortie du fichier Resources.pri. S’il est omis, l’emplacement utilisé correspond à la racine du projet spécifiée avec l’argument /pr.

Incluez le fichier Resources.pri dans l’installation de votre application. Placez-le dans le même répertoire que le fichier .exe de l’application et son fichier .VisualElementsManifest.xml. Pendant l’installation, mettez en place le fichier .VisualElementsManifest.xml avant d’installer le fichier de raccourci de l’application.

Étape 7: Important : Actualiser votre fichier de raccourci

Si votre application est déjà installée, vous devez déplacer votre raccourci une fois le fichier .VisualElementsManifest.xml nouveau ou mis à jour en place, sans quoi il sera ignoré. L’exemple de commande Windows PowerShell suivant pour l’application fictive Contoso est un modèle montrant comment effectuer cette opération. Il existe cependant de nombreuses façons de le faire.


(ls "$env:programdata\microsoft\windows\start menu\programs\contoso.lnk").lastwritetime = get-date

Remarques

Important Si un problème se pose avec votre fichier .VisualElementsManifest.xml, la vignette par défaut fournie par Windows est rétablie. Les problèmes potentiels liés à ce fichier sont notamment un fichier XML non valide, l’omission d’attributs obligatoires, des valeurs d’attribut non valides ou des images qui ne peuvent pas être localisées.

Vous pouvez utiliser le fichier MakePRI.exe avec l’option de commande dump pour examiner le contenu du fichier Resources.pri. Cela peut être utile pour la résolution des problèmes. Pour plus d’informations sur l’outil MakePRI.exe, voir Configuration de MakePRI.exe et Options de commande de MakePRI.exe.

Pendant la résolution des problèmes, vous pouvez également rechercher l’événement 28032 dans l’Observateur d’événements dans le journal Journaux des applications et des services\Microsoft\Windows\Shell-Core\Operational. Les données de détail de l’événement incluent le chemin d’accès du fichier .VisualElementsManifest.xml, le code d’erreur HRESULT et une chaîne d’erreur, le cas échéant.

Utilisation du système de gestion des ressources

Cette rubrique n’a pas pour objet de présenter en détail le système de gestion des ressources, mais elle offre une vue d’ensemble du système. Pour obtenir des informations détaillées, voir les rubriques Système de gestion des ressources.

Un ensemble complet de ressources d’images comporte les éléments suivants :

une image distincte pour chaque plateau de mise à l’échelle PPP (80 %, 100 %, 140 % et 180 %) ;
des versions à contraste élevé (blanc sur noir et noir sur blanc) de chaque image ;
des images localisées (si vous voulez que votre vignette utilise une autre image en fonction de la langue du système, comme lorsque votre image contient du texte).

Vous pouvez fournir l’ensemble de ces images ou seulement certaines d’entre elles.

Vos noms de fichier suivront le modèle name.scale-100.ext, name.scale-100_contrast-black.ext, etc. Vous pouvez aussi fournir des qualificateurs par le biais d’une structure de répertoires plutôt que dans le nom de fichier, mais, dans votre fichier .VisualElementsManifest.xml, vous faites uniquement référence au name racine du fichier. Par exemple, pour la taille de vignette moyenne, vous fournissez ces fichiers :

70x70Logo.scale-80.png
70x70Logo.scale-100.png
70x70Logo.scale-140.png
70x70Logo.scale-180.png
70x70Logo.scale-80_contrast-white.png
70x70Logo.scale-100_contrast-white.png
70x70Logo.scale-140_contrast-white.png
70x70Logo.scale-180_contrast-white.png
70x70Logo.scale-80_contrast-black.png
70x70Logo.scale-100_contrast-black.png
70x70Logo.scale-140_contrast-black.png
70x70Logo.scale-180_contrast-black.png

Toutefois, dans votre fichier .VisualElementsManifest.xml, vous faites uniquement référence à « 70x70Logo.png », comme dans notre exemple. Sur la base des paramètres système actuels, Windows utilise le fichier Resources.pri pour sélectionner la version appropriée du fichier 70x70Logo parmi toutes les options répertoriées. Pour obtenir un didacticiel complet sur les conventions de noms qui permettent à ce système de fonctionner, voir Démarrage rapide : utilisation de ressources de fichiers ou d’images.

Code XSD pour la personnalisation des vignettes pour applications de bureau

Le code XSD correspondant au schéma utilisé dans la personnalisation de vignettes pour applications de bureau est présenté ci-dessous.


<xs:schema attributeFormDefault="unqualified" elementFormDefault="qualified"  
           xmlns:xs="http://www.w3.org/2001/XMLSchema">  
  
    <xs:simpleType name="st_nonemptystring">  
        <xs:restriction base="xs:string">  
            <xs:minLength value="1"/>  
            <xs:maxLength value="32767"/>  
            <xs:pattern value="[^\s]|([^\s].*[^\s])"/>  
        </xs:restriction>  
    </xs:simpleType>  
    
    <xs:simpleType name="st_filenamecharset">  
        <xs:restriction base="st_nonemptystring">  
            <xs:pattern value=&quot;[^&lt;&gt;&quot;:%\|\?\*]+&quot;/>  
        </xs:restriction>  
    </xs:simpleType>  
  
    <xs:simpleType name="st_filename">  
        <xs:restriction base="st_filenamecharset">  
            <xs:pattern value="([^/\\]*[^./\\]+)(\\[^/\\]*[^./\\]+)*"/>  
            <xs:pattern value="([^/\\]*[^./\\]+)(/[^/\\]*[^./\\]+)*"/>  
            <xs:maxLength value="256"/>  
        </xs:restriction>  
    </xs:simpleType>  
  
    <xs:simpleType name="st_imagefile">  
        <xs:restriction base="st_filename">  
            <xs:pattern value=".+\.((jpg)|(png)|(jpeg)|(gif))"/>  
        </xs:restriction>  
    </xs:simpleType>  
  
    <xs:simpleType name="st_color">  
        <xs:restriction base="xs:string">  
            <xs:pattern value="#[\da-fA-F]{6}"/>  
            <xs:pattern value="black|silver|gray|white|maroon|red|purple|fuchsia|green|lime|olive|yellow|navy|blue|teal|aqua"/>  
        </xs:restriction>  
    </xs:simpleType>  
  
    <xs:simpleType name="st_foregroundtext">  
        <xs:restriction base="xs:string">  
            <xs:enumeration value="light"/>  
            <xs:enumeration value="dark"/>  
        </xs:restriction>  
    </xs:simpleType>  

    <xs:simpleType name="st_showname">
        <xs:restriction base="xs:string">
            <xs:enumeration value="on"/>
            <xs:enumeration value="off"/>
        </xs:restriction>
    </xs:simpleType>
  
    <xs:complexType name="ct_visualelements">
        <xs:attribute name="Square150x150Logo" type="st_imagefile" use="optional"/>  
        <xs:attribute name="Square70x70Logo" type="st_imagefile" use="optional"/>
        <xs:attribute name="ForegroundText" type="st_foregroundtext" use="required"/>  
        <xs:attribute name="BackgroundColor" type="st_color" use="required"/>
        <xs:attribute name="ShowNameOnSquare150x150Logo" type="st_showname" use="required"/>  
    </xs:complexType>  
  
    <xs:complexType name="ct_application">  
        <xs:all>  
            <xs:element name="VisualElements" type="ct_visualelements" />  
        </xs:all>  
    </xs:complexType>  
  
    <xs:element name="Application" type="ct_application" />  
  
</xs:schema>