Cómo: Crear texto con sombreado

En los ejemplos de esta sección se muestra cómo crear un efecto de sombra para el texto mostrado.

Ejemplo

El objeto DropShadowEffect permite crear diversos de efectos de sombra para los objetos de Windows Presentation Foundation (WPF). En el ejemplo siguiente se muestra un efecto de sombra paralela aplicada al texto. En este caso, la sombra es una sombra suave, lo que significa que su color está desenfocado.

Ejemplo de texto con una sombra suave

Puede controlar el ancho de una sombra estableciendo la propiedad ShadowDepth. El valor 4.0 indica un ancho de la sombra de 4 píxeles. Puede controlar la suavidad, o desenfoque, de una sombra modificando la propiedad BlurRadius. El valor 0.0 indica ausencia de desenfoque. En el ejemplo de código siguiente se muestra cómo se crea una 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>

Nota
Estos efectos de sombra no atraviesan la canalización de representación de texto de Windows Presentation Foundation (WPF).Como resultado, ClearType se deshabilita al utilizar estos efectos.

En el ejemplo siguiente se muestra un efecto de sombra paralela nítida aplicada al texto. En este caso, la sombra no está desenfocada.

Ejemplo de texto con una sombra nítida

Puede crear una sombra nítida estableciendo la propiedad BlurRadius en 0.0, que indica que no se utiliza ningún desenfoque. Puede controlar la dirección de la sombra modificando la propiedad Direction. Establezca el valor direccional de esta propiedad en un valor de grados comprendido entre 0 y 360. En la ilustración siguiente se muestran los valores direccionales del valor de la propiedad Direction.

Diagrama de dirección de DropShadow

En el ejemplo de código siguiente se muestra cómo se crea una sombra nítida.

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

Utilizar un efecto de desenfoque

Se puede utilizar un BlurBitmapEffect para crear un efecto similar a la sombra que se pueda colocar tras un objeto de texto. Un efecto de mapa de bits de desenfoque aplicado al texto lo desenfoca de manera uniforme en todas direcciones.

En el ejemplo siguiente se muestra un efecto de desenfoque aplicado al texto.

Ejemplo de texto con un efecto de desenfoque

En el ejemplo de código siguiente se muestra cómo se crea un efecto de desenfoque.

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

Utilizar una transformación de traslación

Un TranslateTransform se puede utilizar para crear un efecto similar a la sombra que se puede colocar detrás de un objeto de texto.

En el ejemplo de código siguiente se utiliza un objeto TranslateTransform para desplazar texto. En este ejemplo, una copia del texto primario ligeramente desplazada crea un efecto de sombra.

Ejemplo de texto que utiliza una transformación para un efecto de sombra

En el ejemplo de código siguiente se muestra cómo crear una transformación para un efecto 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>

Historial de cambios