Compartilhar via

Sombras em aplicativos Windows

Windows aplicativos usam sombras para expressar profundidade e adicionar hierarquia visual. Sombras ajudam a criar a sensação de profundidade, orientando o foco do usuário para os elementos mais importantes em sua interface.

Sombra é uma maneira de um usuário perceber a elevação. A luz acima de um objeto elevado cria uma sombra na superfície abaixo. Quanto maior o objeto, maior e mais suave a sombra se torna. Objetos elevados na interface do usuário não precisam ter sombras, mas ajudam a criar a aparência da elevação.

Em aplicativos Windows, as sombras devem ser usadas de maneira proposital e não estética. O uso de muitas sombras diminuirá ou eliminará a capacidade da sombra de concentrar o usuário.

Se você usar controles padrão, as sombras já serão incorporadas à interface do usuário. No entanto, você pode incluir manualmente sombras em sua interface do usuário usando as APIs ThemeShadow ou DropShadow .

ThemeShadow

O tipo ThemeShadow pode ser aplicado a qualquer elemento XAML para desenhar sombras adequadamente com base nas coordenadas x, y, z.

  • Ele aplica sombras aos elementos com base no valor de profundidade Z, emulando profundidade.
  • Ele mantém sombras consistentes em todas as aplicações graças à estética de sombra embutida.

Veja como ThemeShadow foi implementado em um MenuFlyout. MenuFlyout tem uma sombra interna com uma profundidade de 32px aplicada ao menu principal e todos os menus aninhados.

Uma captura de tela de ThemeShadow aplicada a um MenuFlyout com três menus abertos e aninhados.

Abra o aplicativo da Galeria do WinUI e veja ThemeShadow em ação

ThemeShadow em controles comuns

Os seguintes controles comuns usarão o ThemeShadow automaticamente para projetar sombras a partir de uma profundidade de 32px, a menos que especificado de outra forma.

ThemeShadow em Popups

Frequentemente, a interface do aplicativo usa um pop-up para cenários em que é necessária a atenção do usuário e uma ação rápida. Esses são ótimos exemplos quando a sombra deve ser usada para ajudar a criar hierarquia na interface do usuário do aplicativo.

ThemeShadow projeta automaticamente sombras quando aplicado a qualquer elemento XAML em um Popup. Ele lançará sombras no conteúdo da tela de fundo do aplicativo por trás dele e quaisquer outros Pop-ups abertos abaixo dele.

Para usar ThemeShadow com Popups, use a propriedade Shadow para aplicar um ThemeShadow a um elemento XAML. Em seguida, eleve o elemento acima dos outros elementos atrás dele, por exemplo, usando o componente z da propriedade Translation. Para a maioria das interfaces de pop-up, a elevação padrão recomendada em relação ao conteúdo de fundo do aplicativo é de 32 pixels efetivos.

Este exemplo mostra um retângulo em um popup lançando uma sombra no conteúdo da tela de fundo do aplicativo e quaisquer outros popups por trás dele.

<Popup>
    <Rectangle x:Name="PopupRectangle" Fill="Lavender" Height="48" Width="96">
        <Rectangle.Shadow>
            <ThemeShadow />
        </Rectangle.Shadow>
    </Rectangle>
</Popup>

// Elevate the rectangle by 32px
PopupRectangle.Translation += new Vector3(0, 0, 32);

Um único pop-up retangular com uma sombra.

Como desabilitar ThemeShadow padrão em controles de Menu Suspenso personalizados

Controles baseados em Flyout, DatePickerFlyout, MenuFlyout ou TimePickerFlyout usam o ThemeShadow automaticamente para converter uma sombra.

Se a sombra padrão não parecer correta no conteúdo do controle, você poderá desabilitá-la definindo a propriedade false no FlyoutPresenter associado:

<Flyout>
    <Flyout.FlyoutPresenterStyle>
        <Style TargetType="FlyoutPresenter">
            <Setter Property="IsDefaultShadowEnabled" Value="False" />
        </Style>
    </Flyout.FlyoutPresenterStyle>
</Flyout>

ThemeShadow em outros elementos

Observação

Começando com Windows 11, se o aplicativo for direcionado ao SDK Windows versão 22000 ou posterior, a coleção Receivers será ignorada. No entanto, não haverá erros e a sombra continuará funcionando.

Em geral, recomendamos que você pense cuidadosamente sobre o uso da sombra e limite seu uso a casos em que ela introduz uma hierarquia visual significativa. No entanto, fornecemos uma maneira de projetar uma sombra de qualquer elemento da interface do usuário, caso você tenha cenários avançados que necessitem disso.

Para lançar uma sombra de um elemento XAML que não está em um Popup, você deve especificar claramente os outros elementos que podem receber a sombra na coleção ThemeShadow.Receivers. Os receptores não podem ser um ancestral do emissor na árvore visual.

Este exemplo mostra dois Retângulos que projetam sombras sobre uma Grade atrás deles:

<Grid>
    <Grid.Resources>
        <ThemeShadow x:Name="SharedShadow" />
    </Grid.Resources>

    <Grid x:Name="BackgroundGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" />

    <Rectangle x:Name="Rectangle1" Height="100" Width="100" Fill="Turquoise" Shadow="{StaticResource SharedShadow}" />

    <Rectangle x:Name="Rectangle2" Height="100" Width="100" Fill="Turquoise" Shadow="{StaticResource SharedShadow}" />
</Grid>

/// Add BackgroundGrid as a shadow receiver and elevate the casting buttons above it
SharedShadow.Receivers.Add(BackgroundGrid);

Rectangle1.Translation += new Vector3(0, 0, 16);
Rectangle2.Translation += new Vector3(120, 0, 32);

Dois retângulos turquesas um ao lado do outro, ambos com sombras.

Sombra projetada

DropShadow não fornece valores de sombra internos e você precisa especificá-los por conta própria. Para obter implementações de exemplo, consulte a classe DropShadow .

Dica

Começando com Windows 11, se o aplicativo for direcionado ao SDK Windows versão 22000 ou posterior, ThemeShadow se comportará como uma sombra suspensa. Se você estiver usando DropShadow, talvez considere usar ThemeShadow em vez disso.

Qual sombra devo usar?

Propriedade ThemeShadow Dropshadow
SDK mínimo SDK 18362 SDK 14393
Adaptabilidade Yes Não
Personalização Não Yes
Fonte de luz Nenhum Nenhum
Com suporte em ambientes 3D Sim (embora funcione em um ambiente 3D, as sombras são emuladas.) Não
  • Tenha em mente que a finalidade da sombra é fornecer uma hierarquia significativa, não como um tratamento visual simples.
  • Geralmente, é recomendável usar ThemeShadow, que fornece valores de sombra consistentes.
  • Para preocupações com o desempenho, limite o número de sombras, use outro tratamento visual ou use DropShadow.
  • Se você tiver cenários mais avançados para alcançar a hierarquia visual, considere usar outro tratamento visual (por exemplo, cor). Se a sombra for necessária, use DropShadow.
  • Last updated on