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

Acrílico em tema claro

Acrílico no 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, confira a Visão geral do Fluent Design.

Exemplos

WinUI 2 Gallery
Se você tiver o aplicativo Galeria do WinUI 2 instalado, clique aqui para abrir o aplicativo e ver o acrílico em ação.

Obtenha o aplicativo WinUI 2 Gallery (Microsoft Store)
Obtenha o código-fonte (GitHub)

Tipos de mistura de acrílico

A característica mais notável do acrílico é a sua transparência. Existem dois tipos de mistura de acrílico que alteram 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 atrás do aplicativo ativo naquele momento, adicionando profundidade entre as janelas dos aplicativos, ao mesmo tempo em que promove 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 ópticas distrativas.

Quando usar o acrílico

• Use o acrílico do aplicativo para auxiliar a interface do usuário, como em superfícies que podem se sobrepor ou interagir quando a tela é rolada.
• Use o acrílico de fundo para elementos transitórios da interface do usuário, como os menus de contexto, submenus e interface do usuário light dismiss.
  Usar o acrílico em cenários transitórios ajuda a manter uma relação visual com o conteúdo que acionou a interface do usuário transitória.

Se você estiver usando o 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. Usar o 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 designs, mas quando usado incorretamente pode resultar em ruído visual.

Considere os seguintes padrões de uso para decidir a melhor maneira de incorporar o acrílico em seu aplicativo:

Painéis verticais

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.

Superfícies transitórias

Para aplicativos com menus de contexto, submenus, pop-ups não modais ou painéis light-dismiss, é recomendável usar o acrílico em segundo plano, especialmente se essas superfícies desenharem fora do quadro da janela do aplicativo main.

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

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 desabilitados automaticamente quando um dispositivo entra no modo economia de bateria. Os usuários podem desabilitar efeitos acrílicos para todos os aplicativos desativando efeitos de transparência em Configurações > Cores de Personalização > .

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 efeitos de transparência em Configurações > Cores de Personalização > .
• Quando o modo economia de bateria é ativado.
• Quando o aplicativo é executado em hardware de baixo nível.

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

• Quando uma janela do 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 o aplicativo apresente ao usuário atenda aos índices de contraste (confira Requisitos de texto acessível). Otimizamos os recursos acrílicos de modo que o texto atenda às taxas de contraste sobre o acrílico. Não recomendamos colocar texto de cor de destaque em suas superfícies acrílicas porque essas combinações provavelmente não passarão os requisitos mínimos de taxa de contraste no tamanho padrão da fonte 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, tenha em mente o impacto na legibilidade.

Recursos do tema acrílico

Você pode aplicar facilmente o acrílico às superfícies do aplicativo usando o XAML AcrylicBrush ou recursos de tema AcrylicBrush predefinidos. Primeiro, você precisará decidir se deseja usar o acrílico do aplicativo ou o acrílico de fundo. Examine os padrões comuns de aplicativos descritos anteriormente neste artigo para obter recomendações.

Criamos uma coleção de recursos de tema de pincel para tipos de acrílico de fundo e para tipos de acrílico do aplicativo que respeitam o tema do aplicativo e retornam para cores sólidas quando necessário. Para o WinUI 2, esses recursos de tema estão localizados no arquivo AcrylicBrush themeresources, no repositório GitHub microsoft-ui-xaml. Os recursos que incluem Plano de Fundo em seus nomes representam o acrílico em segundo plano, enquanto o InApp se refere ao acrílico no aplicativo.

Para pintar uma superfície específica, aplique um dos recursos de tema do WinUI 2 às telas de fundo do elemento, assim como você aplicaria qualquer outro recurso de pincel.

<Grid Background="{ThemeResource AcrylicBackgroundFillColorDefaultBrush}">

Pincel acrílico personalizado

Você pode optar por adicionar uma tonalidade de cor ao acrílico do aplicativo para mostrar a identidade visual ou garantir equilíbrio visual em relação aos outros elementos da página. Para exibir cores em vez da escala de cinza, você deverá definir seus próprios pincéis acrílicos utilizando as seguintes propriedades.

• 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: o marcador para especificar se você deseja o acrílico de fundo ou o acrílico do aplicativo.
• FallbackColor: a cor sólida que substitui o acrílico no modo de Economia de bateria. Para o acrílico de fundo, a cor de fallback também substituirá o acrílico quando o aplicativo não estiver na janela da área de trabalho ativa ou quando o aplicativo estiver sendo executado no telefone ou no Xbox.

