Condividi tramite

Utilizzare temi moderni

  • Articolo

Gli utenti delle app basate su modello con l'aspetto moderno e rinnovato per le app basate su modello forniscono uno stile aggiornato allineato al sistema di progettazione Microsoft Fluent 2. Poiché questo aspetto moderno e rinnovato è dotato di un nuovo sistema di temi, i temi classici non vengono rispettati; tuttavia, i produttori possono modificare i colori utilizzati dall'intestazione dell'app per gli utenti che hanno abilitato l'aspetto moderno e aggiornato. In questo articolo verranno fornite informazioni sulle sostituzioni di stile disponibili con l'aspetto moderno e rinnovato e su come implementarle per la tua organizzazione.

Nota

  • I temi moderni attualmente supportano solo la personalizzazione dell'intestazione dell'app. Altre personalizzazioni, come la personalizzazione del controllo processo aziendale, non sono disponibili.
  • Affinché i temi moderni funzionino, l'app basata su modello deve utilizzare Nuovo aspetto. Ulteriori informazioni: Aspetto moderno e rinnovato per le app basate su modello

Modifica i colori dell'intestazione dell'app

Con l'aspetto moderno e aggiornato abilitato nell'app, gli autori possono modificare i colori utilizzati dall'intestazione dell'app per allinearli al proprio marchio organizzativo. A tale scopo, incapsula i colori desiderati in una risorsa XML, utilizza un'impostazione dell'app affinché punti a questa risorsa Web e quindi verifica che le modifiche del colore corrispondano alle aspettative.

Nota

Questa funzionalità è disponibile nella build 9.2.23094 o versione successiva.

Panoramica della risorsa XML da usare per i colori dell'intestazione dell'app

Il primo passaggio per modificare lo stile dell'intestazione dell'app è creare un file XML con le varie selezioni di colori. Successivamente, creerai una risorsa Web XML con uno o più dei seguenti attributi definiti all'interno di un tag AppHeaderColors.

  • Background: il colore di sfondo dell'intestazione dell'app. Questo elemento deve essere definito affinché eventuali modifiche abbiano effetto.
  • Foreground: il colore del testo dell'intestazione dell'app. Se ciò non è specificato, il sistema tenta di calcolare un colore appropriato che abbia un contrasto sufficiente rispetto al colore di sfondo fornito.
  • BackgroundHover: il colore di sfondo dei pulsanti nell'intestazione dell'app quando ci si passa sopra. Se non viene specificato alcun valore, il sistema calcola un colore in base al colore di sfondo.
  • ForegroundHover: il colore del testo dei pulsanti nell'intestazione dell'app quando ci si passa sopra. Se non è specificato alcun valore, il sistema tenta di calcolare un colore appropriato che abbia un contrasto sufficiente rispetto al colore di backgroundHover.
  • BackgroundPressed: il colore di sfondo dei pulsanti nell'intestazione dell'app quando sono premuti. La logica predefinita è la stessa di backgroundHover.
  • ForegroundPressed: il colore del testo dei pulsanti nell'intestazione dell'app quando sono premuti. La logica predefinita è la stessa di foregroundHover.
  • BackgroundSelected: il colore di sfondo dei pulsanti nell'intestazione dell'app quando sono selezionati. La logica predefinita è la stessa di backgroundHover.
  • ForegroundSelected: il colore del testo dei pulsanti nell'intestazione dell'app quando sono selezionati. La logica predefinita è la stessa di backgroundHover.

Esempio XML per un tema moderno

Ad esempio, questo XML specifica un colore di sfondo verde per l'intestazione dell'app con testo bianco, con colori di sfondo più scuri per i vari stati di interazione dei pulsanti. Per un'usabilità ottimale, ti consigliamo di specificare valori di colore diversi per ciascuno stato.

