Come personalizzare i riquadri della schermata Start per app desktop (app di Windows Runtime)

Articolo
12/11/2015

[ 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 ]

A partire da Windows 8.1, gli sviluppatori di app Win32 possono personalizzare l'aspetto del riquadro di un'applicazione desktop nella schermata Start. In Windows 8 questi riquadri provengono unicamente dal sistema, senza alcuna opzione di personalizzazione da parte dello sviluppatore. L'icona dell'app all'interno di un riquadro viene visualizzata in base al colore di sfondo della schermata Start. Windows 8.1 offre maggiore varietà per quanto riguarda l'aspetto predefinito dei riquadri e anche la possibilità di personalizzare maggiormente il riquadro tramite l'applicazione di colori e immagini di tua scelta.

Le personalizzazioni disponibili per il riquadro di un'app desktop sono le seguenti:

Immagini personalizzate a pagina intera
Colore di sfondo a scelta dello sviluppatore
Possibilità di visualizzare o nascondere il nome dell'app nel riquadro
Colore del testo chiaro o scuro a scelta dello sviluppatore in caso di visualizzazione del nome dell'app

Hai la possibilità di personalizzare completamente un riquadro, ma ti consigliamo di valutare le modifiche all'aspetto predefinito dei riquadri sufficienti per il tuo caso specifico. Il riquadro predefinito assegnato da Windows all'app è ancora un riquadro di medie dimensioni che mostra nome e icona dell'app. Tuttavia, a partire da Windows 8.1, il layout è cambiato e ora Windows seleziona un colore dell'icona e applica attorno a essa un colore di sfondo simile o complementare.

L'immagine seguente mostra l'aspetto degli stessi riquadri predefiniti in Windows 8 e in Windows 8.1, con lo stesso colore di sfondo della schermata Start.

Riquadri di Microsoft Office visualizzati per Windows 8 e Windows 8.1

Se scegli di personalizzare ulteriormente il riquadro, lo potrai fare usando un file XML specifico. Lo schema usato da questo file è simile allo schema usato per i riquadri delle app di Windows Store. I due schemi non sono però intercambiabili e non vanno confusi.— Questo argomento illustra come creare il file di esempio seguente, in cui gli attributi Square150x150Logo e Square70x70Logo sono facoltativi, mentre tutti gli altri sono necessari.


<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>

Prerequisiti

Conoscenze di base di XML
Conoscenze di base dei parametri della riga di comando
Conoscenze della denominazione delle risorse e della creazione di pacchetti di risorse per le versioni delle immagini ridimensionate, a contrasto elevato e localizzate. Per altre informazioni, vedi Come assegnare un nome alle risorse con i qualificatori.

Istruzioni

Passaggio 1: Creare il file XML di personalizzazione

Specifica le personalizzazioni per il tuo riquadro
Posizionalo nella stessa directory del file eseguibile
Assegna lo stesso nome del file eseguibile, con l'estensione ".VisualElementsManifest.xml". Se ad esempio il file eseguibile è denominato "contoso.exe", il file XML di supporto deve essere denominato "contoso.visualelementsmanifest.xml".

Aggiungi il codice seguente al file XML creato.


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

Passaggio 2: Dichiarare un colore di sfondo

Obbligatorio
Specificalo come valore esadecimale RGB o con una delle stringhe predefinite seguenti:
- black
- silver
- gray
- white
- maroon
- red
- purple
- fuchsia
- green
- lime
- olive
- yellow
- navy
- blue
- teal
- aqua

Qui sono mostrati esempi di entrambi i modi per esprimere il valore del colore:


<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>

Passaggio 3: Dichiarare se visualizzare il nome dell'app nel riquadro

Obbligatorio
Per l'attributo ShowNameOnSquare150x150Logo sono disponibili due possibili valori:
- "on" per mostrare il nome
- "off" per nascondere il nome
Il nome di un'app può essere visualizzato solo con le dimensioni di riquadro medie (150x150).

Il nome dell'app coincide con quello del file di collegamento per il menu Start, oppure quello del file eseguibile dell'app se non esiste un file di collegamento.


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

Passaggio 4: Dichiarare un colore del testo in primo piano

Obbligatorio anche quando ShowNameOnSquare150x150Logo="off"
Fa riferimento al nome dell'app nel riquadro.
Per l'attributo ForegroundText sono disponibili due possibili valori:
- "light" per testo bianco
- "dark" per testo nero

