Materiale acrilico
L'acrilico è un tipo di pennello che crea una trama traslucida. Puoi applicare l'acrilico sulle superfici delle app per aggiungere profondità e consentire di stabilire una gerarchia visiva.
API importanti: classe AcrylicBrush, proprietà Background
Acrilico in tema chiaro 
Acrilico in tema 
L'acrilico e il sistema di progettazione Fluent Design
Il sistema di progettazione Fluent Design ti consente di creare un'interfaccia utente moderna e vivace che incorpora luminosità, profondità, movimento, materiale e ridimensionamento. L'acrilico è un componente del sistema di progettazione Fluent Design che aggiunge trama fisica (materiale) e profondità alla tua app. Per altre informazioni, vedi la panoramica di Fluent Design.
Esempio
Raccolta WinUI 2
Se è installata l'app WinUI 2 Gallery, fai clic qui per aprire l'app e vedere l'acrilico in azione.
Ottenere l'app Raccolta WinUI 2 (Microsoft Store)
Ottieni il codice sorgente (GitHub)
Tipi di sfumature acriliche
La caratteristica più evidente dell'acrilico è la trasparenza. Esistono due tipi di sfumature acriliche che cambiano ciò che risulta visibile attraverso il materiale:
- L'acrilico di sfondo rivela lo sfondo del desktop e altre finestre che si trovano dietro l'app attiva, aggiungendo profondità tra le finestre dell'applicazione e mettendo in evidenza le preferenze di personalizzazione dell'utente.
- L'acrilico in-app aggiunge un senso di profondità all'interno della cornice dell'app, fornendo effetti di messa a fuoco e gerarchia.
Evitare di strati di più superfici acriliche: più livelli di acrilico di sfondo possono creare illusioni ottiche distrazioni.
Quando usare l'acrilico
- Usa l'acrilico in-app per supportare l'interfaccia utente, ad esempio sulle superfici che possono sovrapporsi a contenuto durante lo scorrimento o l'interazione.
- Usa l'acrilico di sfondo per gli elementi dell'interfaccia utente temporanei, ad esempio menu di scelta rapida, riquadri a comparsa ed elementi dell'interfaccia utente che possono scomparire quando si tocca lo schermo.
L'uso dell'acrilico in scenari temporanei aiuta a mantenere una relazione visiva con il contenuto che ha attivato l'interfaccia utente temporanea.
Se si usa l'acrilico in-app sulle superfici di spostamento, è consigliabile estendere il contenuto sotto il riquadro acrilico per migliorare il flusso nell'app. Con il controllo NavigationView questa operazione viene eseguita automaticamente. Tuttavia, per evitare un effetto striato, cerca di non inserire più aree di acrilico in posizione adiacente poiché questo può generare una linea di giunzione indesiderata tra le due superfici sfocate. L'acrilico è uno strumento per portare l'armonia visiva ai tuoi disegni, ma quando usato in modo non corretto può causare disturbo visivo.
Prendi in considerazione i modelli di utilizzo seguenti per decidere il modo migliore per incorporare l'acrilico nella tua app:
Riquadri verticali
Per i riquadri o le superfici verticali che consentono di separare le sezioni di contenuto dell'app, è consigliabile usare uno sfondo opaco anziché l'acrilico. Se i riquadri verticali vengono aperti in primo piano rispetto al contenuto, come nella modalità Compact o Minimal di NavigationView, è consigliabile usare l'acrilico in-app per consentire la gestione del contesto della pagina quando l'utente ha questo riquadro aperto.
Superfici temporanee
Per le app con menu di scelta rapida, riquadri a comparsa, popup non modali o riquadri di chiusura chiara, è consigliabile usare l'acrilico di sfondo, soprattutto se queste superfici disegnano all'esterno della cornice della finestra principale dell'app.
Molti controlli XAML disegnano l'acrilico per impostazione predefinita. MenuFlyout, AutoSuggestBox, ComboBox e controlli simili con popup di chiusura chiara usano tutti l'acrilico durante l'apertura.
Nota
Il rendering delle superfici di acrilico può comportare un utilizzo intensivo della GPU e, di conseguenza, aumentare il consumo di energia del dispositivo e ridurre la durata della batteria. Gli effetti acrilici vengono disabilitati automaticamente quando un dispositivo entra in modalità Risparmio batteria. Gli utenti possono disabilitare gli effetti acrilici per tutte le app disattivando gli effetti trasparenza in Impostazioni > Colori personalizzazione > .
Usabilità e adattamento
L'acrilico adatta automaticamente il proprio aspetto in base a una vasta gamma di dispositivi e contesti.
Nella modalità Contrasto elevato, gli utenti continuano a vedere il consueto colore di sfondo selezionato al posto dell'acrilico. Inoltre, sia l'acrilico di sfondo sia l'acrilico in-app appaiono come un colore a tinta unita nei casi seguenti:
- Quando l'utente disattiva gli effetti trasparenza in Impostazioni > Colori personalizzazione > .
- Quando viene attivata la modalità risparmio batteria.
- Quando l'app viene eseguita su hardware di fascia bassa.
Oltre a questi casi, solo l'acrilico di sfondo sostituisce la traslucenza e la trama con un colore a tinta unita nei casi seguenti:
- Quando una finestra dell'app sul desktop viene disattivata.
- Quando l'app è in esecuzione su Xbox, HoloLens o in modalità tablet.
Considerazioni sulla leggibilità
È importante assicurarsi che qualsiasi testo presentato dall'app agli utenti soddisfi i rapporti di contrasto (vedi Requisiti di testo accessibili). Sono stati ottimizzati le risorse acriliche in modo che il testo soddisfi i rapporti di contrasto rispetto all'acrilico. Non è consigliabile posizionare il testo di colore principale sulle superfici acriliche perché è probabile che queste combinazioni non superino i requisiti minimi del rapporto di contrasto con le dimensioni predefinite del tipo di carattere 14px. Cerca di evitare di posizionare collegamenti ipertestuali sugli elementi acrilici. Inoltre, se si sceglie di personalizzare il colore o il livello di opacità della tinta acrilica, tenere presente l'impatto sulla leggibilità.
Risorse del tema acrilico
Puoi applicare facilmente l'acrilico alle superfici dell'app usando le risorse del tema Acrilico XAMLBrush o AcrylicBrush predefinite. Prima di tutto, devi decidere se usare l'acrilico in-app o di sfondo. Per indicazioni e consigli, esamina i modelli di app comuni descritti in precedenza in questo articolo.
Abbiamo creato una raccolta di risorse del tema pennello per entrambi i tipi di acrilico, di sfondo e in-app, che rispettano il tema dell'app ed eseguono il fallback ai colori a tinta unita quando necessario. Per WinUI 2, queste risorse del tema si trovano nel file AcrylicBrush themeresources, nel repository GitHub microsoft-ui-xaml. Le risorse che includono Background nei nomi rappresentano l'acrilico di sfondo, mentre InApp fa riferimento all'acrilico in-app.
Per disegnare una superficie specifica, applicare una delle risorse del tema WinUI 2 agli sfondi degli elementi esattamente come si applica qualsiasi altra risorsa pennello.
<Grid Background="{ThemeResource AcrylicBackgroundFillColorDefaultBrush}">
Personalizzazione del pennello acrilico
Puoi scegliere di aggiungere una tinta di colore all'acrilico della tua app per mostrare un aspetto personalizzato o fornire un equilibrio visivo con gli altri elementi della pagina. Per mostrare i colori anziché la scala di grigi, dovrai definire i tuoi pennelli acrilici usando le proprietà seguenti.
- TintColor: livello di sovrimpressione di colore/tinta.
- TintOpacity: opacità del livello di tinta.
- TintLuminosityOpacity: controlla la quantità di saturazione consentita attraverso la superficie acrilica dallo sfondo.
- BackgroundSource: flag per specificare se vuoi l'acrilico di sfondo o in-app.
- FallbackColor: colore a tinta unita che sostituisce l'acrilico in modalità di risparmio batteria. Per l'acrilico di sfondo, il colore di fallback sostituisce l'acrilico anche quando l'app non si trova nella finestra desktop attiva o quando l'app è in esecuzione sul telefono e su Xbox.
Per aggiungere un pennello acrilico, definisci le tre risorse per i temi a contrasto elevato, scuro e chiaro. Tieni presente che, con il contrasto elevato, è consigliabile usare un controllo SolidColorBrush con lo stesso valore di x:Key di AcrylicBrush, scuro o chiaro.
Nota
Se non specifichi un valore per TintLuminosityOpacity, il sistema regolerà automaticamente il valore in base a TintColor e TintOpacity.
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<AcrylicBrush x:Key="MyAcrylicBrush"
BackgroundSource="HostBackdrop"
TintColor="#FFFF0000"
TintOpacity="0.8"
TintLuminosityOpacity="0.5"
FallbackColor="#FF7F0000"/>
</ResourceDictionary>
<ResourceDictionary x:Key="HighContrast">
<SolidColorBrush x:Key="MyAcrylicBrush"
Color="{ThemeResource SystemColorWindowColor}"/>
</ResourceDictionary>
<ResourceDictionary x:Key="Light">
<AcrylicBrush x:Key="MyAcrylicBrush"
BackgroundSource="HostBackdrop"
TintColor="#FFFF0000"
TintOpacity="0.8"
TintLuminosityOpacity="0.5"
FallbackColor="#FFFF7F7F"/>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
L'esempio seguente mostra come dichiarare AcrylicBrush nel codice. Se l'app supporta più destinazioni di sistema operativo, assicurati di controllare che questa API sia disponibile nel computer dell'utente.
if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.UI.Xaml.Media.AcrylicBrush"))
{
Windows.UI.Xaml.Media.AcrylicBrush myBrush = new Windows.UI.Xaml.Media.AcrylicBrush();
myBrush.BackgroundSource = Windows.UI.Xaml.Media.AcrylicBackgroundSource.HostBackdrop;
myBrush.TintColor = Color.FromArgb(255, 202, 24, 37);
myBrush.FallbackColor = Color.FromArgb(255, 202, 24, 37);
myBrush.TintOpacity = 0.6;
grid.Fill = myBrush;
}
else
{
SolidColorBrush myBrush = new SolidColorBrush(Color.FromArgb(255, 202, 24, 37));
grid.Fill = myBrush;
}
Estendere l'acrilico nella barra del titolo
Per assegnare un aspetto di continuità alla finestra dell'app, puoi usare l'acrilico nell'area della barra del titolo. Questo esempio estende l'acrilico alla barra del titolo impostando le proprietà ButtonBackgroundColor e ButtonInactiveBackgroundColor dell'oggetto ApplicationViewTitleBar su Colors.Transparent.
private void ExtendAcrylicIntoTitleBar()
{
CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
ApplicationViewTitleBar titleBar = ApplicationView.GetForCurrentView().TitleBar;
titleBar.ButtonBackgroundColor = Colors.Transparent;
titleBar.ButtonInactiveBackgroundColor = Colors.Transparent;
}
Questo codice può essere inserito nel metodo OnLaunched dell'app (App.xaml.cs), dopo la chiamata a Window.Activate come indicato qui o nella prima pagina dell'app.
// Call your extend acrylic code in the OnLaunched event, after
// calling Window.Current.Activate.
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
Frame rootFrame = Window.Current.Content as Frame;
// Do not repeat app initialization when the Window already has content,
// just ensure that the window is active
if (rootFrame == null)
{
// Create a Frame to act as the navigation context and navigate to the first page
rootFrame = new Frame();
rootFrame.NavigationFailed += OnNavigationFailed;
if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
{
//TODO: Load state from previously suspended application
}
// Place the frame in the current Window
Window.Current.Content = rootFrame;
}
if (e.PrelaunchActivated == false)
{
if (rootFrame.Content == null)
{
// When the navigation stack isn't restored navigate to the first page,
// configuring the new page by passing required information as a navigation
// parameter
rootFrame.Navigate(typeof(MainPage), e.Arguments);
}
// Ensure the current window is active
Window.Current.Activate();
// Extend acrylic
ExtendAcrylicIntoTitleBar();
}
}
Dovrai inoltre disegnare il titolo dell'app, che in genere viene visualizzato automaticamente nella barra del titolo, con un oggetto TextBlock usando CaptionTextBlockStyle. Per altre informazioni, vedi Personalizzazione della barra del titolo.
Cosa fare e cosa non fare
- Usare l'acrilico sulle superfici temporanee.
- Estendi l'acrilico fino ad almeno un bordo della tua app per offrire un'esperienza di continuità mediante una fusione discreta con l'ambiente circostante dell'app.
- Non mettere l'acrilico desktop su superfici di sfondo di grandi dimensioni dell'app.
- Non posizionare più riquadri acrilici l'uno accanto all'altro perché ciò comporta una cucitura visibile indesiderata.
- Non posizionare testo con il colore principale sulle superfici acriliche.
Come abbiamo progettato l'acrilico
Abbiamo ottimizzato i componenti chiave dell'acrilico per ottenere aspetto e proprietà unici. Abbiamo iniziato con la traslucenza, la sfocatura e il disturbo per aggiungere profondità visiva e dimensione alle superfici piane. Abbiamo aggiunto un livello per la modalità di sfumatura esclusione in modo da garantire il contrasto e la leggibilità dell'interfaccia utente posizionata su uno sfondo acrilico. Abbiamo infine aggiunto una tinta di colore per offrire opportunità di personalizzazione. Tutti insieme, questi livelli costituiscono un materiale nuovo e di facile utilizzo.
La struttura dell'acrilico è costituita da sfondo, sfocatura, sfumatura esclusione, sovrimpressione colore/tinta, disturbo
Scaricare il codice di esempio
- Esempio di Raccolta WinUI 2 : vedi tutti i controlli XAML in un formato interattivo.