Condividi tramite

Applicare materiali Mica o Acrilici nelle app desktop per Windows 11

Materiali in Windows 11 sono effetti visivi applicati alle superfici dell'interfaccia utente che assomigliano agli oggetti del mondo reale. I materiali occludenti, come l'acrilico e la mica, sono utilizzati come livelli di base sotto i controlli interattivi dell'interfaccia utente.

Mica è un materiale opaco che incorpora il tema e lo sfondo del desktop dell'utente per creare un aspetto altamente personalizzato. Mica è progettato per le prestazioni, in quanto acquisisce solo lo sfondo una volta per crearne la visualizzazione, quindi è consigliabile per il livello base dell'app, soprattutto nell'area della barra del titolo.

L'Acrilico è un materiale semitrasparente che riproduce l'effetto del vetro smerigliato. L'acrilico viene utilizzato solo per le superfici transitorie che perdono luce, come i riquadri a comparsa e i menu contestuali.

Questo articolo descrive come applicare Mica o Acrilico come strato di base dell'app XAML Windows App SDK/WinUI 3.

Annotazioni

Come usare un materiale di sfondo

  • API importanti: Window.SystemBackdrop (proprietà), MicaBackdrop (classe), DesktopAcrylicBackdrop (classe), SystemBackdropConfiguration (classe)

Aprire l'app della raccolta WinUI 3 e visualizzare gli sfondi di sistema all'opera

Icona della galleria WinUI 3 L'app Raccolta WinUI 3 include esempi interattivi di controlli e funzionalità WinUI. Ottenere l'app dal Microsoft Store o esplorare il codice sorgente in GitHub.

Per applicare materiale Mica o Acrilico alla tua app, imposti la proprietà su un SystemBackdrop XAML (in genere, uno degli sfondi predefiniti, MicaBackdrop o DesktopAcrylicBackdrop).

Questi elementi hanno una proprietà :

  • CommandBarFlyoutCommandBar.SystemBackdrop
  • ContentIsland.SystemBackdrop
  • DesktopWindowXamlSource.SystemBackdrop
  • FlyoutBase.SystemBackdrop
  • MenuFlyoutPresenter.SystemBackdrop
  • Popup.SystemBackdrop
  • Window.SystemBackdrop

Questi esempi illustrano come impostare lo sfondo del sistema in XAML.

Mica

Mica viene in genere usato come sfondo per una finestra dell'app.

<Window
    ... >

    <Window.SystemBackdrop>
        <MicaBackdrop/>
    </Window.SystemBackdrop>

</Window>

Mica Alt

Per usare la variante Mica Alt, impostare la proprietà su .

<Window
    ... >

    <Window.SystemBackdrop>
        <MicaBackdrop Kind="BaseAlt"/>
    </Window.SystemBackdrop>

</Window>

Acrylic

L'acrilico desktop può essere usato come sfondo per una finestra.

<Window
    ... >

    <Window.SystemBackdrop>
        <DesktopAcrylicBackdrop/>
    </Window.SystemBackdrop>

</Window>

Acrilico nell'interfaccia utente temporanea

L'acrilico viene comunemente utilizzato anche come sfondo per un'interfaccia utente temporanea, come un menu a comparsa. Puoi impostarlo in XAML o nel codice, poiché i flyout vengono spesso creati in modo dinamico.

<Flyout
    ... >

    <Flyout.SystemBackdrop>
        <DesktopAcrylicBackdrop/>
    </Flyout.SystemBackdrop>
</Flyout>

Flyout flyout = new Flyout()
{
    SystemBackdrop = new DesktopAcrylicBackdrop()
};

Avanzato: Come usare un controller di sfondo di sistema

Annotazioni

A partire da Windows App SDK 1.3, puoi applicare il materiale impostando la proprietà Window.SystemBackdrop su un XAMLSystemBackdrop come descritto nella sezione precedente. Questo è il modo consigliato per applicare un materiale per la maggior parte delle app.

Nella parte restante di questo articolo viene illustrato come usare le API Composition MicaController e DesktopAcrylicController , che offrono maggiore controllo sul comportamento di sfondo.

Per usare un materiale di sfondo nella propria app, è possibile usare uno dei controller che implementa l'interfaccia ISystemBackdropController (MicaController o DesktopAcrylicController). Queste classi gestiscono sia il rendering del materiale di sfondo del sistema che la gestione dei criteri di sistema per il materiale.

Per usare la Mica come materiale di sfondo, creare un oggetto MicaController. Per usare l'acrilico, creare un oggetto DesktopAcrylicController. Il codice di configurazione e di supporto è lo stesso per ogni tipo di materiale di sfondo del sistema.

Creare un MicaController

  • C#
  • C++ 
MicaController micaController;

bool TrySetMicaBackdrop(bool useMicaAlt)
{
    if (MicaController.IsSupported())
    {
        ...
        micaController = new MicaController();
        micaController.Kind = useMicaAlt ? MicaKind.BaseAlt : MicaKind.Base;
        ...
    }
}

