Compartilhar via

Aplicar materiais Mica ou Acrílico em aplicativos de desktop no 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 Windows App SDK/WinUI 3.

Observação

Como usar um material de pano de fundo

Abra o aplicativo WinUI 3 Gallery e veja o System Backdrops em ação.

Í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 na 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()
};

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

Observação

A partir do Windows App SDK 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. Chame DispatcherQueue.EnsureSystemDispatcherQueue() para garantir que exista uma.

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