Guida introduttiva: Uso di risorse di tipo file o immagine (HTML)
[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]
Puoi aggiungere all'app immagini e altre risorse di file e fai riferimento a quei file dall'interno dell'app. Il supporto per la selezione di immagini in base alle impostazioni di contrasto elevato o ridimensionamento specifico del display è integrato in Windows Runtime se segui le istruzioni qui di seguito per denominare le risorse di file e organizzarle in cartelle.
Istruzioni
Crea immagini su misura o altre risorse di file per diverse impostazioni di contrasto e configurazioni del display (DPI).
Crea le tue immagini in diverse dimensioni consigliate per essere certo che la tua app verrà visualizzata in modo ottimale quando Windows deve caricare la risorsa appropriata. Vedi le linee guida per il ridimensionamento in base alla densità in pixel.
Crea più copie di ogni immagine:
- Dimensioni originali usate da un dispositivo a 96 dpi. Assegna a questo file il nome name**.scale-100.**ext. Qui e in tutte le istruzioni successive, name è il segnaposto per il nome di risorsa scelto e ext è l'estensione specifica del tipo di file. .scale-100 è il segmento del nome di risorsa che regola il comportamento di ridimensionamento di Windows Runtime. È in questa parte del nome che devi usare le convenzioni documentate qui.
- 140% delle dimensioni originali. Ad esempio, un'immagine 100x100px deve avere anche una versione 140x140px. Assegna a questo file il nome name**.scale-140.**ext
- 180% delle dimensioni originali. Ad esempio, un'immagine 100x100px deve avere anche una versione 180x180px. Assegna a questo file il nome name**.scale-180.**ext
- 240% delle dimensioni originali, per app per Windows Phone. Ad esempio, un'immagine 100x100px deve avere anche una versione 240x240px. Assegna a questo file il nome name**.scale-240.**ext
- Immagine a contrasto elevato con sfondo nero e colore di primo piano bianco alle dimensioni originali. Assegna a questo file il nome name**scale-100_contrast-black.**ext
- Immagine a contrasto elevato con sfondo bianco e colore di primo piano nero alle dimensioni originali. Assegna a questo file il nome name**scale-100_contrast-white.**ext
Nota Le immagini dei logo dell'app usano anche risorse specificate nel file manifesto dell'app. Se stai usando in particolare un'immagine per il logo dell'app, devi creare una copia con dimensioni pari all'80% di quelle originali. Ad esempio, un'immagine del logo 100x100px deve avere anche una versione 80x80px. Assegna a questo file il nome name**.scale-80.**ext. Per altre informazioni, vedi Scelta delle immagini dell'app e Asset visivi per riquadri e avvisi popup.
Inserisci tutte le immagini nella stessa cartella della struttura dell'app. Ad esempio:
- 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
Fai riferimento alle immagini in HTML senza usare i qualificatori
Usa il formato name.ext quando fai riferimento a questa risorsa file dal markup. Stai deliberatamente omettendo il segmento che specifica la scala o il contrasto. Windows Runtime aggiunge questo segmento internamente quando recupera la risorsa appropriata. Ad esempio:
<img src="images/logo.png" />Fai riferimento alle immagini nel codice senza usare i qualificatori
Usa il formato name.ext quando fai riferimento a questa risorsa file dal codice. Stai deliberatamente omettendo il segmento che specifica la scala o il contrasto. Windows Runtime aggiunge questo segmento internamente quando recupera la risorsa appropriata. La differenza rispetto alle precedenti istruzioni per il markup è che il markup può dedurre lo schema oltre che la radice grazie al contesto del file di markup. Il codice invece non può dedurlo. Le parti dello schema e della radice di un URI (Uniform Resource Identifier) sono necessarie per il codice quando si costruisce un nuovo Uri. Ad esempio:
var uri = new Windows.Foundation.Uri('ms-appx:///images/logo.png'); var file = Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri);Per un file di logo, fai riferimento alle immagini nel manifesto senza usare i qualificatori
Apri il file Package.appxmanifest in Microsoft Visual Studio. Apri la scheda Asset visivi.
Modifica il riferimento del manifesto in modo che faccia riferimento al file di risorse. Per impostazione predefinita, viene mostrato come campo di modifica testo e, quando specifichi il nome del file di risorse, ometti il segmento qualificatore. Ad esempio, c'è un campo Logo quadrato 150x150 dove il valore potrebbe essere:
images\logo.png
Risorse file e globalizzazione
Le istruzioni in questo argomento sono relative ai qualificatori di risorse che abilitano il supporto per il ridimensionamento e il contrasto. Questi adottano la convenzione in base alla quale il qualificatore viene incluso nel nome file. Ma potrebbe essere necessario localizzare alcune immagini o altri file per motivi diversi dal supporto per il ridimensionamento o il contrasto, specialmente se contengono testo o materiale delicato dal punto di vista culturale. I file, inoltre, possono variare in base alla posizione dell'utente, indipendentemente dalla lingua. Ad esempio, i confini di una mappa possono variare in base alla posizione dell'utente, ma le etichette devono sempre rispettare la lingua preferita dall'utente. Per altre informazioni sui motivi per cui questo potrebbe rivelarsi necessario, vedi Linee guida per la globalizzazione e la localizzazione.
Se hai bisogno di risorse diverse in base alla lingua e alla posizione geografica, Windows Runtime supporta anche una convenzione in base alla quale la lingua e la posizione geografica possono essere determinate in fase di esecuzione e vengono caricate risorse appropriate diverse. Questa convenzione usa i nomi cartella e non i nomi file. Puoi quindi combinare le convenzioni di denominazione dei file descritte qui con le convenzioni relative alle cartelle, per definire risorse che supportano problemi di scala/contrasto e di localizzazione. Esiste anche un supporto per le risorse specifiche di RTL e una convenzione targetsize usata in casi particolari, ad esempio con le immagini visualizzate dal sistema per le associazioni del file. Per altre informazioni sulla convenzione di denominazione delle cartelle per la qualificazione delle risorse e sulle convenzioni di qualificazione, vedi Come assegnare nomi alle risorse con i qualificatori.
Argomenti correlati
Come assegnare un nome alle risorse con i qualificatori
Linee guida per l'adattamento in base alla densità dei pixel