Bagikan melalui

Menerapkan Mica di aplikasi desktop Win32 untuk Windows 11

  • Artikel

Mica adalah bahan buram yang menggabungkan tema pengguna dan wallpaper desktop untuk menciptakan penampilan yang sangat dipersonalisasi. Saat pengguna memindahkan jendela di seluruh layar, materi Mica secara dinamis beradaptasi untuk membuat visualisasi yang kaya menggunakan wallpaper di bawah aplikasi. Selain itu, materi membantu pengguna fokus pada tugas saat ini dengan kembali ke warna netral ketika aplikasi tidak aktif.

Artikel ini menjelaskan cara menerapkan Mica sebagai lapisan dasar aplikasi Win32 Anda, memprioritaskan aplikasi dan visibilitas di area bilah judul. Untuk informasi selengkapnya tentang lapisan aplikasi dengan Mica, lihat bahan Mica.

Prasyarat

Untuk menerapkan Mica ke aplikasi Win32 untuk Windows 11, Anda perlu menggunakan SDK Aplikasi Windows. Anda akan memerlukan item berikut:

Cara menggunakan Mica di Aplikasi Win32

Untuk menggunakan mica di aplikasi, Anda menggunakan kelas MicaController . Kelas ini mengelola penyajian bahan backdrop sistem serta penanganan kebijakan sistem untuk bahan mika.

MicaController bereaksi terhadap tema Terang dan Gelap sistem secara default. Untuk mengambil alih perilaku ini, Anda dapat meneruskan properti berikut ke MicaController:

Tip

Kode di bagian ini diambil dari sampel SDK Aplikasi Windows Win32 Mica di GitHub. Lihat repositori GitHub untuk kode lengkap. Contoh-contoh ini menggunakan C++/WinRT.

Untuk mengaktifkan Mica, Anda memerlukan referensi ke SDK Aplikasi Windows, Compositor, dan DispatcherQueue.

Contoh ini menunjukkan cara melakukan hal berikut untuk menyiapkan aplikasi yang tidak dikemas:

Dari WinMain.cpp

int __stdcall WinMain(_In_ HINSTANCE, _In_opt_ HINSTANCE,  _In_ PSTR, _In_ int)
{
    // Initialize WinRt Instance
    winrt::init_apartment();

    // Enable referencing the WindowsAppSDK from an unpackaged app.
    Utilities::WindowsAppSDKBootstrapperContext sdkContext;

    // Register Window class before making the window.
    MicaWindow::RegisterWindowClass();

    // Mica requires a compositor, which also requires a dispatcher queue.
    auto controller = Utilities::CreateDispatcherQueueControllerForCurrentThread();
    auto compositor = winrt::Compositor();

    // Create your window...
    ...
}

Dari MicaWindow.cpp

void MicaWindow::RegisterWindowClass()
{
    auto instance = winrt::check_pointer(GetModuleHandleW(nullptr));
    WNDCLASSEX wcex = { sizeof(wcex) };
    wcex.style = CS_HREDRAW | CS_VREDRAW;
    wcex.lpfnWndProc = WndProc;
    wcex.hInstance = instance;
    wcex.hIcon = LoadIconW(instance, IDI_APPLICATION);
    wcex.hCursor = LoadCursorW(nullptr, IDC_ARROW);
    wcex.hbrBackground = (HBRUSH)(COLOR_WINDOW + 1);
    wcex.lpszClassName = ClassName.c_str();
    wcex.hIconSm = LoadIconW(wcex.hInstance, IDI_APPLICATION);
    winrt::check_bool(RegisterClassExW(&wcex)); // check if the window class was registered successfully
}

Metode winrt::init_apartment ini multi-utas secara default. Jika aplikasi Anda memerlukan satu utas, seperti Sampel WebView2, Anda dapat dengan mudah mengatur jenisnya.

winrt::init_apartment(winrt::apartment_type::single_threaded);

Sekarang Anda dapat menggunakan CreateWindowEx() fungsi untuk membuat jendela. Kemudian, Anda harus membuat target jendela dan mengaturnya sebagai akar untuk menentukan lapisan mana yang akan diterapkan Mica. Terakhir, tegaskan bahwa Mica didukung oleh jendela dan target.

