Aplicar materiais Mica ou Acrílico em aplicativos do desktop para Windows 11

Materiais no Windows 11 são efeitos visuais aplicados a superfícies de UX que se assemelham a artefatos da vida real. Os materiais occluding são usados como camadas base embaixo de controles interativos de interface do usuário.

Mica é um material opaco que incorpora o tema do usuário e o papel de parede do desktop para criar uma aparência altamente personalizada. O Mica foi projetado levando o desempenho em consideração, pois captura apenas o papel de parede de fundo uma vez para criar a visualização dele. Portanto, nós o 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 gelado. É usado apenas para superfícies transitórias e de light-dismiss, como submenus e menus de contexto.

Este artigo descreve como aplicar Mica ou Acrílico como a camada base do aplicativo XAML SDK do Aplicativo Windows/WinUI 3.

Observação

Como usar um material de pano de fundo

Ícone da Galeria do WinUI 3 O aplicativo Da Galeria do WinUI 3 inclui exemplos interativos de controles e recursos do WinUI. Obtenha o aplicativo na Microsoft Store ou navegue pelo código-fonte em GitHub.

Para aplicar material Mica ou Acrílico ao seu aplicativo, defina a SystemBackdrop propriedade para um XAML SystemBackdrop (normalmente, um dos planos de fundo integrados, MicaBackdrop ou DesktopAcrylicBackdrop).

Esses elementos têm uma SystemBackdrop propriedade:

Estes exemplos mostram como definir o cenário do sistema em XAML.

Mica

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 como 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 do usuário transitória

O acrílico também é comumente usado como pano de fundo para UI transitória, como uma janela flutuante. Você pode definir isso em XAML ou em código, já que os flyouts geralmente são criados dinamicamente.

<Flyout
    ... >

    <Flyout.SystemBackdrop>
        <DesktopAcrylicBackdrop/>
    </Flyout.SystemBackdrop>
</Flyout>
Flyout flyout = new Flyout()
{
    SystemBackdrop = new DesktopAcrylicBackdrop()
};

Aplicar um cenário de sistema a qualquer elemento XAML

  • APIs importantes: SystemBackdropElement
Ícone da Galeria do WinUI 3 O aplicativo Da Galeria do WinUI 3 inclui exemplos interativos de controles e recursos do WinUI. Obtenha o aplicativo na Microsoft Store ou navegue pelo código-fonte em GitHub.

A propriedade Window.SystemBackdrop aplica um material de plano de fundo em toda a janela. Se você precisar aplicar Mica ou Acrílico a uma região específica da sua interface do usuário — como um cartão, um painel ou qualquer área delimitada — use o controle SystemBackdropElement.

SystemBackdropElement é um controle XAML que renderiza um material de plano de fundo do sistema dentro de seus próprios limites. Você pode colocá-lo em qualquer lugar na árvore XAML, definir seu tamanho explicitamente ou deixá-lo preencher seu elemento pai e usar CornerRadius para aplicar cantos arredondados.

Usar SystemBackdropElement em XAML

Coloque SystemBackdropElement como um elemento irmão atrás de outro conteúdo ou como um elemento hospedeiro de plano de fundo dentro de um Grid. Defina a propriedade SystemBackdrop para o material desejado.

<Grid Width="300" Height="200">
    <SystemBackdropElement CornerRadius="8">
        <SystemBackdropElement.SystemBackdrop>
            <DesktopAcrylicBackdrop />
        </SystemBackdropElement.SystemBackdrop>
    </SystemBackdropElement>

    <!-- Content rendered on top of the backdrop -->
    <Button HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Content="Click Me" />
</Grid>

Alternar o material de fundo em tempo de execução

Você pode alterar a SystemBackdrop propriedade em runtime. Este exemplo permite que o usuário escolha entre o Acrílico e as duas variantes de Mica:

private void OnBackdropTypeChanged(string backdropType)
{
    DynamicBackdropHost.SystemBackdrop = backdropType switch
    {
        "Mica"    => new MicaBackdrop { Kind = MicaKind.Base },
        "MicaAlt" => new MicaBackdrop { Kind = MicaKind.BaseAlt },
        _         => new DesktopAcrylicBackdrop()
    };
}

Observação

SystemBackdropElement aplica um pano de fundo do sistema a um elemento na página, não à janela. Para o plano de fundo no nível da janela, use a propriedade Window.SystemBackdrop como descrito anteriormente neste artigo. As duas abordagens são independentes e podem ser usadas juntas no mesmo aplicativo.

Avançado: como usar um controlador de cenário do sistema

Observação

A partir do SDK do Aplicativo Windows 1.3, você pode aplicar material definindo a propriedade Window.SystemBackdrop a um SystemBackdrop XAML, conforme descrito na seção anterior. Essa é a maneira recomendada de aplicar um material para a maioria dos aplicativos.

O restante deste artigo mostra como usar as APIs MicaController e DesktopAcrylicController, que oferecem mais controle 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 objeto MicaController. Para usar o Acrílico, crie um objeto DesktopAcrylicController. 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;
        ...
    }
}

Criar 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 Claro e Escuro do sistema por padrão. Para substituir esse comportamento, você pode definir as seguintes propriedades no controlador:

Observação

Depois de personalizar qualquer uma das quatro propriedades do controlador, ele não aplica mais valores padrão Claro ou Escuro quando o SystemBackdropConfiguration.Theme associado é alterado. 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 em que o aplicativo é executado deve dar suporte ao material de pano de fundo. Chame o método MicaController.IsSupported ou DesktopAcrylicController.IsSupported para garantir que o material do cenário tenha suporte no runtime.

  • Um destino válido

    Você deve fornecer um destino que implemente a interface ICompositionSupportsSystemBackdrop. Em um aplicativo XAML, a Janela XAML implementa essa interface e é usada como o destino do pano 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 Windows.System.DispatcherQueue disponível no thread XAML principal. Chamar DispatcherQueue.EnsureSystemDispatcherQueue() para garantir que exista um.

Exemplo: usar o Mica com um controlador em um aplicativo WinUI

Este exemplo mostra como configurar o material do cenário Mica usando um controlador em um aplicativo XAML.

Dica

Além disso, consulte estes projetos de exemplo no GitHub:

C#: SampleSystemBackdropsWindow na Galeria WinUI.

C++/WinRT: Exemplo de Mica do SDK do Aplicativo Windows.

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