Stosowanie materiałów Mica lub akrylowych w aplikacjach komputerowych dla Windows 11

Materiały w Windows 11 to efekty wizualne stosowane na powierzchniach interfejsu użytkownika, które przypominają rzeczywiste artefakty. Materiały okludujące, takie jak mikka i akryl, są używane jako warstwy bazowe pod interaktywnymi kontrolkami interfejsu użytkownika.

Mica jest nieprzezroczystym materiałem, który zawiera motyw użytkownika i tapetę pulpitu, tworząc bardzo spersonalizowany wygląd. Mica została zaprojektowana z myślą o wydajności, ponieważ przechwytuje tapetę tła tylko raz, aby utworzyć swoją wizualizację, dlatego zalecamy jej użycie na warstwie bazowej aplikacji, szczególnie w pasku tytułowym.

Akryl jest półprzezroczystym materiałem, który replikuje efekt matowego szkła. Jest używany tylko w przypadku przejściowych, łatwo znikających powierzchni, takich jak wyskakujące okienka i menu kontekstowe.

W tym artykule opisano sposób stosowania micy lub akrylu jako podstawowej warstwy aplikacji Zestaw SDK do aplikacji systemu Windows/WinUI 3 XAML.

Uwaga / Notatka

Jak używać materiału tła

Ikona galerii WinUI 3 Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady kontrolek i funkcji WinUI. Pobierz aplikację z Microsoft Store lub przejrzyj kod źródłowy GitHub.

Aby zastosować materiał typu mica lub akrylowy do aplikacji, należy ustawić właściwość SystemBackdrop na XAML SystemBackdrop (zazwyczaj jeden z wbudowanych teł, MicaBackdrop lub DesktopAcrylicBackdrop).

Te elementy mają SystemBackdrop właściwość:

W tych przykładach pokazano, jak ustawić tło systemu w języku XAML.

Mica

Mica jest zwykle używana jako tło dla okna aplikacji.

<Window
    ... >

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

</Window>

Mica Alt

Aby użyć wariantu Mica Alt, ustaw Kind właściwość na BaseAlt.

<Window
    ... >

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

</Window>

Acrylic

Akryl desktopowy może być używany jako tło dla okna.

<Window
    ... >

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

</Window>

Akryl w przejściowym interfejsie użytkownika

Akryl jest również powszechnie stosowany jako tło dla tymczasowego interfejsu użytkownika, jak element wysuwany. Można to skonfigurować w języku XAML lub w kodzie, ponieważ wysuwane okna są często tworzone dynamicznie.

<Flyout
    ... >

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

Stosowanie tła systemu do dowolnego elementu XAML

  • Ważne interfejsy API: SystemBackdropElement
Ikona galerii WinUI 3 Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady kontrolek i funkcji WinUI. Pobierz aplikację z Microsoft Store lub przejrzyj kod źródłowy GitHub.

Właściwość Window.SystemBackdrop powoduje zastosowanie materiału tła na całe okno. Jeśli musisz zastosować micę lub akryl do określonego regionu interfejsu użytkownika — takiego jak karta, panel lub dowolny ograniczony obszar — zamiast tego użyj kontrolki SystemBackdropElement .

SystemBackdropElement to kontrolka XAML, która wyświetla materiał tła systemowego w swoim obszarze. Możesz umieścić go w dowolnym miejscu w drzewie XAML, jawnie określić jego rozmiar lub pozwolić mu wypełnić element nadrzędny, a także użyć CornerRadius, aby zastosować zaokrąglone narożniki.

Używanie elementu SystemBackdropElement w języku XAML

Umieść SystemBackdropElement jako element równorzędny za inną treścią lub jako host tła wewnątrz Grid. Ustaw jego SystemBackdrop właściwość na żądany materiał.

<Grid Width="300" Height="200">
    <SystemBackdropElement CornerRadius="8">
        <SystemBackdropElement.SystemBackdrop>
            <DesktopAcrylicBackdrop />
        </SystemBackdropElement.SystemBackdrop>
    </SystemBackdropElement>

    <!-- Content rendered on top of the backdrop -->
    <Button HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Content="Click Me" />
</Grid>

Przełącz materiał tła w czasie wykonywania

