Materiais nas aplicações Windows

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

Importante

AcrylicBrush é apenas acrílico dentro da aplicação — desfoca o conteúdo XAML dentro da janela da aplicação. Não mostra o ambiente de trabalho nem outras janelas atrás da aplicação. Para efeitos transparentes no ambiente de trabalho, use Window.SystemBackdrop ou SystemBackdropElement.

Que material devo usar?

Scenario Material API
Janela da aplicação com fundo Mica (com tonalidade de papel de parede) Mica Window.SystemBackdrop = new MicaBackdrop()
Janela da aplicação com fundo transparente em vidro fosco Acrílico do ambiente de trabalho Window.SystemBackdrop = new DesktopAcrylicBackdrop()
Flyout, pop-up ou menu contextual com fundo acrílico Plano de fundo do sistema sobre uma superfície Define SystemBackdrop em FlyoutBase, Popup, etc.
Barra lateral, painel ou elemento com mica ou acrílico (não a janela toda) SystemBackdropElement <SystemBackdropElement> controlo
Painel de navegação ou painel de conteúdo com efeito de desfoque na aplicação Acrílico na aplicação {ThemeResource AcrylicInAppFillColorDefaultBrush}

Nenhum material (por defeito)

Quando não é aplicado material, o fundo da janela é uma cor sólida extraída do tema claro ou escuro ativo — sem desfoque ou translucidez.

Captura de ecrã de uma janela de aplicação WinUI 3 sem material aplicado, mostrando um fundo branco e plano.

Os materiais dependem de efeitos de compositor que requerem suporte de hardware e preferências do utilizador. O WinUI 3 volta elegantemente a uma cor sólida quando um material não pode ser renderizado:

  • Ambiente de Trabalho Remoto ou máquinas virtuais — o compositor não pode misturar conteúdos de ambiente de trabalho via RDP, pelo que SystemBackdrop os materiais recuam automaticamente.
  • Hardware gráfico insuficiente — Mica e Desktop Acrylic requerem DirectX 11 e memória GPU adequada. Os dispositivos que não cumprem o limiar acabam por optar por uma cor de tema sólida.
  • Efeitos de transparência desativados — se o utilizador desativar Efeitos de transparência em Definições > Personalização > Cores, todos SystemBackdrop os materiais e AcrylicBrush revertem para as suas alternativas de cor uniforme.
  • Poupança de bateria ativa — O Windows desativa o efeito acrílico (DesktopAcrylicBackdrop e AcrylicBrush) quando a Poupança de bateria estiver ativa. A mica não é afetada.
  • Modo de alto contraste — todos os materiais são suprimidos; O sistema aplica cores temáticas de alto contraste em vez disso.

A sua aplicação não precisa de detetar estas condições — as APIs tratam automaticamente da alternativa. Certifica-te de que qualquer FallbackColor fundo de tema que configures se lê bem numa cor lisa e sólida.

Mica

O Mica integra a cor do papel de parede do ambiente de trabalho do utilizador num fundo suave e personalizado. Foi concebido para o fundo da janela principal da aplicação, especialmente na barra de título e nas áreas do painel de navegação.

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

Captura de ecrã de uma aplicação WinUI 3 com MicaBackdrop aplicado, que mostra um fundo subtil azul-acinzentado matizado pelo papel de parede do ambiente de trabalho do utilizador.

Acrílico do ambiente de trabalho

O Desktop Acrylic mostra uma vista ao vivo e desfocada do ambiente de trabalho e do conteúdo atrás da janela da aplicação, criando uma aparência de vidro fosco.

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

Captura de ecrã de uma aplicação WinUI 3 com DesktopAcrylicBackdrop aplicado, mostrando um efeito de desfocagem de vidro fosco do conteúdo do ambiente de trabalho atrás da janela.

O acrílico também pode ser aplicado a superfícies transitórias — colocado 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 Desktop Acrylic a partir do compositor do sistema operativo a um elemento XAML específico — não à janela inteira. Use-o quando uma barra lateral, painel ou cartão precisar do seu próprio fundo de mica ou acrílico, independentemente do resto da janela.

Acrylic na aplicação (AcrylicBrush)

AcrylicBrush Desfoca o conteúdo XAML dentro da janela da aplicação. Não mostra o ambiente de trabalho nem outras janelas através da superfície. Usa-o para painéis de navegação, barras laterais ou painéis de conteúdo onde quiseres um efeito translúcido dentro da aplicação.

  • API: Aplique {ThemeResource AcrylicInAppFillColorDefaultBrush} a um elemento Background, ou defina um custom AcrylicBrush com TintColor, TintOpacity, e TintLuminosityOpacity.
  • A propriedade UWP BackgroundSource = HostBackdrop não está disponível no WinUI 3.
  • Para detalhes e exemplos de código, veja Acrílico na aplicação.

Captura de ecrã de uma aplicação WinUI 3 com AcrylicBrush aplicado, mostrando um painel translúcido que desfoca o conteúdo XAML dentro da janela da aplicação.

  • Last updated on