Dela via


Använd mica- eller akrylmaterial i skrivbordsappar för Windows 11

Material i Windows 11 är visuella effekter som appliceras på UX-ytor och som efterliknar verkliga föremål. Skymmande material, som mica och akryl, används som baslager under de interaktiva gränssnittskontrollerna.

Mica är ett täckande material som innehåller användarens tema och skrivbordsunderlägg för att skapa ett mycket personligt utseende. Mica är utformat för prestanda eftersom det bara avbildar bakgrundsunderlägget en gång för att skapa sin visualisering, så vi rekommenderar det för grundskiktet i din app, särskilt i området med namnlisten.

Akryl är ett halvtransparent material som replikerar effekten av frostat glas. Den används endast för tillfälliga, lättslämda ytor som utfällbara menyer och snabbmenyer.

Den här artikeln beskriver hur du använder Mica eller Akryl som basskikt för din Windows App SDK/WinUI 3 XAML-app.

Anmärkning

Så här använder du ett bakgrundsmaterial

WinUI 3-galleriikon WinUI 3-galleriappen innehåller interaktiva exempel på WinUI-kontroller och funktioner. Hämta appen från Microsoft Store eller bläddra i källkoden på GitHub.

Om du vill använda Mica- eller Akrylmaterial i din app ställer du in egenskapen SystemBackdrop till en XAML-SystemBackdrop- (vanligtvis en av de inbyggda bakgrunderna, MicaBackdrop eller DesktopAcrylicBackdrop).

Dessa element har en SystemBackdrop egenskap:

De här exemplen visar hur du ställer in systembakgrunden i XAML.

Mica

Mica används vanligtvis som bakgrund för ett appfönster.

<Window
    ... >

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

</Window>

Mica Alt

Om du vill använda Mica Alt-varianten anger du Kind egenskapen till BaseAlt.

<Window
    ... >

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

</Window>

Acrylic

Desktop Acrylic kan användas som bakgrund för ett fönster.

<Window
    ... >

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

</Window>

Akryl i tillfälligt användargränssnitt

Akryl används också ofta som bakgrund för tillfälligt användargränssnitt, som en utfälld skärm. Du kan ange detta i XAML eller i kod, eftersom utfällbara objekt ofta skapas dynamiskt.

<Flyout
    ... >

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

Avancerat: Så här använder du en systembakgrundskontrollant

Anmärkning

Från och med Windows App SDK 1.3 kan du använda material genom att ange egenskapen Window.SystemBackdrop till en XAML-SystemBackdrop enligt beskrivningen i föregående avsnitt. Det här är det rekommenderade sättet att använda ett material för de flesta appar.

Resten av den här artikeln visar hur du använder API:erna Composition MicaController och DesktopAcrylicController , vilket ger dig mer kontroll över bakgrundsbeteendet.

Om du vill använda ett bakgrundsmaterial i din app kan du använda en av de kontrollanter som implementerar ISystemBackdropController-gränssnittet (MicaController eller DesktopAcrylicController). Dessa klasser hanterar både återgivningen av systemets bakgrundsmaterial samt hanteringen av systempolicyn för materialet.

Om du vill använda Mica som bakgrundsmaterial skapar du ett MicaController- objekt. Om du vill använda Akryl skapar du ett DesktopAcrylicController--objekt. Den konfigurerade och stödjande koden är densamma för varje typ av systembakgrundsmaterial.

Skapa en MicaController

MicaController micaController;

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

Skapa en DesktopAcrylicController

DesktopAcrylicController acrylicController;

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

Styrenheten reagerar som standard på systemets ljusa och mörka teman. Om du vill åsidosätta det här beteendet kan du ange följande egenskaper på kontrollanten:

Anmärkning

När du har anpassat någon av kontrollantens fyra egenskaper tillämpas inte längre standardvärdena Ljus eller Mörk när den associerade SystemBackdropConfiguration.Theme ändras. Du måste uppdatera egenskaperna manuellt för att matcha det nya temat.

För att kunna använda bakgrundsmaterialet i din app krävs följande:

  • Systemstöd

    Systemet där appen körs måste ha stöd för bakgrundsmaterialet. Anropa metoden MicaController.IsSupported eller DesktopAcrylicController.IsSupported för att säkerställa att bakgrundsmaterialet stöds under körning.

  • Ett giltigt mål

    Du måste ange ett mål som implementerar gränssnittet ICompositionSupportsSystemBackdrop. I en XAML-app implementerar XAML Window det här gränssnittet och används som bakgrundsmål.

  • Ett SystemBackdropConfiguration-objekt

    SystemBackdropConfiguration ger systembakgrundskontrollanten appspecifik principinformation för att korrekt konfigurera systemets bakgrundsmaterial.

  • Ett DispatcherQueue-objekt

    Du behöver en tillgänglig Windows.System.DispatcherQueue på XAML-huvudtråden. Anropa DispatcherQueue.EnsureSystemDispatcherQueue() för att se till att det finns en.

Exempel: Använda Mica med en kontrollant i en WinUI-app

Det här exemplet visar hur du konfigurerar Bakgrundsmaterial för Mica med hjälp av en styrenhet i en XAML-app.

Tips/Råd

Se även följande exempelprojekt på GitHub:

C#: SampleSystemBackdropsWindow i WinUI-galleriet.

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

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