Bagikan melalui

Menerapkan materi Mica atau Akrilik di aplikasi desktop untuk Windows 11

Materials di Windows 11 adalah efek visual yang diterapkan pada permukaan antarmuka pengguna yang menyerupai artefak kehidupan nyata. Bahan yang menutupi, seperti Mika dan Akrilik, digunakan sebagai lapisan dasar di bawah kontrol UI interaktif.

Mica adalah bahan buram yang menggabungkan tema pengguna dan wallpaper desktop untuk menciptakan penampilan yang sangat dipersonalisasi. Mica dirancang untuk performa karena hanya menangkap wallpaper latar belakang sekali untuk membuat visualisasinya, jadi kami merekomendasikannya untuk lapisan fondasi aplikasi Anda, terutama di area bilah judul.

Akrilik adalah bahan semi transparan yang mereplikasi efek kaca beku. Ini hanya digunakan untuk permukaan sementara yang mematikan cahaya seperti flyout dan menu konteks.

Artikel ini menjelaskan cara menerapkan Mica atau Acrylic sebagai lapisan dasar aplikasi XAML Windows App SDK/WinUI 3 Anda.

Nota

Cara menggunakan bahan backdrop

Buka aplikasi Galeri WinUI 3 dan lihat Latar Belakang Sistem beraksi

Ikon Galeri WinUI 3 Aplikasi Galeri WinUI 3 mencakup contoh interaktif kontrol dan fitur WinUI. Dapatkan aplikasi dari Microsoft Store atau telusuri kode sumber pada GitHub.

Untuk menerapkan material Mica atau Acrylic pada aplikasi Anda, atur properti SystemBackdrop ke XAML SystemBackdrop (biasanya, salah satu latar belakang bawaan, seperti MicaBackdrop atau DesktopAcrylicBackdrop).

Elemen-elemen ini memiliki SystemBackdrop properti:

Contoh-contoh ini menunjukkan cara mengatur latar belakang sistem di XAML.

Mica

Mica biasanya digunakan sebagai latar untuk jendela aplikasi.

<Window
    ... >

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

</Window>

Mica Alt

Untuk menggunakan varian Mica Alt, atur properti Kind ke BaseAlt.

<Window
    ... >

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

</Window>

Acrylic

Akrilik Desktop dapat digunakan sebagai latar belakang untuk Jendela.

<Window
    ... >

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

</Window>

Akrilik dalam Antarmuka Pengguna Sementara

Akrilik juga umumnya digunakan sebagai latar belakang untuk UI sementara, seperti flyout. Anda dapat mengatur ini di XAML atau dalam kode, karena flyout sering dibuat secara dinamis.

<Flyout
    ... >

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

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

Tingkat Lanjut: Cara menggunakan pengontrol latar belakang sistem

Nota

Dimulai dengan Windows App SDK 1.3, Anda dapat menerapkan materi dengan mengatur properti Window.SystemBackdrop ke XAML SystemBackdrop seperti yang dijelaskan di bagian sebelumnya. Ini adalah cara yang disarankan untuk menerapkan materi untuk sebagian besar aplikasi.

Sisa artikel ini menunjukkan cara menggunakan API MicaController dan DesktopAcrylicController, yang memberi pengguna lebih banyak kontrol atas perilaku latar belakang.

Untuk menggunakan materi backdrop di aplikasi, Anda dapat menggunakan salah satu pengontrol yang mengimplementasikan antarmuka ISystemBackdropController (MicaController atau DesktopAcrylicController). Kelas-kelas ini mengelola pemrosesan materi latar belakang sistem serta penanganan kebijakan sistem untuk materi tersebut.

Untuk menggunakan Mica sebagai bahan backdrop Anda, buat objek MicaController . Untuk menggunakan Acrylic, buat objek DesktopAcrylicController . Pengaturan dan kode pendukung adalah sama untuk setiap jenis material latar belakang sistem.

Membuat MicaController

MicaController micaController;

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

Membuat sebuah DesktopAcrylicController

DesktopAcrylicController acrylicController;

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

Pengontrol bereaksi terhadap tema Terang dan Gelap sistem secara default. Untuk mengambil alih perilaku ini, Anda dapat mengatur properti berikut pada pengontrol:

Nota

Setelah menyesuaikan salah satu dari empat properti pengontrol, properti tersebut tidak lagi menerapkan nilai Terang atau Gelap default saat SystemBackdropConfiguration.Theme terkait berubah. Anda perlu memperbarui properti tersebut secara manual agar sesuai dengan tema baru.

Untuk menggunakan materi backdrop di aplikasi Anda, item berikut diperlukan:

Contoh: Menggunakan Mica dengan pengontrol di aplikasi WinUI

Contoh ini menunjukkan cara menyiapkan materi backdrop Mica menggunakan pengontrol di aplikasi XAML.

Tip

Selain itu, lihat contoh proyek ini di GitHub:

C#: SampleSystemBackdropsWindow di Galeri WinUI.

C++/WinRT: Windows App SDK sampel 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