Możesz zmienić właściwość SystemBackdrop w czasie wykonywania. W tym przykładzie użytkownik może wybrać warianty akrylowe i dwa warianty mica:

private void OnBackdropTypeChanged(string backdropType)
{
    DynamicBackdropHost.SystemBackdrop = backdropType switch
    {
        "Mica"    => new MicaBackdrop { Kind = MicaKind.Base },
        "MicaAlt" => new MicaBackdrop { Kind = MicaKind.BaseAlt },
        _         => new DesktopAcrylicBackdrop()
    };
}

Uwaga / Notatka

SystemBackdropElement stosuje tło systemowe do elementu na stronie, a nie do okna. W przypadku tła dla całego okna użyj właściwości Window.SystemBackdrop, jak opisano wcześniej w tym artykule. Te dwa podejścia są niezależne i mogą być używane razem w tej samej aplikacji.

Zaawansowane: Jak używać kontrolera tła systemu

Uwaga / Notatka

Począwszy od Zestaw SDK do aplikacji systemu Windows 1.3, można zastosować materiał, ustawiając właściwość Window.SystemBackdrop na właściwość XAML SystemBackdrop zgodnie z opisem w poprzedniej sekcji. Jest to zalecany sposób stosowania materiału dla większości aplikacji.

W pozostałej części tego artykułu pokazano, jak używać interfejsów API Composition MicaController i DesktopAcrylicController , co zapewnia większą kontrolę nad zachowaniem tła.

Aby użyć materiału tła w aplikacji, można użyć jednego z kontrolerów, który implementuje interfejs ISystemBackdropController (MicaController lub DesktopAcrylicController). Klasy te zarządzają zarówno wyświetlaniem materiału tła systemowego, jak i obsługą polityki systemowej dla materiału.

Aby użyć mica jako materiału tła, utwórz obiekt MicaController. Aby użyć akrylu, utwórz obiekt DesktopAcrylicController. Konfiguracja i kod pomocniczy są takie same dla każdego typu materiału tła systemu.

Tworzenie kontrolera MicaController

MicaController micaController;

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

Tworzenie kontrolera DesktopAcrylicController

DesktopAcrylicController acrylicController;

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

Kontroler domyślnie reaguje na systemowe motywy jasne i ciemne. Aby zastąpić to zachowanie, można ustawić następujące właściwości na kontrolerze:

Uwaga / Notatka

Po dostosowaniu którejkolwiek z czterech właściwości kontrolera przestaje stosować domyślne wartości jasne i ciemne, kiedy zmienią się powiązane ustawienia SystemBackdropConfiguration.Theme. Aby dopasować nowy motyw, należy ręcznie zaktualizować te właściwości.

Aby można było używać materiału tła w aplikacji, wymagane są następujące elementy:

  • obsługa systemu

    System, w którym działa aplikacja, musi obsługiwać materiał w tle. Aby upewnić się, że materiał tła jest obsługiwany w czasie wykonywania, wywołaj metodę MicaController.IsSupported lub DesktopAcrylicController.IsSupported.

  • Prawidłowy cel

    Należy podać element docelowy, który implementuje interfejs ICompositionSupportsSystemBackdrop. W aplikacji XAML okno XAML implementuje ten interfejs i jest używane jako tło docelowe.

  • Obiekt SystemBackdropConfiguration

    SystemBackdropConfiguration udostępnia kontrolerowi tła systemu informacje o zasadach specyficznych dla aplikacji w celu prawidłowego skonfigurowania materiału tła systemu.

  • Obiekt DispatcherQueue

    Potrzebujesz dostępnego elementu Windows.System.DispatcherQueue w głównym wątku XAML. Wywołaj DispatcherQueue.EnsureSystemDispatcherQueue(), aby upewnić się, że coś istnieje.

Przykład: używanie Mica z kontrolerem w aplikacji WinUI

W tym przykładzie pokazano, jak skonfigurować materiał tła Mica przy użyciu kontrolera w aplikacji XAML.

Wskazówka

Zobacz również te przykładowe projekty w GitHub:

C#: SampleSystemBackdropsWindow w galerii WinUI.

C++/WinRT: przykładowa aplikacja Mica dla Zestaw SDK do aplikacji systemu Windows.

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