Sampel Win32 Mica membuat kelas DesktopWindow dan MicaWindow untuk melakukan pekerjaan ini. Kelas-kelas ini mendefinisikan: ClassName, windowTitle, m_target, m_micaController, dan m_isMicaSupported.

Dari WinMain.cpp

// Mica window is inherited from the MicaWindow class, which is an extension of the DesktopWindow Class.
// Here, we initialize the main window and set the title.
   auto window = MicaWindow(compositor, L"Hello, Mica!");

Dari MicaWindow.cpp

// Create the main window and enable Mica.
MicaWindow::MicaWindow(const winrt::Compositor& compositor, const std::wstring& windowTitle)
{
    auto instance = winrt::check_pointer(GetModuleHandleW(nullptr));
    WINRT_ASSERT(!m_window); // check that window is not initialized
    WINRT_VERIFY(
        // Window Properties
        CreateWindowExW(
            WS_EX_COMPOSITED,
            ClassName.c_str(), // declared in MicaWindow.h and defined above
            windowTitle.c_str(),
            WS_OVERLAPPEDWINDOW,
            CW_USEDEFAULT,
            CW_USEDEFAULT, 
            800, 600, 
            nullptr, 
            nullptr, 
            instance, 
            this
        ));

    // Check that the window was created successfully.
    WINRT_ASSERT(m_window);

    ShowWindow(m_window, SW_SHOWDEFAULT);
    UpdateWindow(m_window);

    // The Mica controller needs to set a target with a root to recognize the visual base layer.
    m_target = CreateWindowTarget(compositor);

    // Need to set a root before we can enable Mica.
    m_target.Root(compositor.CreateContainerVisual());

    m_micaController = winrt::MicaController();
    m_isMicaSupported = m_micaController.SetTarget(winrt::Microsoft::UI::WindowId{ reinterpret_cast<uint64_t>(m_window) }, m_target);
}

Cara menggunakan Mica di aplikasi Win32 WebView2

Prinsip-prinsip dasar penerapan Mica konsisten di sebagian besar aplikasi Win32. Proses untuk WebView2 mengikuti langkah-langkah dasar dari instruksi Win32 yang ditunjukkan sebelumnya. Namun, dalam hal ini Anda harus menentukan satu proses utas dari fitur WinRT init_apartment .

Tip

Kode di bagian ini diambil dari sampel SDK Aplikasi Windows WebView2 Mica di GitHub. Lihat repositori GitHub untuk kode lengkap.

Untuk memulai, siapkan apartemen, pengontrol, komposittor, target, dan root yang diperlukan. Secara default, fungsi WinRT init_apartment multi-ancaman, tetapi WebView2 secara inheren berutas tunggal. Untuk mengatur init_apartment sebagai satu utas, berikan winrt::apartment_type::single_threaded parameter . Dalam Sampel Mica WebView2, kami menyederhanakan sintaks dengan membuat kelas terpisah untuk fungsi tampilan web, yang direferensikan dalam kode berikut.

Dari Main.cpp

int __stdcall WinMain(_In_ HINSTANCE, _In_opt_ HINSTANCE, _In_ PSTR, _In_ int)
{
    winrt::init_apartment(winrt::apartment_type::single_threaded);
    // Enable referencing the WindowsAppSDK from an unpackaged app.
    // Remember to have a matching Microsoft.WindowsAppRuntime.Redist installed.
    // https://learn.microsoft.com/windows/apps/windows-app-sdk/deploy-unpackaged-apps
    Utilities::WindowsAppSDKBootstrapperContext sdkContext;
    CompositionWindow::RegisterWindowClass();
    // A dispatcher queue is required to be able to create a compositor.
    auto controller = Utilities::CreateDispatcherQueueControllerForCurrentThread();
    auto compositor = winrt::Compositor();
    auto window = WebView2Window(compositor, L"Hello, WebView2!");

    ...
}

Untuk demonstrasi lengkap kelas WebView2Window dan integrasinya dengan Mica, lihat sampel SDK Aplikasi Windows WebView2 Mica di GitHub. Perhatikan bagaimana kelas CompositionWindow dan WebView2Window menangani pesan, menginisialisasi lingkungan tampilan web, dan menghapus pengontrol jendela setelah jendela ditutup.

Bahan, Lapisan dan Elevasi, SDK Aplikasi Windows sampel Mica