Creare un DesktopAcrylicController

  • C#
  • C++ 
DesktopAcrylicController acrylicController;

bool TrySetAcrylicBackdrop(bool useAcrylicThin)
{
    if (DesktopAcrylicController.IsSupported())
    {
        ...
        acrylicController = new DesktopAcrylicController();
        acrylicController.Kind = useAcrylicThin 
            ? DesktopAcrylicKind.Thin : DesktopAcrylicKind.Base;
        ...
    }
}

Per impostazione predefinita, il controller risponde ai temi Chiaro e Scuro del sistema. Per eseguire l'override di questo comportamento, è possibile impostare le proprietà seguenti sul controller:

  • FallbackColor
  • LuminositàOpacità
  • TintColor
  • Opacità del colore

Annotazioni

Dopo aver personalizzato una delle quattro proprietà del controller, non applica più i valori predefiniti Light o Dark quando l'oggetto SystemBackdropConfiguration.Theme associato cambia. È necessario aggiornare manualmente tali proprietà in modo che corrispondano al nuovo tema.

Per usare il materiale di sfondo nella propria app, sono necessari gli elementi seguenti:

  • Supporto del sistema

    Il sistema in cui viene eseguita l'app deve supportare il materiale di sfondo. Richiedere il metodo MicaController.IsSupported o il metodo DesktopAcrylicController.IsSupported per assicurarsi che il materiale di sfondo sia supportato in fase di esecuzione.

  • Una destinazione valida

    È necessario fornire una destinazione che implementa l'interfaccia ICompositionSupportsSystemBackdrop . In un'app XAML, la Finestra XAML implementa questa interfaccia e viene usata come destinazione di sfondo.

  • Un oggetto SystemBackdropConfiguration

    SystemBackdropConfiguration fornisce al controller di sfondo del sistema informazioni su criteri specifici dell'app per configurare correttamente il materiale sullo sfondo del sistema.

  • Oggetto DispatcherQueue

    È necessario un oggetto Windows.System.DispatcherQueue nel thread XAML principale. Chiamare per verificarne la presenza.

Esempio: Utilizzare Mica con un controller in un'app WinUI

Questo esempio mostra come configurare il materiale dello sfondo Mica usando un controller in un'app XAML.

Suggerimento

Vedere anche questi progetti di esempio in GitHub:

C#: SampleSystemBackdropsWindow nella WinUI Gallery.

C++/WinRT: Windows App SDK esempio di Mica.

  • C#
  • C++ 
using Microsoft.UI.Composition;
using Microsoft.UI.Composition.SystemBackdrops;
using Microsoft.UI.Xaml;
using WinRT; // required to support Window.As<ICompositionSupportsSystemBackdrop>()

public sealed partial class MainWindow : Window
{
    MicaController micaController;
    SystemBackdropConfiguration configurationSource;

    public MainWindow()
    {
        this.InitializeComponent();

        TrySetMicaBackdrop(false);
    }

    bool TrySetMicaBackdrop(bool useMicaAlt)
    {
        if (MicaController.IsSupported())
        {
            DispatcherQueue.EnsureSystemDispatcherQueue();

            // Hooking up the policy object.
            configurationSource = new SystemBackdropConfiguration();
            Activated += Window_Activated;
            Closed += Window_Closed;
            ((FrameworkElement)Content).ActualThemeChanged += Window_ThemeChanged;

            // Initial configuration state.
            configurationSource.IsInputActive = true;
            SetConfigurationSourceTheme();

            micaController = new MicaController
            {
                Kind = useMicaAlt ? MicaKind.BaseAlt : MicaKind.Base
            };

            // Enable the system backdrop.
            // Note: Be sure to have "using WinRT;" to support the Window.As<...>() call.
            micaController.AddSystemBackdropTarget(
                this.As<ICompositionSupportsSystemBackdrop>());
            micaController.SetSystemBackdropConfiguration(configurationSource);
            return true; // Succeeded.
        }

        return false; // Mica is not supported on this system.
    }

    private void Window_Activated(object sender, WindowActivatedEventArgs args)
    {
        if (configurationSource != null)
            configurationSource.IsInputActive = 
                args.WindowActivationState != WindowActivationState.Deactivated;
    }

    private void Window_Closed(object sender, WindowEventArgs args)
    {
        // Make sure any Mica/Acrylic controller is disposed
        // so it doesn't try to use this closed window.
        micaController?.Dispose();
        micaController = null;
        Activated -= Window_Activated;
        configurationSource = null;
    }

    private void Window_ThemeChanged(FrameworkElement sender, object args)
    {
        if (configurationSource != null)
            SetConfigurationSourceTheme();
    }

    private void SetConfigurationSourceTheme()
    {
        if (configurationSource != null)
            configurationSource.Theme = 
                (SystemBackdropTheme)((FrameworkElement)Content).ActualTheme;
    }
}
  • Last updated on