Acrílico no aplicativo

Você pode aplicar acrílico nas superfícies do seu aplicativo usando um AcrylicBrush XAML ou recursos de tema predefinidos AcrylicBrush.

Observação

No WinUI 3, AcrylicBrush fornece acrílico apenas no aplicativo — ele aplica um desfoque e uma tonalidade ao conteúdo XAML dentro da janela do aplicativo, não à área de trabalho ou ao conteúdo atrás da janela. A propriedade UWP BackgroundSource (que habilitava o modo HostBackdrop para acrílico em nível de janela) não está disponível no WinUI 3. Para acrílico em nível de janela que mostra a área de trabalho através da janela do seu aplicativo, defina Window.SystemBackdrop como DesktopAcrylicBackdrop. Para aplicar um material de fundo do sistema (Mica ou Acrílico do compositor do SO) a um elemento de interface do usuário específico em vez de uma janela inteira, use SystemBackdropElement.

Abra o aplicativo da Galeria do WinUI e veja o Acrílico em ação

O WinUI inclui uma coleção de recursos de tema de pincel que respeitam o tema do aplicativo e recorrem a cores sólidas conforme necessário. Para pintar uma superfície específica, aplique um dos recursos de tema como plano de fundo do elemento, assim como faria com qualquer outro recurso de pincel.

<Grid Background="{ThemeResource AcrylicInAppFillColorDefaultBrush}">

Observação

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

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 cor em vez de escala de cinza, você precisa definir seus próprios pincéis acrílicos 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.
  • FallbackColor: a cor sólida que substitui o acrílico quando o efeito não pode ser renderizado , por exemplo, no modo Economia de Bateria, quando o usuário desativa efeitos de transparência em Cores de Personalização > de Configurações > ou em hardware de baixo nível.

Amostras de acrílico de tema claro

Amostras de acrílico de tema escuro

Opacidade da luminosidade em comparação com a opacidade da tonalidade

Para adicionar um pincel de acrílico, defina os três recursos para temas escuros, claros e de alto contraste. 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 esse valor com base no TintColor e TintOpacity.

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Default">
        <AcrylicBrush x:Key="MyAcrylicBrush"
            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"
            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.Background = myBrush;
  • Last updated on