Partilhar via

Sombras nas aplicações do Windows

As aplicações do Windows usam sombras para expressar profundidade e adicionar hierarquia visual. As sombras ajudam a criar a aparência de elevação, guiando o foco do utilizador para os elementos mais importantes da sua interface.

A sombra é uma das formas como o utilizador percebe a elevação. A luz sobre um objeto elevado cria uma sombra na superfície abaixo. Quanto mais alto o objeto, maior e mais suave se torna a sombra. Objetos elevados na tua interface não precisam de ter sombras, mas ajudam a criar a aparência de elevação.

Nas aplicações Windows, as sombras devem ser usadas de forma intencional e não estética. Usar demasiadas sombras diminui ou elimina a capacidade da sombra de focar o utilizador.

Se usares controlos padrão, as sombras já estão incorporadas na tua interface. No entanto, pode incluir manualmente sombras na sua interface 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.

  • Aplica sombras aos elementos com base no valor de profundidade z, emulando profundidade.
  • Mantém as sombras consistentes ao longo e entre aplicações graças à estética das sombras incorporada.

Aqui está como o ThemeShadow foi implementado num MenuFlyout. O MenuFlyout tem uma sombra incorporada com uma profundidade de 32px aplicada ao menu principal e a todos os menus aninhados.

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

Abra a aplicação WinUI Gallery e veja o ThemeShadow em ação

ThemeShadow nos controlos comuns

Os seguintes controlos comuns usam automaticamente o ThemeShadow para projetar sombras a partir de 32px de profundidade, salvo indicação em contrário:

ThemeShadow nos Popups

É frequente que a interface da sua aplicação utilize um pop-up para situações em que precisa da atenção do utilizador e de uma ação rápida. Estes são ótimos exemplos em que o shadow deve ser usado para ajudar a criar hierarquia na interface da sua aplicação.

O ThemeShadow projeta automaticamente sombras quando aplicado a qualquer elemento XAML num Popup. Projetará sombras sobre o conteúdo de fundo do aplicativo atrás dele e em quaisquer outras janelas de pop-ups abertas abaixo dele.

Para usar o ThemeShadow com popups, use a propriedade Shadow para aplicar um ThemeShadow a um elemento XAML. Depois, eleve o elemento a partir de outros elementos atrás dele, por exemplo, usando o componente z da Translation propriedade. Para a maioria das interfaces pop-up, a elevação padrão recomendada em relação ao conteúdo de fundo da aplicação é de 32 píxeis efetivos.

Este exemplo mostra um Retângulo num Popup a projetar uma sombra sobre o conteúdo de fundo da aplicação e quaisquer outros Pop-ups atrá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.

Desativar o ThemeShadow por defeito nos controlos Flyout personalizados

Os controlos baseados em Flyout, DatePickerFlyout, MenuFlyout ou TimePickerFlyout usam automaticamente o ThemeShadow para projetar uma sombra.

Se a sombra padrão não parecer correta no conteúdo do seu controlo, pode desativá-la definindo a propriedade IsDefaultShadowEnabled no false FlyoutPresenter associado:

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

ThemeShadow noutros elementos

Observação

A partir de Windows 11, se a aplicação tiver como alvo a versão 22000 do SDK Windows ou posterior, a coleção Receivers é ignorada. No entanto, não haverá erros e a sombra continua a funcionar.

De um modo geral, encorajamo-lo a pensar cuidadosamente na utilização da sombra e a limitar o seu uso a casos em que introduza uma hierarquia visual significativa. No entanto, fornecemos uma forma de projetar uma sombra a partir de qualquer elemento da interface caso tenhas cenários avançados que o justifiquem.

Para projetar uma sombra a partir de um elemento XAML que não esteja num Popup, deve especificar explicitamente os outros elementos que podem receber a sombra na ThemeShadow.Receivers coleção. Os recetores não podem ser ancestrais do objeto emissor na árvore visual.

Este exemplo mostra dois retângulos que projetam sombras sobre uma grelha 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 turquesa lado a lado, ambos com sombras.

Sombra projetada

O DropShadow não fornece valores de sombra incorporados e tens de os especificar tu próprio. Para implementações de exemplo, veja a classe DropShadow.

Sugestão

A partir do Windows 11, se a aplicação tiver como alvo o Windows SDK versão 22000 ou posterior, o ThemeShadow comportar-se-á como uma sombra projetada. Se estiveres a usar o DropShadow, podes considerar usar o ThemeShadow em vez disso.

Que sombra devo usar?

Propriedade ThemeShadow DropShadow
Min SDK SDK 18362 SDK 14393
Adaptabilidade Yes Não
Personalização Não Yes
Fonte de luz Nenhum Nenhum
Suportado em ambientes 3D Sim (Embora funcione num ambiente 3D, as sombras são emuladas.) Não
  • Tenha em mente que o propósito da sombra é proporcionar uma hierarquia significativa, não apenas um tratamento visual.
  • De um modo geral, recomendamos usar o ThemeShadow, que fornece valores de sombra consistentes.
  • Para preocupações com o desempenho, limite o número de sombras, use outros tratamentos visuais ou use o DropShadow.
  • Se tiver cenários mais avançados para alcançar hierarquia visual, considere usar outros tratamentos visuais (por exemplo, cor). Se for preciso sombra, então use DropShadow.
  • Last updated on