Material acrílico

O acrílico é um tipo de Pincel que cria uma textura translúcida. Você pode aplicar o acrílico a superfícies de aplicativos para adicionar profundidade e ajudar a estabelecer uma hierarquia visual.

APIs importantes: classe AcrylicBrush, propriedade Background, propriedade Window.SystemBackdrop, classe DesktopAcrylicBackdrop

Acrílico no tema claro

Acrílico em tema escuro

Acrílico e o Sistema de Design Fluente

O Sistema de Design Fluente ajuda a criar uma interface do usuário arrojada e moderna que incorpora luz, profundidade, movimento, materiais e escala. O acrílico é um componente do Sistema de Design Fluente que acrescenta textura física (material) e profundidade ao aplicativo. Para saber mais, consulte Fluent Design - Material.

Tipos de mistura de acrílico

A característica mais notável do acrílico é a sua transparência. Existem dois tipos de mistura acrílica que mudam o que é visível através do material:

• O acrílico de fundo revela o papel de parede da área de trabalho e outras janelas que estão por trás do aplicativo ativo no momento, adicionando profundidade entre as janelas do aplicativo enquanto celebra as preferências de personalização do usuário.
• O Acrílico do aplicativo acrescenta uma sensação de profundidade dentro do quadro do aplicativo, oferecendo foco e hierarquia.

Evite colocar várias superfícies acrílicas em camadas: várias camadas de acrílico de fundo podem criar ilusões de ótica que distraem.

Quando usar o acrílico

Considere os seguintes padrões de uso para decidir a melhor forma de incorporar o acrílico ao seu aplicativo.

Superfícies transitórias

• Use acrílico de fundo para elementos transitórios da interface do usuário.

Para aplicativos com menus de contexto, submenus, pop-ups não modais ou painéis de descarte de luz, recomendamos que você use acrílico de plano de fundo, especialmente se essas superfícies forem desenhadas fora do quadro da janela principal do aplicativo. O uso de acrílico em cenários transitórios ajuda a manter uma relação visual com o conteúdo que disparou a interface do usuário transitória.

Muitos controles XAML desenham acrílico por padrão. MenuFlyout, AutoSuggestBox, ComboBox e controles semelhantes com pop-ups de descarte de luz usam acrílico enquanto abertos.

Suporte à interface do usuário e painéis verticais

• Use acrílico no aplicativo para dar suporte à interface do usuário, como em superfícies que podem se sobrepor ao conteúdo quando roladas ou interagidas.

Se você estiver usando acrílico no aplicativo em superfícies de navegação, considere estender o conteúdo abaixo do painel acrílico para melhorar o fluxo em seu aplicativo. O uso do NavigationView fará isso automaticamente. No entanto, para evitar um efeito com listras, não tente colocar várias partes acrílicas de uma borda à outra, pois isso pode criar um fio indesejado entre as duas superfícies desfocadas. O acrílico é uma ferramenta para trazer harmonia visual aos seus projetos, mas quando usado incorretamente pode resultar em ruído visual.

Para os painéis verticais ou superfícies que ajudam a separar o conteúdo por seção em seu aplicativo, é recomendável que você use uma tela de fundo opaca em vez do acrílico. Se seus painéis verticais abrem na parte superior do conteúdo, como os modos Compacto ou Mínimo do NavigationView, sugerimos usar o acrílico do aplicativo para ajudar a manter o contexto da página quando o usuário estiver com esse painel aberto.

Observação

A renderização de superfícies acrílicas exige muito da GPU, o que pode aumentar o consumo de energia do dispositivo e reduzir a vida útil da bateria. Os efeitos acrílicos são desativados automaticamente quando um dispositivo entra no modo de economia de bateria. Os usuários podem desativar os efeitos de acrílico para todos os aplicativos desativando os efeitos de transparência em Configurações > Personalização > de cores.

Usabilidade e adaptabilidade

O acrílico adapta automaticamente sua aparência para uma variedade de dispositivos e contextos.

