Materiais em aplicativos do Windows

Os materiais são efeitos visuais aplicados a superfícies de interface do usuário para criar profundidade, hierarquia e interesse visual. O WinUI 3 fornece quatro mecanismos para a aplicação de materiais, cada um adequado para um cenário diferente.

Importante

AcrylicBrush é acrílico apenas no aplicativo — ele desfoca o conteúdo XAML dentro da janela do aplicativo. Ele não mostra a área de trabalho ou outras janelas por trás do aplicativo. Para efeitos de transparência na área de trabalho, use Window.SystemBackdrop ou SystemBackdropElement.

Qual material devo usar?

Scenario Material API
Janela do aplicativo com um plano de fundo Mica (com papel de parede colorido) Mica Window.SystemBackdrop = new MicaBackdrop()
Janela do aplicativo com um plano de fundo de vidro fosco transparente Acrílico para Área de Trabalho Window.SystemBackdrop = new DesktopAcrylicBackdrop()
Menu flutuante, pop-up ou menu de contexto com fundo Acrílico Plano de fundo do sistema em uma superfície Defina SystemBackdrop em FlyoutBase, Popup, etc.
Barra lateral, painel ou elemento com Mica ou Acrílico (não a janela inteira) SystemBackdropElement Controle <SystemBackdropElement>
Painel de navegação ou painel de conteúdo com efeito de desfoque integrado ao aplicativo Acrílico no aplicativo {ThemeResource AcrylicInAppFillColorDefaultBrush}

Sem material (padrão)

Quando nenhum material é aplicado, a tela de fundo da janela é uma cor sólida extraida do tema claro ativo ou escuro , sem desfoque ou translucência.

Captura de tela de uma janela do aplicativo WinUI 3 sem material aplicado, mostrando um plano de fundo branco simples.

Os materiais dependem de efeitos de compositor que exigem suporte de hardware e preferências do usuário. O WinUI 3 volta normalmente para uma cor sólida quando um material não pode ser renderizado:

  • Área de Trabalho Remota ou máquinas virtuais — o compositor não consegue mesclar com o conteúdo da área de trabalho via RDP, portanto, os materiais SystemBackdrop são usados automaticamente como alternativa.
  • Hardware gráfico insuficiente — Mica e Acrílico para Área de Trabalho exigem DirectX 11 e memória de GPU adequada. Dispositivos que não atendem aos requisitos mínimos usam uma cor de tema sólida como alternativa.
  • Efeitos de transparência desabilitados – se o usuário desativar os efeitos de transparência nas Cores de Personalização > de Configurações>, todos os SystemBackdrop materiais e AcrylicBrush recuarão para suas alternativas de cor sólida.
  • Economia de bateria ativa — O Windows desativa o acrílico (DesktopAcrylicBackdrop e AcrylicBrush) quando a Economia de bateria está ativada. Mica não é afetada.
  • Modo de alto contraste – todos os materiais são suprimidos; em vez disso, o sistema aplica cores de tema de alto contraste.

Seu aplicativo não precisa detectar essas condições – as APIs manipulam o fallback automaticamente. Certifique-se de que qualquer FallbackColor ou plano de fundo de tema que você configurar seja legível como uma cor sólida simples.

Mica

O Mica incorpora a cor do papel de parede da área de trabalho do usuário a um plano de fundo suave e personalizado. Ele foi projetado para a tela de fundo da janela principal do aplicativo, especialmente nas áreas da barra de título e do painel de navegação.

  • API: Window.SystemBackdrop = new MicaBackdrop()
  • Variantes: MicaKind.Base (padrão) ou MicaKind.BaseAlt (mais leve, para superfícies secundárias)
  • Versão do Windows: apenas Windows 11. Volta para uma cor de tema sólida em Windows 10.

Captura de tela de um aplicativo WinUI 3 com o MicaBackdrop aplicado, mostrando um plano de fundo azul-cinza sutil colorido pelo papel de parede da área de trabalho do usuário.

Acrílico para Área de Trabalho

O Acrílico para Área de Trabalho mostra uma visualização em tempo real e desfocada da área de trabalho e do conteúdo atrás da janela do aplicativo, criando uma aparência de vidro fosco.

  • API: Window.SystemBackdrop = new DesktopAcrylicBackdrop()
  • Variantes: DesktopAcrylicKind.Base (mais opaco) ou DesktopAcrylicKind.Thin (mais transparente)
  • Versão do Windows: Windows 10 (build 17763) e posteriores.

Captura de tela de um aplicativo WinUI 3 com DesktopAcrylicBackdrop aplicado, mostrando um desfoque de vidro fosco do conteúdo da área de trabalho atrás da janela.

O acrílico também pode ser aplicado a superfícies transitórias — defina SystemBackdrop em FlyoutBase, Popup, MenuFlyoutPresenter ou CommandBarFlyoutCommandBar. Consulte os planos de fundo do sistema para ver a lista completa.

SystemBackdropElement

SystemBackdropElement aplica um material Mica ou Área de trabalho Acrílica do compositor do SO a um elemento XAML específico — não à janela inteira. Use-o quando uma barra lateral, painel ou cartão precisar de seu próprio plano de fundo Mica ou Acrílico, independentemente do restante da janela.

Acrílico no aplicativo (AcrylicBrush)

AcrylicBrush desfoca o conteúdo XAML na janela do aplicativo. Não mostra a área de trabalho ou outras janelas através da superfície. Use-o para painéis de navegação, barras laterais ou painéis de conteúdo em que você deseja um efeito translúcido no aplicativo.

  • API: aplicar {ThemeResource AcrylicInAppFillColorDefaultBrush} a um elemento Backgroundou definir um personalizado AcrylicBrush com TintColor, TintOpacitye TintLuminosityOpacity.
  • A propriedade UWP BackgroundSource = HostBackdrop não está disponível no WinUI 3.
  • Para detalhes e exemplos de código, consulte Acrílico no aplicativo.

Captura de tela de um aplicativo WinUI 3 com AcrylicBrush aplicado, mostrando um painel translúcido que desfoca o conteúdo XAML dentro da janela do aplicativo.

  • Last updated on