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 scuro

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.

Esempi

Raccolta WinUI 2
Se hai l'app Raccolta WinUI 2 installata, fai clic qui per aprire l'app e vedere l'acrilico in azione.

Scarica l'app WinUI 2 Gallery (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.

Evita di disporre su più livelli le superfici acriliche. Più livelli di acrilico di sfondo tendono a causare illusioni ottiche impreviste e devono essere evitati.

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 usi l'acrilico in-app su superfici di spostamento, prova a estendere il contenuto sotto il riquadro dell'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 che consente di fornire un'armonia visiva ai tuoi progetti, ma può causare disturbi visivi se è usato in modo errato.

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 contestuali, riquadri a comparsa, popup non modali o riquadri che scompaiono quando si tocca lo schermo, si consiglia di utilizzare lo sfondo acrilico, soprattutto se queste superfici disegnano al di fuori della cornice della finestra principale dell'applicazione.

Molti controlli XAML disegnano l'acrilico per impostazione predefinita. MenuFlyout, AutoSuggestBox, ComboBox e controlli simili con popup che scompaiono quando si tocca lo schermo utilizzano tutti l'acrilico quando sono aperti.

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 > Personalizzazione > Colori.

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 Effetti di trasparenza in Impostazioni > Personalizzazione > Colori.
• Quando viene attivata la modalità di 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 (vedere Requisiti per il testo accessibile). Abbiamo ottimizzato le risorse acriliche in modo che il testo soddisfi i rapporti di contrasto sopra l'acrilico. Non è consigliabile posizionare testo con il colore principale sulle superfici acriliche poiché è molto probabile che queste combinazioni non soddisfino i requisiti minimi relativi al rapporto di contrasto con dimensioni dei caratteri di 15 pixel. Cerca di evitare di posizionare collegamenti ipertestuali sugli elementi acrilici. Inoltre, se scegli di personalizzare il colore della tinta acrilica o il livello di opacità, tieni presente l'impatto sulla leggibilità.

Risorse del tema acrilico

Puoi applicare facilmente l'acrilico sulle superfici della tua app usando le risorse del tema AcrylicBrush XAML o quelle del tema AcrylicBrush predefinito. 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 themeresources di AcrylicBrush, 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 un'area specifica, applica una delle risorse del tema WinUI 2 agli sfondi dell'elemento esattamente come applicheresti 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 inserire l'acrilico desktop su grandi superfici di sfondo dell'app.
• Non posizionare più riquadri acrilici in una posizione adiacente, altrimenti otterrai un punto di unione visibile indesiderato.
• 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

• WinUI 2 Gallery sample - Guarda tutti i controlli XAML in formato interattivo.

Articoli correlati

Panoramica di Fluent Design