Scegli il valore più adatto in base al colore di sfondo dichiarato. Per ottenere visibilità e accessibilità ottimali, cerca di ottenere come minimo un rapporto di luminanza di 4,5 a 1 tra il colore del testo e il colore di sfondo. Per altre informazioni, vedi lo standard di accessibilità del W3C, G18: assicurare un rapporto di contrasto di almeno 4,5:1 tra il testo (e le immagini di testo) e lo sfondo.


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

Passaggio 5: Specificare le immagini

Facoltativo
Specifica immagini a pagina intera per sostituire l'icona e lo sfondo predefiniti
Per i riquadri sono supportate solo le dimensioni media (150x150) e piccola (70x70)
Sono valide le normali restrizioni per le immagini dei riquadri:
- Dimensioni minori o uguali a 1024x1024 pixel
- Dimensioni del file minori o uguali a 200 KB
- Tipo di file png, jpg, jpeg o gif

Importante Se scegli di usare un'immagine personalizzata, devi specificare un'immagine per entrambi gli attributi Square150x150Logo e Square70x70Logo. Se specifichi uno solo di questi attributi, verrà ignorato l'intero file XML e al riquadro verrà applicato lo stile predefinito (icona e sfondo dell'app).

In base alle procedure consigliate per la progettazione, se il riquadro non è animato, non dovrebbe richiedere lo spazio su schermo extra necessario per i riquadri larghi (310x150) e quelli grandi (310x310). Poiché il riquadro di un'app desktop è sempre statico e mai animato, tali dimensioni aggiuntive per i riquadri non sono supportate in questo schema.

In questo esempio le immagini si trovano in una cartella denominata "Assets", che è un elemento di pari livello del file YourAppName.VisualElementsManifest.xml. Questi nomi di file possono essere tanto nomi reali, quanto nomi generici utilizzati per i file ridimensionati, con contrasto elevato o localizzati illustrati nel passaggio 6. Vedi la sezione Osservazioni per informazioni sulla denominazione delle risorse immagini.


<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>

Ecco il file .VisualElementsManifest.xml completo. Includi questo file nell'installazione dell'app, allo stesso livello del file eseguibile.

Passaggio 6: Specifica le immagini per il ridimensionamento, la localizzazione e il contrasto elevato

Facoltativo, ma consigliato
Puoi ignorare questo passaggio se non devi fornire immagini ridimensionate, con contrasto elevato o localizzate
Per ottenere la massima qualità di visualizzazione, predisponi un set completo di asset ridimensionati per ogni immagine specificata nel passaggio 5. Per altri dettagli, vedi la sezione Osservazioni.
Usa le normali convenzioni di denominazione e il file Resource.pri di Sistema gestione risorse

Nota Se non includi un set completo di asset ridimensionati, gli asset che decidi di includere verranno ridimensionati da Windows in base alle esigenze. È preferibile includere una delle dimensioni più ampie (140% o 180%), perché la riduzione delle dimensioni consente di ottenere risultati migliori rispetto all'aumento delle dimensioni.

In base alle impostazioni di sistema attive quando viene aggiornato il riquadro, Windows usa un file Resources.pri per scegliere dal set che hai predisposto la risorsa immagini corretta. Creeremo questo file in questo passaggio.

Crea una cartella di lavoro. Questa cartella non è inclusa nei file di installazione dell'app, viene usata solo durante la creazione del file Resources.pri. In questo esempio è denominata "CreateResources".
```
md %USERPROFILE%\Documents\CreateResources
```
Crea una sottodirectory di CreateResources per i file immagine. In questo esempio, la chiamiamo "Assets".
```
md %USERPROFILE%\Documents\CreateResources\Assets
```
Posiziona le immagini ridimensionate, a contrasto elevato e/o localizzate nella cartella "Assets". Puoi specificare le immagini come elenco semplice oppure strutturate all'interno di sottodirectory, purché segui le convenzioni di denominazione e definizione della struttura previste. Per gli scopi di questo esempio includeremo gli asset ridimensionati e a contrasto elevato seguenti come elenco semplice.
- 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

Crea un file di configurazione MakePRI. È un file XML utilizzato da MakePRI.exe per specificare le immagini indicizzate in Resources.pri. Esegui il comando seguente per creare il file di configurazione, che denomineremo "TestAppConfig.xml". Questo file non viene salvato nella cartella CreateResources. In questo modo si evita che il file di configurazione stesso venga incluso nell'indice.

Importante Lo strumento da riga di comandoMakePRI.exe è incluso in Windows SDK e scaricabile gratuitamente. Se usi Microsoft Visual Studio, è probabile che il file MakePRI.exe sia già presente nel sistema come parte dell'installazione.

