Partager via

Appliquer l’effet Mica dans les applications de bureau Win32 pour Windows 11

  • Article

Mica est un matériau opaque qui incorpore le thème de l’utilisateur et le papier peint de bureau pour créer une apparence hautement personnalisée. Lorsque l’utilisateur déplace la fenêtre sur l’écran, le matériau Mica s’adapte dynamiquement pour créer une visualisation enrichie à l’aide du papier peint sous l’application. En outre, le matériau aide les utilisateurs à se concentrer sur la tâche actuelle en revenant à une couleur neutre lorsque l’application est inactive.

Cet article explique comment appliquer Mica comme couche de base de votre application Win32, en hiérarchisant l’application et la visibilité dans la zone de barre de titre. Pour plus d’informations sur les couches d’application avec Mica, consultez Matériau Mica.

Prérequis

Pour appliquer Mica à une application Win32 pour Windows 11, vous devez utiliser le SDK d’application Windows. Vous aurez besoin des éléments suivants :

Utilisation de Mica dans les applications Win32

Pour utiliser Mica dans votre application, vous utilisez la classe MicaController. Cette classe gère à la fois le rendu du matériau de fond du système ainsi que la gestion de la stratégie système pour le matériel Mica.

Le MicaController réagit aux thèmes Clair et Foncé système par défaut. Pour remplacer ce comportement, vous pouvez transmettre les propriétés suivantes au MicaController :

Conseil

Le code de cette section est extrait de l’exemple Win32 Mica de SDK d’application Windows sur GitHub. Consultez le dépôt GitHub pour voir le code complet. Ces exemples utilisent C++/WinRT.

Pour activer Mica, vous avez besoin d’une référence au SDK d’application Windows, à un Compositeur et à un DispatcherQueue.

Cet exemple montre comment effectuer les opérations suivantes pour configurer une application non empaquetée :

À partir de 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...
    ...
}

À partir de 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
}

La méthode winrt::init_apartment est multithread par défaut. Si votre application nécessite un thread unique, comme l’exemple WebView2, vous pouvez facilement définir le type.

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

Vous pouvez maintenant utiliser la fonction CreateWindowEx() pour créer une fenêtre. Ensuite, vous devez créer une cible de fenêtre et la définir comme racine pour spécifier la couche à laquelle appliquer Mica. Enfin, vérifiez que Mica est pris en charge par la fenêtre et la cible.

L’exemple Win32 Mica crée les classes DesktopWindow et MicaWindow pour effectuer ce travail. Ces classes définissent : ClassName, windowTitle, m_target, m_micaController et m_isMicaSupported.

À partir de 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!");

À partir de 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);
}

Utilisation de Mica dans les applications WebView2 Win32

Les principes fondamentaux de l’application de Mica sont cohérents dans la plupart des applications Win32. Le processus pour WebView2 suit les étapes de base des instructions Win32 présentées précédemment. Toutefois, dans ce cas, vous devez spécifier un processus à thread unique à partir de la fonctionnalité init_apartment de WinRT.

Conseil

Le code de cette section est extrait de l’exemple WebView2 Mica de SDK d’application Windows sur GitHub. Consultez le dépôt GitHub pour voir le code complet.

Pour commencer, configurez le cloisonnement, le contrôleur, le compositeur, la cible et la racine requis. Par défaut, la fonction init_apartment WinRT est multithread, mais WebView2 est intrinsèquement à thread unique. Pour définir init_apartment en tant que thread unique, passez le paramètre winrt::apartment_type::single_threaded. Dans l’exemple Mica WebView2, nous simplifions la syntaxe en créant une classe distincte pour les fonctions de vue web, référencées dans le code suivant.

À partir de 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!");

    ...
}

Pour obtenir une démonstration complète de la classe WebView2Window et de son intégration à Mica, consultez l’exemple WebView2 Mica de SDK d’application Windows sur GitHub. Notez comment les classes CompositionWindow et WebView2Window gèrent les messages, initialisez l’environnement d’affichage web et supprimez le contrôleur de fenêtre une fois la fenêtre fermée.

Matériaux, Couches et élévation, Exemples Mica du SDK d’application Windows