Como: Create Text with a Shadow

Os exemplos nesta seção mostram como criar uma variedade de efeitos de sombra para texto exibido.

Observação:
Para obter um exemplo de código completo que ilustra os efeitos de sombra de texto, consulte Exemplo de sombra de texto.

Exemplo

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

Exemplo de texto com uma sobra suave.

Você pode controlar a largura de uma sombra definindo a propriedade ShadowDepth. Um valor de 4.0 indica uma sombra de 4 pixels de largura. Você pode controlar a suavidade de uma sombra modificando a propriedade Softness. Um valor de 0.0 indica nenhuma suavidade -- um valor de 1.0 indica suavidade total. O exemplo de código a seguir mostra como criar uma sombra suave.

<!-- Soft single shadow. -->
<TextBlock
  Text="Shadow Text"
  Foreground="Teal">
  <TextBlock.BitmapEffect>
    <DropShadowBitmapEffect
      ShadowDepth="4"
      Direction="330"
      Color="Black"
      Opacity="0.5"
      Softness="0.25" />
  </TextBlock.BitmapEffect>
</TextBlock>

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

O exemplo a seguir mostra um tipo comum de efeito de sombra aplicado a texto. Nesse caso, a sombra não é borrada.

Exemplo de texto com uma sombra sólida.

Você pode criar uma sombra sólida definindo a propriedade Softness para 0.0, o que indica que nenhuma suavidade é utilizada. Você pode controlar a direção de uma sombra modificando a propriedade Direction. Defina o valor direcional desta propriedade como um grau entre 0 e 360. O diagrama a seguir mostra os valores direcionais de configuração da propriedade Direction.

Diagrama de Direção de Sombra

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

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

O exemplo a seguir mostra um efeito de sombra que combina sombra sólida e suave aplicada a texto.

Exemplo de texto com uma sombra sólida e suave.

O exemplo de código a seguir mostra como criar uma sombra combinada sólida e suave.

<!-- Hard shadow on top of soft shadow. -->
<TextBlock
  Text="Shadow Text"
  Foreground="CornflowerBlue">
  <TextBlock.BitmapEffect>
    <BitmapEffectGroup>
      <BitmapEffectGroup.Children>
        <DropShadowBitmapEffect
          ShadowDepth="5"
          Direction="330"
          Color="DarkSlateBlue"
          Opacity="0.75"
          Softness="0.50" />
        <DropShadowBitmapEffect
          ShadowDepth="2"
          Direction="330"
          Color="Maroon"
          Opacity="0.5"
          Softness="0.0" />
      </BitmapEffectGroup.Children>
    </BitmapEffectGroup>
  </TextBlock.BitmapEffect>
</TextBlock>

O exemplo a seguir mostra uma variação do exemplo anterior. Nesse exemplo, a sombra suave mostra uma intensidade de cor aleatória. Você pode controlar a intensidade da cor aleatória modificando a propriedade Noise. Um valor de 0.0 indica nenhum ruído -- um valor de 1.0 indica máximo ruído.

Exemplo de texto com uma sombra sólida e suave com ruído.

O exemplo de código a seguir mostra como criar uma sombra com ruído.

<!-- Hard shadow on top of noisy shadow. -->
<TextBlock
  Text="Shadow Text"
  Foreground="Silver">
  <TextBlock.BitmapEffect>
    <BitmapEffectGroup>
      <BitmapEffectGroup.Children>
        <DropShadowBitmapEffect
          ShadowDepth="3"
          Direction="330"
          Color="Black"
          Opacity="0.75"
          Softness="0.0" />
        <DropShadowBitmapEffect
          Noise="0.5"
          ShadowDepth="6"
          Direction="330"
          Color="Black"
          Opacity="0.35"
          Softness="0.25" />
      </BitmapEffectGroup.Children>
    </BitmapEffectGroup>
  </TextBlock.BitmapEffect>
</TextBlock>

Utilizando um Efeito de Bitmap de Brilho Externo

Um OuterGlowBitmapEffect pode ser utilizado para criar um efeito semelhante a sombra. Entretanto, um brilho externo irradia uniformemente atrás do texto, diferente do DropShadowBitmapEffect, que renderiza de acordo com uma direção especificada.

O exemplo a seguir mostra um efeito de brilho externo aplicado a texto.

Exemplo de texto com um efeito de brilho externo.

Você pode controlar a largura de um brilho externo definindo a propriedade GlowSize. Um valor de 4.0 indica um brilho externo de 4 pixels de largura. O exemplo a seguir mostra como criar um efeito de brilho externo.

<!-- Shadow effect by creating an outer glow. -->
<TextBlock
  Text="Shadow Text"
  Foreground="SteelBlue">
  <TextBlock.BitmapEffect>
    <OuterGlowBitmapEffect
      GlowSize="4.0"
      GlowColor="Orange"
      Opacity="1.0"/>
  </TextBlock.BitmapEffect>
</TextBlock>

Utilizando um Efeito de Bitmap Borrado

Um BlurBitmapEffect pode ser utilizado para criar um efeito semelhante a sombra que pode ser posicionado atrás de um objeto de texto. Um efeito de bitmap borrado aplicado a texto borra o texto uniformemente em todas as direções.

O exemplo a seguir mostra um efeito de borrar aplicado a texto.

Exemplo de texto com efeito de borrar.

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

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

Utilizando uma Transformação Translate

Um TranslateTransform pode ser utilizado para criar um efeito semelhante a sombra que pode ser posicionado atrás de um objeto de texto.

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

Exemplo de texto utilizando uma transformação para efeito de sombra

O exemplo a seguir mostra como criar uma transformação para 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>

Consulte também

Tarefas

Exemplo de sombra de texto

Conceitos

Visão Geral de Efeitos de Bitmap

Referência

BlurBitmapEffect

DropShadowBitmapEffect

OuterGlowBitmapEffect