Acrílico no aplicativo

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

Observação

No WinUI 3, AcrylicBrush disponibiliza acrílico apenas na aplicação — aplica um desfoque e uma matiz ao conteúdo XAML na janela da aplicação, não à área de trabalho nem ao conteúdo atrás da janela. A propriedade UWP BackgroundSource (que permitia um modo HostBackdrop para o efeito acrílico ao nível da janela) não está disponível no WinUI 3. Para um efeito acrílico ao nível da janela que permite ver o ambiente de trabalho através da janela da sua aplicação, defina Window.SystemBackdrop como DesktopAcrylicBackdrop. Para aplicar um material de fundo do sistema (Mica ou Acrylic do compositor do sistema operativo) a um elemento específico da interface, em vez de a uma janela inteira, utilize SystemBackdropElement.

Abre a aplicação WinUI Gallery e vê o Acrílico em ação

WinUI inclui uma coleção de recursos de tema de pincel que respeitam o tema do aplicativo e retornam a cores sólidas conforme necessário. Para pintar uma superfície específica, aplique um dos recursos temáticos aos fundos dos elementos, tal como aplicaria a qualquer outro recurso de pincel.

<Grid Background="{ThemeResource AcrylicInAppFillColorDefaultBrush}">

Observação

Pode ver estes recursos no ficheiro de recursos do tema AcrylicBrush, no microsoft-ui-xaml GitHub repositório.

Pincel acrílico personalizado

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

  • TintColor: a camada de sobreposição de cor/tonalidade.
  • TintOpacity: a opacidade da camada de tinta.
  • TintLuminosityOpacity: controla a quantidade de saturação permitida através da superfície de acrílico do fundo.
  • FallbackColor: a cor sólida que substitui o acrílico quando o efeito não pode ser renderizado — por exemplo, no modo Poupança de Bateria, quando o utilizador desativa os efeitos de Transparência nas Definições > de Personalização > de Cores, ou em hardware de gama baixa.

Amostras de acrílico de tema claro

Amostras de acrílico 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 que utilizes um SolidColorBrush com o mesmo x:Key que o "AcrylicBrush" escuro/claro.

Observação

Se não especificar um valor TintLuminosityOpacity, o sistema ajustará automaticamente o valor com base no TintColor e no 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