Cómo: Crear texto con una sombra

Los ejemplos de esta sección muestran cómo crear un efecto de sombra para el texto mostrado.

Ejemplo

El DropShadowEffect objeto permite crear una variedad de efectos de sombra paralela para objetos de Windows Presentation Foundation (WPF). En el siguiente ejemplo se muestra un efecto de sombra paralela aplicado al texto. En este caso, la sombra es una sombra suave, lo que significa que el color de la sombra se difumina.

Puede controlar el ancho de una sombra estableciendo la ShadowDepth propiedad . Un valor de 4.0 indica un ancho de sombra de 4 píxeles. Puede controlar la suavidad, o desenfoque, de una sombra modificando la propiedad BlurRadius. Un valor de 0.0 indica que no hay desenfoque. En el ejemplo de código siguiente se muestra cómo crear 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 pasan por la canalización de representación de texto de Windows Presentation Foundation (WPF). Como resultado, ClearType se deshabilita cuando se usan estos efectos.

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

Puede crear una sombra dura estableciendo la propiedad BlurRadius en 0.0, lo que indica que no se usa ningún desenfoque. Puede controlar la dirección de la sombra modificando la Direction propiedad . Establezca el valor direccional de esta propiedad en un grado entre 0 y 360. En la ilustración siguiente se muestran los valores direccionales de la configuración de la Direction propiedad.

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

Usar un efecto de desenfoque

Se BlurBitmapEffect puede usar para crear un efecto similar a la sombra que se puede colocar detrás de un objeto de texto. Efecto de mapa de bits de desenfoque aplicado al texto desenfoca el texto de manera uniforme en todas las direcciones.

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

En el ejemplo de código siguiente se muestra cómo crear 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" />

Uso de una transformación de traducción

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

En el siguiente ejemplo de código se utiliza un TranslateTransform para desfasar el texto. En este ejemplo, una copia ligeramente desplazada del texto debajo del texto principal crea 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>