Sdílet prostřednictvím

Použití materiálů Mica nebo Akryl v desktopových aplikacích pro Windows 11

Materiály ve Windows 11 jsou vizuální efekty aplikované na povrchy uživatelského rozhraní, které připomínají skutečné artefakty. Podkladové materiály, jako jsou Mica a Akryl, se používají jako základní vrstvy pod interaktivními ovládacími prvky uživatelského rozhraní.

Mica je neprůzný materiál, který zahrnuje motiv uživatele a tapetu na plochu, aby se vytvořil vysoce přizpůsobený vzhled. Mica je navržená pro výkon, protože zachytí tapetu na pozadí jen jednou za účelem vytvoření vizualizace, proto ji doporučujeme pro základní vrstvu vaší aplikace, zejména v oblasti záhlaví.

Akrylový je poloprůhledný materiál, který replikuje efekt zamrzlého skla. Používá se jenom pro přechodné, snadno zavíratelné plochy, jako jsou rozbalovací a kontextové nabídky.

Tento článek popisuje, jak použít Mica nebo Akryl jako základní vrstvu vaší Windows App SDK/WinUI 3 XAML aplikace.

Poznámka:

Jak používat podkladový materiál

Otevřete aplikaci Galerie WinUI 3 a prohlédněte si systémová pozadí v akci

Ikona galerie WinUI 3 Aplikace Galerie WinUI 3 obsahuje interaktivní příklady ovládacích prvků a funkcí WinUI. Získejte aplikaci z Microsoft Store nebo vyhledejte zdrojový kód na GitHub.

Chcete-li použít materiál Mica nebo Akryl ve vaší aplikaci, nastavíte vlastnost SystemBackdrop na XAML SystemBackdrop (obvykle jedno z předdefinovaných pozadí, MicaBackdrop nebo DesktopAcrylicBackdrop).

Tyto prvky mají SystemBackdrop vlastnost:

Tyto příklady ukazují, jak nastavit pozadí systému v XAML.

Mica

Mica se obvykle používá jako pozadí okna aplikace.

<Window
    ... >

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

</Window>

Mica Alt

Pokud chcete použít variantu Mica Alt, nastavte Kind vlastnost na BaseAlthodnotu.

<Window
    ... >

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

</Window>

Acrylic

Desktopový akryl lze použít jako pozadí okna.

<Window
    ... >

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

</Window>

Akryl v přechodném uživatelském rozhraní

Akryl se také běžně používá jako pozadí pro dočasné uživatelské rozhraní, jako je vyskakovací okno. Můžete to nastavit v XAML nebo v kódu, protože vyskakovací okna se často vytvářejí dynamicky.

<Flyout
    ... >

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

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

Pokročilé: Jak používat systémový kontroler pozadí

Poznámka:

Počínaje Windows App SDK 1.3 můžete použít materiál tak, že nastavíte vlastnost Window.SystemBackdrop na XAML SystemBackdrop, jak je popsáno v předchozí části. Toto je doporučený způsob, jak použít materiál pro většinu aplikací.

Zbývající část tohoto článku ukazuje, jak používat rozhraní API Composition MicaController a DesktopAcrylicController , která vám dává větší kontrolu nad chováním pozadí.

Pokud chcete v aplikaci použít podkladový materiál, můžete použít jeden z kontrolerů, který implementuje rozhraní ISystemBackdropController (MicaController nebo DesktopAcrylicController). Tyto třídy spravují vykreslování materiálů systémových pozadí i řízení systémových zásad pro materiál.

Chcete-li použít Mica jako podkladový materiál, vytvořte objekt MicaController. Chcete-li použít akryl, vytvořte DesktopAcrylicController objektu. Nastavení a podpůrný kód je pro každý typ systémového podkladového materiálu stejný.

Vytvoření MicaControlleru

MicaController micaController;

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

Vytvořte DesktopAcrylicController

DesktopAcrylicController acrylicController;

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

Kontroler ve výchozím nastavení reaguje na systémové světlé a tmavé motivy. Chcete-li toto chování přepsat, můžete v kontroleru nastavit následující vlastnosti:

Poznámka:

Po přizpůsobení všech čtyř vlastností kontroleru už při změně přidružené hodnoty SystemBackdropConfiguration.Theme nepoužijí výchozí světlé nebo tmavé hodnoty. Tyto vlastnosti je potřeba aktualizovat ručně tak, aby odpovídaly novému motivu.

Aby bylo možné v aplikaci použít podkladový materiál, jsou vyžadovány následující položky:

  • podpora systému

    Systém, na kterém aplikace běží, musí podporovat materiál pozadí. Zavolejte metodu MicaController.IsSupported nebo DesktopAcrylicController.IsSupported, abyste zajistili podporu podkladového materiálu během provozu.

  • platný cíl

    Musíte zadat cíl, který implementuje rozhraní ICompositionSupportsSystemBackdrop. V aplikaci XAML Okno XAML implementuje toto rozhraní a používá se jako prostředí pozadí.

  • objekt SystemBackdropConfiguration

    SystemBackdropConfiguration poskytuje řadič backdrop systému s informacemi o zásadách specifických pro aplikace, aby správně nakonfiguroval materiál pozadí systému.

  • DispatcherQueue objekt

    Potřebujete dostupnou Windows.System.DispatcherQueue v hlavním vlákně XAML. Zavolejte DispatcherQueue.EnsureSystemDispatcherQueue(), abyste zajistili, že existuje.

Příklad: Použití Micy s kontrolerem v aplikaci WinUI

Tento příklad ukazuje, jak nastavit materiál pozadí Mica pomocí kontroleru v aplikaci XAML.

Návod

Podívejte se také na tyto ukázkové projekty na GitHub:

C#: SampleSystemBackdropsWindow v galerii WinUI.

C++/WinRT: Windows App SDK ukázka Mica.

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