Partilhar via

Aplique materiais de Mica ou Acrílico em aplicações de ambiente de trabalho para Windows 11

Materiais no Windows 11 são efeitos visuais aplicados a interfaces de utilizador que imitam objetos do mundo real. Materiais de oclusão, como Mica e Acrílico, são usados como camadas de base sob controles interativos da interface do usuário.

Mica é um material opaco que incorpora o tema do usuário e o papel de parede da área de trabalho para criar uma aparência altamente personalizada. O Mica foi projetado para desempenho, pois captura o papel de parede de fundo apenas uma vez para criar sua visualização, por isso recomendamos para a camada de base do seu aplicativo, especialmente na área da barra de título.

acrílico é um material semitransparente que replica o efeito do vidro fosco. Ele é usado apenas para superfícies transitórias e de descarte de luz, como submenus e menus de contexto.

Este artigo descreve como aplicar Mica ou Acrílico como camada base da sua aplicação Windows App SDK/WinUI 3 XAML.

Observação

Como usar um material de pano de fundo

Abra o aplicativo WinUI 3 Gallery e veja os cenários do sistema em ação

Ícone da Galeria WinUI 3 A aplicação WinUI 3 Gallery inclui exemplos interativos de controlos e funcionalidades WinUI. Descarrega a aplicação na Microsoft Store ou navega pelo código-fonte no GitHub.

Para aplicar material Mica ou acrílico à sua aplicação, defina a propriedade SystemBackdrop como um SystemBackdrop XAML (normalmente, um dos cenários internos, MicaBackdrop ou DesktopAcrylicBackdrop).

Estes elementos têm uma SystemBackdrop propriedade:

Estes exemplos mostram como definir o pano de fundo do sistema em XAML.

Mica

O Mica é normalmente usado como pano de fundo para uma janela de aplicativo.

<Window
    ... >

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

</Window>

Mica Alt

Para usar a variante Mica Alt, defina a Kind propriedade para BaseAlt.

<Window
    ... >

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

</Window>

Acrylic

O Desktop Acrylic pode ser usado como pano de fundo para uma janela.

<Window
    ... >

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

</Window>

Acrílico em interface transitória

O acrílico é também comumente usado como fundo para interfaces transitórias, como um flyout. Podes definir isto em XAML ou em código, já que os flyouts são frequentemente criados dinamicamente.

<Flyout
    ... >

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

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

Avançado: Como usar um controlador de fundo de sistema

Observação

A partir de Windows App SDK 1.3, pode aplicar material definindo a propriedade Window.SystemBackdrop para um elemento XAML SystemBackdrop conforme descrito na secção anterior. Esta é a forma recomendada de aplicar um material para a maioria das aplicações.

O restante deste artigo mostra como usar as APIs Composition MicaController e DesktopAcrylicControler , que lhe dão mais controlo sobre o comportamento do fundo.

Para usar um material de pano de fundo em seu aplicativo, você pode usar um dos controladores que implementa a interface ISystemBackdropController (MicaController ou DesktopAcrylicController). Essas classes gerenciam tanto a renderização do material de pano de fundo do sistema quanto a manipulação da política do sistema para o material.

Para usar o Mica como material de pano de fundo, crie um MicaController objeto. Para usar o acrílico, crie um DesktopAcrylicController objeto. O código de configuração e suporte é o mesmo para cada tipo de material de pano de fundo do sistema.

Criar um MicaController

MicaController micaController;

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

Crie um DesktopAcrylicController

DesktopAcrylicController acrylicController;

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

O controlador reage aos temas Luz e Escuridão do sistema por padrão. Para substituir esse comportamento, você pode definir as seguintes propriedades no controlador:

Observação

Após personalizar qualquer uma das quatro propriedades do controlador, este deixa de aplicar os valores predefinidos de Claro ou Escuro quando o SystemBackdropConfiguration.Theme associado muda. Você precisa atualizar manualmente essas propriedades para corresponder ao novo tema.

Para usar o material de pano de fundo em seu aplicativo, os seguintes itens são necessários:

  • Suporte do sistema

    O sistema onde o aplicativo é executado deve suportar o material de pano de fundo. Chame o método MicaController.IsSupported ou o método DesktopAcrylicController.IsSupported para garantir que o material de pano de fundo seja suportado em tempo de execução.

  • Um alvo de destino válido

    Você deve fornecer um destino que implemente a interface ICompositionSupportsSystemBackdrop. Em uma aplicação XAML, a Janela implementa esta interface e é usada como alvo de fundo.

  • Um objeto SystemBackdropConfiguration

    O SystemBackdropConfiguration fornece ao controlador de pano de fundo do sistema informações de política específicas do aplicativo para configurar corretamente o material de pano de fundo do sistema.

  • Um objeto DispatcherQueue

    Você precisa de um disponível Windows.System.DispatcherQueue no thread XAML principal. Ligue DispatcherQueue.EnsureSystemDispatcherQueue() para garantir que existe um.

Exemplo: Usar Mica com um comando numa aplicação WinUI

Este exemplo mostra como configurar o material de fundo Mica usando um controlador numa aplicação XAML.

Sugestão

Veja também estes exemplos de projetos no GitHub:

C#: SampleSystemBackdropsWindow na Galeria WinUI.

C++/WinRT: Amostra de Mica do Windows App SDK.

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