No modo Alto Contraste, os usuários continuam visualizando a cor de fundo familiar de sua escolha no lugar do acrílico. Além disso, o acrílico de fundo e o acrílico do aplicativo aparecem como uma cor sólida:

• Quando o usuário desativa os efeitos de transparência em Configurações > Personalização > de cores.
• Quando o modo de economia de bateria está ativado.
• Quando o aplicativo é executado em hardware de baixo custo.

Além disso, apenas o acrílico de fundo irá substituir a translucência e textura por uma cor sólida:

• Quando uma janela de aplicativo na área de trabalho é desativada.
• Quando o aplicativo está em execução no Xbox, HoloLens ou no modo tablet.

Considerações de legibilidade

É importante garantir que qualquer texto que seu aplicativo apresente aos usuários atenda às taxas de contraste (consulte Requisitos de texto acessível). Otimizamos os recursos de acrílico para que o texto atenda às taxas de contraste em cima do acrílico. Não recomendamos colocar texto com cores de destaque em suas superfícies acrílicas, pois essas combinações provavelmente não passarão nos requisitos mínimos de taxa de contraste no tamanho de fonte padrão de 14px. Evite colocar hiperlinks sobre elementos acrílicos. Além disso, se você optar por personalizar a cor da tonalidade acrílica ou o nível de opacidade, lembre-se do impacto na legibilidade.

Aplicar acrílico em seu aplicativo

Importante

A forma como você aplica o acrílico de plano de fundo difere entre o WinUI 3 e o WinUI 2/UWP.

WinUI 2/UWP: a classe AcrylicBrush tem uma propriedade BackgroundSource que especifica se você deseja o plano de fundo ou o acrílico no aplicativo. Você usa um AcrylicBrush para aplicar os dois tipos de acrílico. Consulte as classes AcrylicBrush para obter informações e exemplos específicos: Microsoft.UI.Xaml.Media.AcrylicBrush (WinUI 2), Windows.UI.Xaml.Media.AcrylicBrush (UWP).

WinUI 3: a classe AcrylicBrush só dá suporte ao acrílico no aplicativo. Você usa a classe DesktopAcrylicBackdrop para aplicar o acrílico de fundo.

Acrílico em segundo plano

Para aplicar o acrílico de plano de fundo em um aplicativo WinUI 3, defina a propriedade do SystemBackdrop elemento como uma instância de DesktopAcrylicBackdrop. Para obter mais informações, consulte Aplicar materiais de mica ou acrílico em aplicativos da área de trabalho para Windows 11.

Esses elementos têm uma SystemBackdrop propriedade:

• CommandBarFlyoutCommandBar.SystemBackdrop
• ContentIsland.SystemBackdrop
• DesktopWindowXamlSource.SystemBackdrop
• FlyoutBase.SystemBackdrop
• MenuFlyoutPresenter.SystemBackdrop
• Popup.SystemBackdrop
• Janela.SystemBackdrop

Acrílico do aplicativo

Você pode aplicar acrílico no aplicativo às superfícies do aplicativo usando um AcrylicBrush XAML ou recursos de tema predefinidosAcrylicBrush.

O WinUI inclui uma coleção de recursos de tema de pincel que respeitam o tema do aplicativo e retornam às cores sólidas conforme necessário. Para pintar uma superfície específica, aplique um dos recursos de tema aos planos de fundo do elemento da mesma forma que aplicaria qualquer outro recurso de pincel.

<Grid Background="{ThemeResource AcrylicInAppFillColorDefaultBrush}">

Observação

Você pode exibir esses recursos no arquivo de recursos do tema AcrylicBrush, no repositório GitHub microsoft-ui-xaml.

Para o WinUI 2, os recursos que incluem Background em seus nomes representam o acrílico do plano de fundo, enquanto o InApp se refere ao acrílico no aplicativo.

O WinUI 3 inclui os recursos em segundo plano para compatibilidade, mas eles se comportam da mesma forma que os recursos do InApp.

Pincel acrílico personalizado

Você pode optar por adicionar uma tonalidade de cor ao acrílico do seu aplicativo para mostrar a identidade visual ou fornecer equilíbrio visual com outros elementos na página. Para mostrar cores em vez de tons de cinza, você precisará definir seus próprios pincéis de acrílico usando as propriedades a seguir.

