Démarrage rapide : utilisation de ressources de fichiers ou d’images (HTML
[ Cet article est destiné aux développeurs 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 ]
Vous pouvez ajouter des images et d’autres ressources de fichiers à votre application, et faire référence à ces fichiers à partir de votre application. La prise en charge de la sélection des images en fonction des paramètres de contraste élevé ou d’échelle d’affichage est intégrée dans Windows Runtime. Pour en bénéficier, vous devez suivre les instructions ci-dessous pour attribuer un nom à vos ressources de fichiers et pour les regrouper dans des dossiers.
Instructions
Créez des images sur mesure ou d’autres ressources de fichiers pour des configurations d’affichage (ppp) et des paramètres de contraste différents.
Créez vos images en adoptant plusieurs tailles recommandées, afin de vous assurer que votre application garde son aspect esthétique lorsque Windows charge la ressource appropriée. Voir Recommandations en matière de mise à l’échelle d’après la densité en pixels.
Créez plusieurs copies de chaque image :
- Taille d’origine utilisée pour un appareil doté d’une résolution 96 ppp standard. Nommez ce fichier name**.scale-100.**ext. (Pour cette instruction et celles qui suivent, l’élément name correspond à l’espace réservé de votre nom de ressource choisi et ext est l’extension spécifique du type de fichier. L’élément .scale-100 correspond au segment du nom de ressource qui détermine le comportement de mise à l’échelle adopté par Windows Runtime. Il s’agit de la partie du nom pour laquelle vous devez utiliser les conventions documentées ici.)
- 140 % de la taille d’origine. Par exemple, une image 100x100 px doit également avoir une version 140x140 px. Nommez ce fichier name**.scale-140.**ext.
- 180 % de la taille d’origine. Par exemple, une image 100x100 px doit également avoir une version 180x180 px. Nommez ce fichier name**.scale-180.**ext.
- 240 % de la taille d’origine, pour les applications Windows Phone. Par exemple, une image 100x100 px doit également avoir une version 240x240 px. Nommez ce fichier name**.scale-240.**ext.
- Image à contraste élevé avec un arrière-plan noir et un premier plan blanc, à la taille d’origine. Nommez ce fichier name**scale-100_contrast-black.**ext.
- Image à contraste élevé avec un arrière-plan blanc et un premier plan noir, à la taille d’origine. Nommez ce fichier name**scale-100_contrast-white.**ext.
Remarque Les images du logo d’application utilisent également les ressources qui sont spécifiées dans le fichier manifeste de l’application. Si vous utilisez une image spécifique pour le logo de l’application, vous devez en créer une copie dont la taille correspond à 80 % de la taille d’origine. Par exemple, une image de logo 100x100 px doit également avoir une version 80x80 px. Nommez ce fichier name**.scale-80.**ext. Pour en savoir plus, voir Choix des images de votre application et Ressources visuelles associées aux toasts et aux vignettes.
Placez toutes les images dans le même dossier dans la structure de votre application. Par exemple :
- images/logo.scale-100.png
- images/logo.scale-140.png
- images/logo.scale-180.png
- images/logo.scale-240.png
- images/logo.scale-80.png
- images/logo.scale-100_contrast-black.png
- images/logo.scale-100_contrast-white.png
faites référence aux images en HTML, sans les qualificateurs.
Utilisez le formulaire name.ext lorsque vous faites référence à cette ressource de fichier à partir du balisage (vous oubliez volontairement le segment qui spécifie l’échelle ou le contraste : Windows Runtime l’ajoute en interne lorsqu’il récupère la ressource appropriée.) Par exemple :
<img src="images/logo.png" />faites référence aux images dans le code, sans les qualificateurs.
Utilisez le formulaire name.ext lorsque vous faites référence à cette ressource de fichier à partir du code (vous oubliez volontairement le segment qui spécifie l’échelle ou le contraste : Windows Runtime l’ajoute en interne lorsqu’il récupère la ressource appropriée.) Il existe une différence avec les instructions de balisage ci-dessus : le balisage peut déduire le schéma ainsi qu’une racine, en raison de contexte du fichier de balisage. Cependant, le code ne peut pas déduire ces éléments ; les parties d’un URI correspondant au schéma et à la racine sont requises pour le code lorsque vous créez un élément Uri. Par exemple :
var uri = new Windows.Foundation.Uri('ms-appx:///images/logo.png'); var file = Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri);pour un fichier de logo, faites référence à l’image dans le manifeste, sans les qualificateurs.
Ouvrez le fichier Package.appxmanifest dans Microsoft Visual Studio. Cliquez sur l’onglet Ressources visuelles.
Modifiez la référence du manifeste afin de faire référence au fichier de ressources. Celui-ci s’affiche sous la forme d’un champ d’édition de texte par défaut ; lorsque vous spécifiez le nom de fichier de ressources, omettez le segment du qualificateur. Par exemple, il existe un champ pour Logo carré 150x150 dans lequel la valeur peut être la suivante :
images\logo.png
Ressources de fichiers et globalisation
Les instructions fournies dans cette rubrique ciblent les qualificateurs de ressources qui permettent la prise en charge du contraste et de la mise à l’échelle. Elles utilisent la convention selon laquelle le qualificateur est inclus dans le nom du fichier. Certaines images ou d’autres fichiers seront peut-être à localiser pour des raisons autres que la prise en charge du contraste et de la mise à l’échelle, surtout s’ils contiennent du texte ou des éléments sensibles d’un point de vue culturel. Les fichiers peuvent également varier en fonction de l’emplacement géographique de l’utilisateur, indépendamment de la langue. Par exemple, une carte peut avoir des bordures différentes selon l’emplacement géographique de l’utilisateur, mais les libellés doivent respecter la langue de prédilection de l’utilisateur. Pour savoir pourquoi cela peut s’avérer nécessaire, voir Indications de globalisation et de localisation.
Si vous avez besoin de ressources différentes selon la langue et l’emplacement, Windows Runtime prend également en charge une convention selon laquelle langue et emplacement peuvent être déterminés au moment de l’exécution et du chargement des différentes ressources appropriées. Cette convention utilise des noms de dossier, et non des noms de fichier. Ainsi, vous pouvez combiner les conventions de nom de fichier décrites ici ainsi que les conventions de dossier pour définir des ressources qui prennent en charge les problèmes de mise à l’échelle/contraste et de localisation. La prise en charge porte également sur les ressources spécifiques de droite à gauche et une convention targetsize utilisée pour les situations spéciales, comme l’affichage par le système d’images pour les associations de fichier. Voir Comment nommer des ressources à l’aide de qualificateurs pour en savoir plus sur la convention de nom de dossier pour les ressources éligibles, ainsi que les conventions éligibles.
Rubriques associées
Comment nommer des ressources à l’aide de qualificateurs
Recommandations sur la mise à l’échelle d’après la densité en pixels