Compartir a través de

Cómo: Crear texto con sombreado

Actualización: noviembre 2007

En los ejemplos de esta sección se muestra cómo crear gran variedad de efectos de sombra para el texto mostrado.

Nota

Para obtener un ejemplo de código completo en el que se muestran los efectos de sombra para el texto, consulte Ejemplo Text Shadow.

Ejemplo

El objeto DropShadowBitmapEffect permite crear diversos de efectos de sombra para los objetos de Windows Presentation Foundation (WPF). En el ejemplo siguiente se muestra un tipo típico de efecto de sombra paralela aplicado 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
Sombra de texto con Suavidad = 0,25

Puede controlar el ancho de una sombra estableciendo la propiedad ShadowDepth. Un valor de 4.0 indica un ancho de la sombra de 4 píxeles. Puede controlar la suavidad, o desenfoque, de una sombra modificando la propiedad Softness. Un valor de 0.0 indica que no está desenfocada en absoluto; un valor de 1.0 indica el desenfoque total. 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.BitmapEffect>
    <DropShadowBitmapEffect
      ShadowDepth="4"
      Direction="330"
      Color="Black"
      Opacity="0.5"
      Softness="0.25" />
  </TextBlock.BitmapEffect>
</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
Sombra de texto con Suavidad = 0

Puede crear una sombra nítida estableciendo la propiedad Softness 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 el diagrama siguiente se muestran los valores direccionales del valor de la propiedad Direction.

Diagrama de dirección de DropShadow
Valor de grado de sombra paralela de una sombra

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.BitmapEffect>
    <DropShadowBitmapEffect
      ShadowDepth="6"
      Direction="135"
      Color="Maroon"
      Opacity="0.35"
      Softness="0.0" />
  </TextBlock.BitmapEffect>
</TextBlock>

En el ejemplo siguiente se muestra un efecto de sombra que combina la aplicación de una sombra nítida y suave al texto.

El ejemplo de texto con una sombra nítida y suave
Texto con dos sombras

En el ejemplo de código siguiente se muestra cómo crear y combinar una sombra nítida y 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>

En el ejemplo siguiente se muestra una variación del ejemplo anterior. En este ejemplo, la sombra suave muestra una intensidad de color aleatoria. Puede controlar la intensidad de color aleatoria modificando la propiedad Noise. Un valor de 0.0 indica ningún ruido, un valor de 1.0 indica el ruido máximo.

Ejemplo de texto con una sombra nítida y suave con ruido
Sombra de texto con ruido

En el ejemplo de código siguiente se muestra cómo se crea una sombra con ruido.

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

Utilizar un efecto de resplandor exterior de mapa de bits

OuterGlowBitmapEffect se puede utilizar para crear un efecto similar a la sombra. Sin embargo, un resplandor exterior se irradia uniformemente por detrás del texto, a diferencia de DropShadowBitmapEffect, que se representa según una dirección especificada.

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

Ejemplo de texto con un efecto del resplandor exterior
Sombra de texto usando OuterGlowBitmapEffect

Puede controlar el ancho de un resplandor exterior estableciendo la propiedad GlowSize. Un valor de 4.0 indica un ancho del resplandor exterior de 4 píxeles. En el siguiente ejemplo de código se muestra cómo crear un efecto de resplandor exterior.

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

Utilizar un efecto de mapa de bits de desenfoque

Un BlurBitmapEffect se puede utilizar para crear un efecto similar a la sombra que se puede colocar detrás de 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
Sombra de texto usando BlurBitmapEffect

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.BitmapEffect>
    <BlurBitmapEffect
      Radius="8.0"
      KernelType="Box"/>
  </TextBlock.BitmapEffect>
</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
Sombra de texto usando TranslateTransform

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>

Vea también

Tareas

Ejemplo Text Shadow

Conceptos

Información general sobre efectos de mapa de bits

Referencia

BlurBitmapEffect

DropShadowBitmapEffect

OuterGlowBitmapEffect

  • Last updated on