Como: Create Text with a Shadow

Atualização: August 2010

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

Exemplo

The DropShadowEffect object allows you to create a variety of drop shadow effects for Windows Presentation Foundation (WPF) objects. O exemplo a seguir mostra um efeito de sombra projetada aplicado ao texto. In this case, the shadow is a soft shadow, which means the shadow color blurs.

Example of text with a soft shadow

You can control the width of a shadow by setting the ShadowDepth property. Um valor de 4.0 indica a largura da sombra de 4 pixels. You can control the softness, or blur, of a shadow by modifying the BlurRadius property. Um valor de 0.0 indica sem desfoque. The following code example shows how to create a soft shadow.

<!-- 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>

The following example shows a hard drop shadow effect applied to text. In this case, the shadow is not blurred.

Example of text with a hard shadow

You can create a hard shadow by setting the BlurRadius property to 0.0, which indicates that no blurring is used. You can control the direction of the shadow by modifying the Direction property. Set the directional value of this property to a degree between 0 and 360. A ilustração a seguir mostra os valores de direcionais da Direction configuração de propriedade.

DropShadow Direction diagram

The following code example shows how to create a hard shadow.

<!-- 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

A BlurBitmapEffect can be used to create a shadow-like effect that can be placed behind a text object. A blur bitmap effect applied to text blurs the text evenly in all directions.

The following example shows a blur effect applied to text.

Example of text with a blur effect

The following code example shows how to create a blur effect.

<!-- 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" />

Using a Translate Transform

A TranslateTransform can be used to create a shadow-like effect that can be placed behind a text object.

The following code example uses a TranslateTransform to offset text. In this example, a slightly offset copy of text below the primary text creates a shadow effect.

Example of text using a transform for a shadow effect

The following code example shows how to create a transform for a shadow effect.

<!-- 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>

Histórico de alterações