Windows 11 için masaüstü uygulamalarında Mica veya Akrilik malzemeler uygulama

Windows 11 içindeki materyaller, gerçek dünyadaki nesnelere benzeyen UX yüzeylerine uygulanan görsel efektlerdir. Mica ve Akrilik gibi tıkanıklık malzemeleri, etkileşimli kullanıcı arabirimi denetimlerinin altında temel katmanlar olarak kullanılır.

Mica, son derece kişiselleştirilmiş bir görünüm oluşturmak için kullanıcının temasını ve masaüstü duvar kağıdını içeren opak bir malzemedir. Mica, görselleştirmesini oluşturmak için arka plan duvar kağıdını yalnızca bir kez yakaladığından performans için tasarlanmıştır, bu nedenle özellikle başlık çubuğu alanında uygulamanızın temel katmanı için bunu öneririz.

Akrilik, buzlu camın etkisini çoğaltan yarı saydam bir malzemedir. Yalnızca açılır menüler ve bağlam menüleri gibi geçici, hızlı kapatılabilen yüzeyler için kullanılır.

Bu makalede, Windows App SDK/WinUI 3 XAML uygulamanızın temel katmanı olarak Mica veya Akrilik'in nasıl uygulanacağı açıklanmaktadır.

Uyarı

• Win32 uygulamasında arka plan malzemeleri kullanmak için, Windows 11 için Win32 masaüstü uygulamalarına Mica uygulama bölümüne bakın.
• Kullanıcı arabirimi öğelerine uygulanan uygulama içi akrilik için (pencere arka planına değil), bkz. Uygulama içi akrilik.

Arka plan malzemesi nasıl kullanılır?

• Önemli API'ler: Window.SystemBackdrop özelliği, MicaBackdrop sınıfı, DesktopAcrylicBackdrop sınıfı, SystemBackdropConfiguration sınıfı

WinUI 3 Galeri uygulamasını açın ve Sistem Arka Planları'nın çalışmasını görün

WinUI 3 Galeri uygulaması, WinUI denetimlerinin ve özelliklerinin etkileşimli örneklerini içerir. uygulamayı Microsoft Store adresinden alın veya GitHub üzerindeki kaynak koduna göz atın.

Uygulamanıza Mica veya Akrilik malzeme uygulamak için, SystemBackdrop özelliğini bir XAML SystemBackdrop (genellikle yerleşik arka planlardan biri, MicaBackdrop veya DesktopAcrylicBackdrop) olarak ayarlarsınız.

Bu öğelerin SystemBackdrop özelliği vardır:

• CommandBarFlyoutCommandBar.SystemBackdrop
• İçerikAdası.SistemArkaplanı
• DesktopWindowXamlSource.SystemBackdrop
• FlyoutBase.SystemBackdrop
• MenuFlyoutPresenter.SystemBackdrop
• Popup.SystemBackdrop
• Window.SystemBackdrop

Bu örneklerde XAML'de sistem arka planı nasıl ayarlanacağı gösterilmektedir.

Mica

Mica genellikle bir uygulama Penceresi için arka plan olarak kullanılır.

<Window
    ... >

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

</Window>

Mica Alt

Mica Alt değişkenini kullanmak için özelliğini olarak KindayarlayınBaseAlt.

<Window
    ... >

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

</Window>

Acrylic

Masaüstü Akrilik bir Pencere için arka plan olarak kullanılabilir.

<Window
    ... >

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

</Window>

Geçici kullanıcı arabiriminde akrilik

Akrilik, geçici kullanıcı arabirimi için açılır menü gibi arka plan olarak da yaygın olarak kullanılır. Flyout'lar genellikle dinamik olarak oluşturulduğundan, bunu XAML'de veya kodda ayarlayabilirsiniz.

<Flyout
    ... >

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

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

Gelişmiş: Sistem arka plan denetleyicisini kullanma

Uyarı

Windows App SDK 1.3'den başlayarak, önceki bölümde açıklandığı gibi Window.SystemBackdrop özelliğini bir XAML SystemBackdrop olarak ayarlayarak malzeme uygulayabilirsiniz. Çoğu uygulama için malzeme uygulamanın önerilen yolu budur.

Bu makalenin geri kalanında, arka plan davranışı üzerinde daha fazla denetim sağlayan Composition MicaController ve DesktopAcrylicController API'lerinin nasıl kullanılacağı gösterilmektedir.

Uygulamanızda arka plan malzemesi kullanmak için, ISystemBackdropController arabirimini (MicaController veya DesktopAcrylicController) uygulayan denetleyicilerden birini kullanabilirsiniz. Bu sınıflar hem sistem arka planı malzemesinin işlenmesini hem de malzeme için sistem ilkesinin işlenmesini yönetir.

Arka plan malzemeniz olarak Mica'yı kullanmak için bir MicaController nesnesi oluşturun. Akrilik kullanmak için bir DesktopAcrylicController nesnesi oluşturun. Kurulum ve destekleyici kod, her tür sistem arka planı malzemesi için aynıdır.

MicaController oluşturma

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

DesktopAcrylicController oluşturun

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

Denetleyici, sisteme varsayılan olarak Açık ve Koyu temalara tepki gösterir. Bu davranışı geçersiz kılmak için denetleyicide aşağıdaki özellikleri ayarlayabilirsiniz:

• FallbackColor
• ParlaklıkOpaklık
• RenkTon
• Renk Opaklığı

Uyarı

Denetleyicinin dört özelliğinden herhangi birini özelleştirdikten sonra, ilişkili SystemBackdropConfiguration.Theme değiştiğinde artık varsayılan Açık veya Koyu değerleri uygulamaz. Bu özellikleri yeni temayla eşleşecek şekilde el ile güncelleştirmeniz gerekir.

Uygulamanızda arka plan malzemesini kullanmak için aşağıdaki öğeler gereklidir:

• Sistem desteği

  Uygulamanın çalıştırıldığı sistem arka plan malzemesini desteklemelidir. Arka plan malzemesinin çalışma zamanında desteklendiğinden emin olmak için MicaController.IsSupported veya DesktopAcrylicController.IsSupported yöntemini çağırın.

• Geçerli bir hedef

  ICompositionSupportsSystemBackdrop arabirimini uygulayan bir hedef sağlamanız gerekir. XAML uygulamasında XAML Window bu arabirimi uygular ve arka plan hedefi olarak kullanılır.

• SystemBackdropConfiguration nesnesi

  SystemBackdropConfiguration, sistem arka plan malzemesini düzgün yapılandırmak için sisteme özgü ilke bilgilerini sistem arka planı denetleyicisine sağlar.

• DispatcherQueue nesnesi

  Ana XAML iş parçacığında kullanılabilir bir Windows.System.DispatcherQueue olması gerekir. Birinin mevcut olduğundan emin olmak için arayın DispatcherQueue.EnsureSystemDispatcherQueue() .

Örnek: WinUI uygulamasında denetleyici ile Mica kullanma

Bu örnekte, bir XAML uygulamasında denetleyici kullanarak Mica arka plan malzemesinin nasıl ayarlanacağı gösterilmektedir.

Tavsiye

Ayrıca, GitHub şu örnek projelere bakın:

C#: WinUI Galerisi'nde SampleSystemBackdropsWindow.

C++/WinRT: Windows App SDK Mica örneği.

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

İlgili makaleler

• Malzemelere genel bakış
• Uygulama içi akrilik
• Windows 11'de Materyaller
• Mika
• Akrilik
• Windows 11 için Win32 masaüstü uygulamalarında Mika Uygula