Para adicionar um pincel acrílico, defina os três recursos para os temas escuro, claro e de alto contraste. Observe que em alto contraste, recomendamos usar um SolidColorBrush com a mesma x:Key do AcrylicBrush escuro/claro.

Observação

Se você não especificar um valor para TintLuminosityOpacity, o sistema ajustará automaticamente o seu valor com base no 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 o AcrylicBrush no código. Se seu aplicativo dá suporte a diversos sistemas operacionais, certifique-se de verificar se a API está disponível no computador do usuário.

if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.UI.Xaml.Media.AcrylicBrush"))
{
    Windows.UI.Xaml.Media.AcrylicBrush myBrush = new Windows.UI.Xaml.Media.AcrylicBrush();
    myBrush.BackgroundSource = Windows.UI.Xaml.Media.AcrylicBackgroundSource.HostBackdrop;
    myBrush.TintColor = Color.FromArgb(255, 202, 24, 37);
    myBrush.FallbackColor = Color.FromArgb(255, 202, 24, 37);
    myBrush.TintOpacity = 0.6;

    grid.Fill = myBrush;
}
else
{
    SolidColorBrush myBrush = new SolidColorBrush(Color.FromArgb(255, 202, 24, 37));

    grid.Fill = myBrush;
}

Estender o acrílico até a barra de título

Para dar uma aparência perfeita à janela do aplicativo, é possível usar o acrílico na área da barra de título. Este exemplo estende o acrílico até a barra de título, definindo as propriedades do objeto ApplicationViewTitleBarButtonBackgroundColor e ButtonInactiveBackgroundColor como Colors.Transparent.

private void ExtendAcrylicIntoTitleBar()
{
    CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
    ApplicationViewTitleBar titleBar = ApplicationView.GetForCurrentView().TitleBar;
    titleBar.ButtonBackgroundColor = Colors.Transparent;
    titleBar.ButtonInactiveBackgroundColor = Colors.Transparent;
}

Este código pode ser colocado no método OnLaunched (App.xaml.cs) do aplicativo, após a chamada para Window.Activate, como mostrado aqui, ou na primeira página do aplicativo.

// Call your extend acrylic code in the OnLaunched event, after
// calling Window.Current.Activate.
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
    Frame rootFrame = Window.Current.Content as Frame;

    // Do not repeat app initialization when the Window already has content,
    // just ensure that the window is active
    if (rootFrame == null)
    {
        // Create a Frame to act as the navigation context and navigate to the first page
        rootFrame = new Frame();

        rootFrame.NavigationFailed += OnNavigationFailed;

        if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
        {
            //TODO: Load state from previously suspended application
        }

        // Place the frame in the current Window
        Window.Current.Content = rootFrame;
    }

    if (e.PrelaunchActivated == false)
    {
        if (rootFrame.Content == null)
        {
            // When the navigation stack isn't restored navigate to the first page,
            // configuring the new page by passing required information as a navigation
            // parameter
            rootFrame.Navigate(typeof(MainPage), e.Arguments);
        }
        // Ensure the current window is active
        Window.Current.Activate();

        // Extend acrylic
        ExtendAcrylicIntoTitleBar();
    }
}

Além disso, você precisará desenhar o título do seu aplicativo, que em geral aparece automaticamente na barra de título, com um TextBlock usando CaptionTextBlockStyle. Para saber mais, confira a personalização da barra de título.

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 criar uma experiência perfeita, combinando de maneira sutil com os entornos do aplicativo.
• Não coloque o acrílico da área de trabalho em grandes superfícies de plano de fundo do seu aplicativo.
• Não coloque vários painéis acrílicos próximos uns dos outros porque isso resulta em uma costura visível indesejável.
• Não coloque texto de cores destacadas sobre superfícies acrílicas.

Como projetamos o acrílico

Ajustamos os componentes principais do acrílico para alcançar uma aparência e propriedades únicas. Começamos com a translucência, 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

Obter o código de exemplo

• Exemplo da Galeria do WinUI 2 – confira todos os controles XAML em um formato interativo.

Artigos relacionados

Visão geral do Fluent Design