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 Windows App SDK/WinUI 3 XAML.

Uwaga / Notatka

• Aby użyć materiałów tła w aplikacji Win32, zapoznaj się z sekcją Zastosowanie Miki w aplikacjach klasycznych Win32 dla Windows 11.
• W przypadku akrylu w aplikacji stosowanego do elementów interfejsu użytkownika (a nie tła okna), zobacz Akryl w aplikacji.

Jak używać materiału tła

• Ważne interfejsy API: Właściwość Window.SystemBackdrop, Klasa MicaBackdrop, Klasa DesktopAcrylicBackdrop, Klasa SystemBackdropConfiguration

Otwórz aplikację Galerii WinUI 3 i zobacz działanie teł systemu

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ść:

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

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

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

Uwaga / Notatka

Począwszy od Windows App SDK 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

C#

MicaController micaController;

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

C++

// namespace MUCSB = Microsoft::UI::Composition::SystemBackdrops;

winrt::MUCSB::MicaController m_backdropController{ nullptr };

void SetBackground(bool useMicaAlt)
{
    if (winrt::MUCSB::MicaController::IsSupported())
    {
        ...
        m_backdropController = winrt::MUCSB::MicaController();
        m_backdropController.Kind(useMicaAlt 
            ? winrt::MUCSB::MicaKind::BaseAlt 
            : winrt::MUCSB::MicaKind::Base);
        ...
    }
}

Tworzenie kontrolera DesktopAcrylicController

C#

DesktopAcrylicController acrylicController;

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

C++

// namespace MUCSB = Microsoft::UI::Composition::SystemBackdrops;

winrt::MUCSB::DesktopAcrylicController m_backdropController{ nullptr };

void SetBackground(bool useAcrylicThin)
{
    if (winrt::MUCSB::DesktopAcrylicController::IsSupported())
    {
        ...
        m_backdropController = winrt::MUCSB::DesktopAcrylicController();
        m_backdropController.Kind(useAcrylicThin 
            ? winrt::MUCSB::DesktopAcrylicKind::Thin 
            : winrt::MUCSB::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:

• Kolor zastępczy
• Jasność Przezroczystość
• TintColor
• KrycieKoloru

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 Windows App SDK.

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

C++

// pch.h
...
#include <winrt/Microsoft.UI.Composition.SystemBackdrops.h>
#include <winrt/Windows.System.h>
#include <dispatcherqueue.h>

// MainWindow.xaml.h
...
namespace winrt
{
    namespace MUC = Microsoft::UI::Composition;
    namespace MUCSB = Microsoft::UI::Composition::SystemBackdrops;
    namespace MUX = Microsoft::UI::Xaml;
    namespace WS = Windows::System;
}
...
struct MainWindow : MainWindowT<MainWindow>
{
    winrt::MUCSB::SystemBackdropConfiguration m_configuration{ nullptr };
    winrt::MUCSB::MicaController m_backdropController{ nullptr };
    winrt::MUX::Window::Activated_revoker m_activatedRevoker;
    winrt::MUX::Window::Closed_revoker m_closedRevoker;
    winrt::MUX::FrameworkElement::ActualThemeChanged_revoker m_themeChangedRevoker;
    winrt::MUX::FrameworkElement m_rootElement{ nullptr };
    winrt::WS::DispatcherQueueController m_dispatcherQueueController{ nullptr };

    MainWindow::MainWindow()
    {
        InitializeComponent();

        SetBackground();

        m_closedRevoker = this->Closed(winrt::auto_revoke, [&](auto&&, auto&&)
        {
            if (nullptr != m_backdropController)
            {
                m_backdropController.Close();
                m_backdropController = nullptr;
            }

            if (nullptr != m_dispatcherQueueController)
            {
                m_dispatcherQueueController.ShutdownQueueAsync();
                m_dispatcherQueueController = nullptr;
            }
        });
    }

    void SetBackground()
    {
        if (winrt::MUCSB::MicaController::IsSupported())
        {
            // We ensure that there is a Windows.System.DispatcherQueue on the current thread.
            // Always check if one already exists before attempting to create a new one.
            if (nullptr == winrt::WS::DispatcherQueue::GetForCurrentThread() &&
                nullptr == m_dispatcherQueueController)
            {
                m_dispatcherQueueController = CreateSystemDispatcherQueueController();
            }

            // Setup the SystemBackdropConfiguration object.
            SetupSystemBackdropConfiguration();

            // Setup Mica on the current Window.
            m_backdropController = winrt::MUCSB::MicaController();
            m_backdropController.SetSystemBackdropConfiguration(m_configuration);
            m_backdropController.AddSystemBackdropTarget(
                this->m_inner.as<winrt::MUC::ICompositionSupportsSystemBackdrop>());
        }
    }

    winrt::WS::DispatcherQueueController CreateSystemDispatcherQueueController()
    {
        DispatcherQueueOptions options
        {
            sizeof(DispatcherQueueOptions),
            DQTYPE_THREAD_CURRENT,
            DQTAT_COM_NONE
        };

        ::ABI::Windows::System::IDispatcherQueueController* ptr{ nullptr };
        winrt::check_hresult(CreateDispatcherQueueController(options, &ptr));
        return { ptr, take_ownership_from_abi };
    }

    void SetupSystemBackdropConfiguration()
    {
        m_configuration = winrt::MUCSB::SystemBackdropConfiguration();

        // Activation state.
        m_activatedRevoker = this->Activated(winrt::auto_revoke,
            [&](auto&&, MUX::WindowActivatedEventArgs const& args)
            {
                m_configuration.IsInputActive(
                    winrt::MUX::WindowActivationState::Deactivated != args.WindowActivationState());
            });

        // Initial state.
        m_configuration.IsInputActive(true);

        // Application theme.
        m_rootElement = this->Content().try_as<winrt::MUX::FrameworkElement>();
        if (nullptr != m_rootElement)
        {
            m_themeChangedRevoker = m_rootElement.ActualThemeChanged(winrt::auto_revoke,
                [&](auto&&, auto&&)
                {
                    m_configuration.Theme(
                        ConvertToSystemBackdropTheme(m_rootElement.ActualTheme()));
                });

            // Initial state.
            m_configuration.Theme(
                ConvertToSystemBackdropTheme(m_rootElement.ActualTheme()));
        }
    }

    winrt::MUCSB::SystemBackdropTheme ConvertToSystemBackdropTheme(
        winrt::MUX::ElementTheme const& theme)
    {
        switch (theme)
        {
        case winrt::MUX::ElementTheme::Dark:
            return winrt::MUCSB::SystemBackdropTheme::Dark;
        case winrt::MUX::ElementTheme::Light:
            return winrt::MUCSB::SystemBackdropTheme::Light;
        default:
            return winrt::MUCSB::SystemBackdropTheme::Default;
        }
    }
    ...
};
...

Powiązane artykuły

• Omówienie materiałów
• Akryl w aplikacji
• Materiały w Windows 11
• Mika
• akryl
• Zastosuj Mica w aplikacjach Win32 na pulpicie dla Windows 11