• TintColor: camada sobreposta de cor/tonalidade.
• TintOpacity: a opacidade da camada de tonalidade.
• TintLuminosityOpacity: controla a quantidade de saturação que é permitida através da superfície do acrílico da tela de fundo.
• BackgroundSource: (somente WinUI 2/UWP) o sinalizador para especificar se você deseja o plano de fundo ou o acrílico no aplicativo.
• FallbackColor: a cor sólida que substitui o acrílico no modo de Economia de bateria. Para acrílico de fundo, a cor de fallback também substitui o acrílico quando o aplicativo não está na janela ativa da área de trabalho.

Para adicionar um pincel de acrílico, defina os três recursos para temas escuros, claros e de alto contraste. Em alto contraste, recomendamos que você use um SolidColorBrush com o mesmo x:Key que o AcrylicBrush escuro/claro.

Observação

Se você não especificar um TintLuminosityOpacity valor, o sistema ajustará automaticamente seu valor com base em TintColor e TintOpacity.

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Default">
        <AcrylicBrush x:Key="MyAcrylicBrush"
            BackgroundSource="HostBackdrop"
            TintColor="#FFFF0000"
            TintOpacity="0.8"
            TintLuminosityOpacity="0.5"
            FallbackColor="#FF7F0000"/>
    </ResourceDictionary>

    <ResourceDictionary x:Key="HighContrast">
        <SolidColorBrush x:Key="MyAcrylicBrush"
            Color="{ThemeResource SystemColorWindowColor}"/>
    </ResourceDictionary>

    <ResourceDictionary x:Key="Light">
        <AcrylicBrush x:Key="MyAcrylicBrush"
            BackgroundSource="HostBackdrop"
            TintColor="#FFFF0000"
            TintOpacity="0.8"
            TintLuminosityOpacity="0.5"
            FallbackColor="#FFFF7F7F"/>
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

O exemplo a seguir mostra como declarar um AcrylicBrush no código.

AcrylicBrush myBrush = new AcrylicBrush();
myBrush.TintColor = Color.FromArgb(255, 202, 24, 37);
myBrush.FallbackColor = Color.FromArgb(255, 202, 24, 37);
myBrush.TintOpacity = 0.6;

grid.Fill = myBrush;

O que fazer e o que não fazer

• Use acrílico em superfícies transitórias.
• Estenda o acrílico para pelo menos uma borda do seu aplicativo para fornecer uma experiência perfeita, misturando-se sutilmente com o ambiente do aplicativo.
• Não coloque acrílico da área de trabalho em grandes superfícies de fundo do seu aplicativo.
• Não coloque vários painéis de acrílico próximos uns dos outros, pois isso resulta em uma costura visível indesejável.
• Não coloque texto de cor de destaque sobre superfícies acrílicas.

Como projetamos o acrílico

Ajustamos os principais componentes do acrílico para chegar à sua aparência e propriedades únicas. Começamos com translucidez, desfoque e ruído para adicionar profundidade visual e dimensão a superfícies planas. Adicionamos uma camada de modo de mistura de exclusão para garantir contraste e legibilidade da interface de usuário posicionada em um fundo acrílico. Por fim, adicionamos uma tonalidade de cor para promover oportunidades de personalização. Em conjunto, essas camadas constituem um material novo e utilizável.

Receita do acrílico: fundo, desfoque, mistura de exclusão, sobreposição de cor/tonalidade, ruído

Exemplos

Abra o aplicativo WinUI 3 Gallery e veja o plano de fundo Acrílico em ação.

Abra o aplicativo Galeria do WinUI 3 e veja o AcrylicBrush no aplicativo em ação.

O aplicativo Galeria da WinUI 3 inclui exemplos interativos da maioria dos controles, recursos e funcionalidades da WinUI 3. Obtenha o aplicativo na Microsoft Store ou o código-fonte no GitHub

Artigos relacionados

Visão geral do Fluent Design