Questo comando e il prossimo presuppongono che il file MakePRI.exe si trovi nel tuo percorso. In caso contrario, cercalo in "Programmi\Windows Kits" e includi il percorso completo in questi comandi.


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

Argomento del comando	Definizione
/cf	Percorso e nome del file di configurazione da creare
/dq	Qualificatori predefiniti. È obbligatorio almeno un qualificatore (lingua, scala e così via).

Crea il file Resources.pri. Esegui il comando seguente, che utilizza il file di configurazione TestAppConfig.xml appena creato per generare un file Resources.pri nella directory CreateResources.


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

Argomento del comando	Definizione
/pr	Percorso radice dei file di progetto
/cf	Percorso del file XML di configurazione
/in	Nome dell'indice delle risorse nel file Resources.pri. Corrisponde in genere al nome dell'app.
/of	Percorso di output del file Resources.pri. Se omesso, viene usata la radice del progetto specificata con l'argomento /pr.

Includi il file Resources.pri nell'installazione dell'applicazione. Posizionalo nella stessa directory del file exe dell'app e del relativo file con estensione .VisualElementsManifest.xml. Durante l'installazione, inserisci il file con estensione .VisualElementsManifest.xml nella posizione corretta prima di installare il file di collegamento dell'app.

Passaggio 7: (Importante) Aggiornare il file di collegamento

Se l'app è già installata, devi spostare il collegamento dopo avere inserito nella posizione corretta il file con estensione .VisualElementsManifest.xml nuovo o aggiornato, altrimenti verrà ignorato. L'esempio di comando di Windows PowerShell seguente per l'app fittizia Contoso rappresenta un modello per l'esecuzione di questa operazione, che tuttavia può essere effettuata in molti altri modi.


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

Osservazioni

Importante In caso di problemi con il file con estensione .VisualElementsManifest.xml specificato, il riquadro ripristina l'impostazione predefinita fornita da Windows. Alcuni potenziali errori sono un file XML non valido, l'omissione di attributi obbligatori, valori di attributo non validi o immagini non individuabili.

Puoi usare il file MakePRI.exe con l'opzione di comando dump per esaminare il contenuto del file Resources.pri, operazione utile per la risoluzione dei problemi. Per altre informazioni sullo strumento MakePRI.exe, vedi Configurazione di MakePRI.exe e Opzioni di comando MakePRI.exe.

Durante la risoluzione dei problemi puoi anche consultare il Visualizzatore eventi e cercare l'evento 28032 nel log in Registri applicazioni e servizi\Microsoft\Windows\Shell-Core\Operational. I dettagli dell'evento includono il percorso del file .VisualElementsManifest.xml, il codice di errore HRESULT e, se disponibile, una stringa di errore.

Utilizzo del sistema di gestione delle risorse

Anche se non rientra negli scopi di questo argomento spiegare nei dettagli il sistema di gestione delle risorse, offriremo una breve panoramica. Per informazioni approfondite, leggi gli argomenti Sistema gestione risorse.

Un set completo di immagini include gli elementi seguenti:

Un'immagine separata per ogni plateau di ridimensionamento DPI (80%, 100%, 140% e 180%)
Versioni a contrasto elevato (bianco su nero e nero su bianco) di ogni immagine
Immagini localizzate se vuoi visualizzare un'immagine diversa nel riquadro in base alla lingua di sistema, ad esempio se l'immagine contiene un testo

Puoi includere tutte queste immagini i solo un sottoinsieme.

I nomi dei file seguiranno il modello name.scale-100.ext, name.scale-100_contrast-black.ext e così via. Puoi anche usare qualificatori tramite una struttura di directory, invece che nel nome del file. Tuttavia, nel file .VisualElementsManifest.xml fai riferimento unicamente alla radice name del file. Potresti ad esempio includere questi file per il riquadro di dimensioni medie:

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

Tuttavia, nel file .VisualElementsManifest.xml fai riferimento unicamente a "70x70Logo.png", come nel nostro esempio. In base alle impostazioni di sistema correnti, Windows usa il file Resources.pri per selezionare la versione corretta del file 70x70Logo tra le opzioni elencate. Per un'esercitazione completa sulle convenzioni di denominazione supportate da questo sistema, vedi Guida introduttiva: Uso di risorse di file o immagini.

XSD per la personalizzazione dei riquadri per app desktop

Qui di seguito è mostrato il file XSD dello schema usato nella personalizzazione dei riquadri per app desktop.


<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>