Freigeben über


Anwenden von Mica- oder Acrylmaterialien in Desktop-Apps für Windows 11

Materials in Windows 11 sind visuelle Effekte, die auf UX-Oberflächen angewendet werden und echten Artefakten ähneln. Verdeckende Materialien wie Acryl und Mica werden als Basisebenen unter interaktiven Benutzeroberflächen-Steuerelementen verwendet.

Mica ist ein undurchsichtiges Material, das das Design und das Desktophintergrundbild der Benutzer*innen enthält, um ein sehr personalisiertes Aussehen zu schaffen. Mica ist für Leistung konzipiert, da es das Hintergrundbild nur einmal erfasst, um die Visualisierung zu erstellen. Es wird daher für die Basisebene Ihrer App und insbesondere für den Titelleistenbereich empfohlen.

Acryl ist ein semitransparentes Material, das einen Milchglaseffekt erzeugt. Es wird nur für kurzlebige Oberflächen mit einfachem Ausblenden wie Flyouts und Kontextmenüs verwendet.

In diesem Artikel wird beschrieben, wie Mica oder Acryl als Basisschicht Ihrer Windows App SDK/WinUI 3 XAML-App angewendet wird.

Hinweis

Wie man ein Hintergrundmaterial verwendet

WinUI 3-Katalogsymbol Die WinUI 3 Gallery-App enthält interaktive Beispiele für WinUI-Steuerelemente und -Features. Rufen Sie die App aus dem Microsoft Store ab, oder durchsuchen Sie den Quellcode auf GitHub.

Um Mica oder Acrylmaterial auf Ihre App anzuwenden, legen Sie die SystemBackdrop Eigenschaft auf ein XAML-SystemBackdrop (in der Regel eines der integrierten Kulissen, MicaBackdrop oder DesktopAcrylicBackdrop) fest.

Diese Elemente weisen eine SystemBackdrop Eigenschaft auf:

In diesen Beispielen wird gezeigt, wie der Systemhintergrund in XAML festgelegt wird.

Mica

Mica wird in der Regel als Hintergrund für ein App-Fenster verwendet.

<Window
    ... >

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

</Window>

Mica Alt

Um die Mica Alt-Variante zu verwenden, legen Sie die Kind Eigenschaft auf BaseAlt.

<Window
    ... >

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

</Window>

Acrylic

Desktop-Acryl kann als Hintergrund für ein Fenster verwendet werden.

<Window
    ... >

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

</Window>

Acryl auf vorübergehender Benutzeroberfläche

Acryl wird auch häufig als Hintergrund für vorübergehende UI verwendet, z. B. ein Flyout. Sie können dies in XAML oder im Code festlegen, da Flyouts häufig dynamisch erstellt werden.

<Flyout
    ... >

    <Flyout.SystemBackdrop>
        <DesktopAcrylicBackdrop/>
    </Flyout.SystemBackdrop>
</Flyout>
Flyout flyout = new Flyout()
{
    SystemBackdrop = new DesktopAcrylicBackdrop()
};

Fortgeschritten: Nutzung eines System-Backdrop-Controllers

Hinweis

Ab Windows App SDK 1.3 können Sie Material anwenden, indem Sie die Eigenschaft Window.SystemBackdrop auf eine XAML-SystemBackdrop festlegen, wie im vorherigen Abschnitt beschrieben. Dies ist die empfohlene Methode, um ein Material für die meisten Apps anzuwenden.

Im restlichen Teil dieses Artikels wird gezeigt, wie Sie die Composition MicaController - und DesktopAcrylicController-APIs verwenden, die Ihnen mehr Kontrolle über das Hintergrundverhalten bieten.

Um ein Hintergrundmaterial in Ihrer App zu verwenden, können Sie einen der Controller verwenden, die die ISystemBackdropController-Schnittstelle implementieren (MicaController oder DesktopAcrylicController). Diese Klassen verwalten sowohl das Rendern des Systemhintergrundmaterials als auch die Verwaltung von Systemrichtlinien für das Material.

Um Mica als Hintergrundmaterial zu verwenden, erstellen Sie ein MicaController-Objekt. Zum Verwenden von Acryl erstellen Sie ein DesktopAcrylicController-Objekt. Die Einrichtung und der unterstützende Code sind für jeden Typ von Systemhintergrundmaterial gleich.

Erstellen eines MicaControllers

MicaController micaController;

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

Erstellen eines DesktopAcrylicController

DesktopAcrylicController acrylicController;

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

Der Controller reagiert standardmäßig auf die Systemdesigns „Hell“ und „Dunkel“. Sie können dieses Verhalten außer Kraft setzen, indem Sie die folgenden Eigenschaften für den Controller festlegen:

Hinweis

Nachdem Sie eine der vier Eigenschaften des Controllers angepasst haben, werden beim Ändern der zugeordneten SystemBackdropConfiguration.Theme-Werte keine standardmäßigen Light- oder Dark-Werte mehr angewendet. Sie müssen diese Eigenschaften manuell aktualisieren, um dem neuen Design zu entsprechen.

Um das Hintergrundmaterial in Ihrer App verwenden zu können, benötigen Sie Folgendes:

  • Systemunterstützung

    Das System, auf dem die App ausgeführt wird, muss das Hintergrundmaterial unterstützen. Rufen Sie die Methode MicaController.IsSupported oder DesktopAcrylicController.IsSupported auf, um sicherzustellen, dass das Hintergrundmaterial zur Laufzeit unterstützt wird.

  • Ein gültiges Ziel

    Sie müssen ein Ziel bereitstellen, das die ICompositionSupportsSystemBackdrop-Schnittstelle implementiert. In einer XAML-App implementiert das XAML-Window-Objekt diese Schnittstelle und wird als Hintergrundziel verwendet.

  • Ein SystemBackdropConfiguration-Objekt

    Das SystemBackdropConfiguration-Objekt stellt App-spezifische Richtlinieninformationen für den Systemhintergrundcontroller bereit, damit er das Systemhintergrundmaterial korrekt konfigurieren kann.

  • Ein DispatcherQueue-Objekt

    Sie benötigen eine verfügbare Windows.System.DispatcherQueue für den XAML-Hauptthread. Rufen Sie DispatcherQueue.EnsureSystemDispatcherQueue() auf, um sicherzustellen, dass eine vorhanden ist.

Beispiel: Verwenden von Mica mit einem Controller in einer WinUI-App

In diesem Beispiel wird gezeigt, wie Sie das Mica-Hintergrundmaterial mithilfe eines Controllers in einer XAML-App einrichten.

Tipp

Siehe auch diese Beispielprojekte zu GitHub:

C#: SampleSystemBackdropsWindow im WinUI-Katalog.

C++/WinRT: Windows App SDK Mica-Beispiel.

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