<AppHeaderColors 
  background="#12783F"
  foreground="#FFFFFF" 
  backgroundHover="#165A31" 
  foregroundHover="#FFFFFF"
  backgroundPressed="#0F1C12"
  foregroundPressed="#FFFFFF"
  backgroundSelected="#153D23" 
  foregroundSelected="#FFFFFF"
/>

Creare la risorsa Web

  1. Utilizzando un editor di testo o XML, salvare l'XML utilizzato per creare la risorsa Web. Esempio XML per un tema moderno
  2. Accedi a Power Apps.
  3. Nel riquadro di spostamento a sinistra seleziona Soluzioni e quindi crea una Nuova soluzione.
  4. Seleziona Nuovo > Altro > Risorsa Web.
  5. Nel riquadro proprietà Nuova risorsa Web, immetti i seguenti valori:
    • Nome visualizzato: immetti un nome visualizzato, ad esempio XML per tema moderno.
    • Nome. Immetti il nome univoco per la risorsa Web.
    • Tipo: Dati (XML)
  6. Seleziona Scegli file, individua e seleziona il file XML creato in precedenza con il tema.
  7. Seleziona Salva. Puoi pubblicare questa personalizzazione con i passaggi nella sezione successiva.

Applica colori personalizzati per le intestazioni delle app alle app nel tuo ambiente

Dopo aver selezionato i colori e creato la risorsa Web, segui questi passaggi per abilitare lo stile dell'intestazione dell'app per tutte le app nel tuo ambiente che hanno Nuovo aspetto abilitato.

  1. Nella soluzione utilizzata per creare la risorsa Web, seleziona Aggiungi esistente > Altro > Impostazione.
  2. Digita Sostituisci nella casella Cerca, seleziona Sostituisci colore intestazione app, seleziona Avanti, quindi seleziona Aggiungi.
  3. Nella soluzione, seleziona Sostituisci colore intestazione app, quindi seleziona Modifica nella barra dei comandi.
  4. Nel riquadro delle proprietà Modifica Sostituisci colore intestazione app a destra, seleziona Impostazione valore ambiente e inserisci il nome univoco della tua risorsa Web creata in precedenza. Assicurati di aggiungere il prefisso dell'editore per la risorsa Web e non includere virgolette. Ad esempio, il nome potrebbe essere visualizzato come contoso_xmlfor-modern-theme come in questo esempio. Impostazione dell'ambiente per un tema con nome univoco della risorsa Web contoso_xmlfor-modern-theme.
  5. Seleziona Salva.
  6. Seleziona Pubblica tutte le personalizzazioni nella barra dei comandi. Questo comando viene visualizzato quando non è selezionato alcun componente nella soluzione.

Con i colori di esempio, l'intestazione dell'app dovrebbe assomigliare a questa quando riproduci l'app (potresti dover aggiornare la scheda del browser).
Intestazione dell'app verde in un'app basata su modello

Verifica dei nuovi colori dell'intestazione dell'app

Dopo aver pubblicato i nuovi colori dell'intestazione dell'app, ti consigliamo di convalidare gli elementi visivi dell'intestazione dell'app, inclusi tutti gli stati dei pulsanti, per garantire che tutto venga visualizzato come previsto e che ci siano rapporti di contrasto sufficienti per l'accessibilità. Dovresti verificare le seguenti scelte di colore:

  • I colori desiderati vengono visualizzati per l'intestazione dell'app a riposo e per ogni stato di interazione del pulsante.
  • Esiste un rapporto di contrasto minimo di 4,5:1 tra i colori di primo piano e di sfondo per lo stato di riposo e lo stato di interazione di ciascun pulsante.

Vedi anche

Look moderno e rinnovato

Nota

Puoi indicarci le tue preferenze di lingua per la documentazione? Partecipa a un breve sondaggio. (il sondaggio è in inglese)

Il sondaggio richiederà circa sette minuti. Non viene raccolto alcun dato personale (Informativa sulla privacy).