Como criar texto com uma sombra

Os exemplos nesta seção mostram como criar um efeito de sombra para o texto exibido.

Exemplo

O objeto DropShadowEffect permite que você crie uma variedade de efeitos de sombra para objetos WPF (Windows Presentation Foundation). O exemplo a seguir mostra um efeito de sombra suspensa aplicado ao texto. Nesse caso, a sombra é uma sombra suave, o que significa que a cor da sombra fica desfocada.

Você pode controlar a largura de uma sombra definindo a propriedade ShadowDepth. Um valor de 4.0 indica uma largura de sombra de 4 pixels. Você pode controlar a maciez ou desfoque de uma sombra modificando a propriedade BlurRadius. Um valor de 0.0 não indica nenhum desfoque. O exemplo de código a seguir mostra como criar uma sombra suave.

<!-- Soft single shadow. -->
<TextBlock
  Text="Shadow Text"
  Foreground="Teal">
  <TextBlock.Effect>
    <DropShadowEffect
      ShadowDepth="4"
      Direction="330"
      Color="Black"
      Opacity="0.5"
     BlurRadius="4"/>
  </TextBlock.Effect>
</TextBlock>

Observação

Esses efeitos de sombra não passam pelo pipeline de renderização de texto do WPF (Windows Presentation Foundation). Como resultado, ClearType é desabilitado ao usar esses efeitos.

O exemplo a seguir mostra um efeito de sombra projetada forte aplicado ao texto. Nesse caso, a sombra não está desfocada.

Você pode criar uma sombra dura definindo a propriedade BlurRadius como 0.0, o que indica que nenhum desfoque é usado. Você pode controlar a direção da sombra modificando a propriedade Direction. Defina o valor direcional dessa propriedade como um grau entre 0 e 360. A ilustração a seguir mostra os valores direcionais da configuração da propriedade Direction.

O exemplo de código a seguir mostra como criar uma sombra dura.

<!-- Hard single shadow. -->
<TextBlock
  Text="Shadow Text"
  Foreground="Maroon">
  <TextBlock.Effect>
    <DropShadowEffect
      ShadowDepth="6"
      Direction="135"
      Color="Maroon"
      Opacity="0.35"
      BlurRadius="0.0" />
  </TextBlock.Effect>
</TextBlock>

Usando um efeito de desfoque

Um BlurBitmapEffect pode ser usado para criar um efeito semelhante a uma sombra que pode ser colocado atrás de um objeto de texto. Um efeito de bitmap de desfoque aplicado ao texto desfoca o texto uniformemente em todas as direções.

O exemplo a seguir mostra um efeito de desfoque aplicado ao texto.

O exemplo de código a seguir mostra como criar um efeito de desfoque.

<!-- Shadow effect by creating a blur. -->
<TextBlock
  Text="Shadow Text"
  Foreground="Green"
  Grid.Column="0" Grid.Row="0" >
  <TextBlock.Effect>
    <BlurEffect
      Radius="8.0"
      KernelType="Box"/>
  </TextBlock.Effect>
</TextBlock>
<TextBlock
  Text="Shadow Text"
  Foreground="Maroon"
  Grid.Column="0" Grid.Row="0" />

Usando uma transformação de movimentação

Um TranslateTransform pode ser usado para criar um efeito semelhante a uma sombra que pode ser colocado atrás de um objeto de texto.

O exemplo de código a seguir usa um TranslateTransform para deslocar o texto. Neste exemplo, uma cópia ligeiramente deslocada de texto abaixo do texto primário cria um efeito de sombra.

O exemplo de código a seguir mostra como criar uma transformação para um efeito de sombra.

<!-- Shadow effect by creating a transform. -->
<TextBlock
  Foreground="Black"
  Text="Shadow Text"
  Grid.Column="0" Grid.Row="0">
  <TextBlock.RenderTransform>
    <TranslateTransform X="3" Y="3" />
  </TextBlock.RenderTransform>
</TextBlock>
<TextBlock
  Foreground="Coral"
  Text="Shadow Text"
  Grid.Column="0" Grid.Row="0">
</TextBlock>