Comment : créer du texte avec une ombre

Mise à jour : novembre 2007

Les exemples de cette section indiquent comment créer divers effets d'ombre pour du texte affiché.

Remarque :
Pour un exemple de code complet qui illustre des effets d'ombre pour le texte, consultez Ombrage de texte, exemple.

Exemple

L'objet DropShadowBitmapEffect vous permet de créer divers effets d'ombre portée pour les objets Windows Presentation Foundation (WPF). L'exemple suivant présente un type classique d'effet d'ombre portée appliqué au texte. Dans ce cas, l'ombre est une ombre légère, ce qui signifie que la couleur ombrée devient floue.

Exemple de texte avec une ombre légère

Vous pouvez contrôler la largeur d'une ombre en définissant la propriété ShadowDepth. Une valeur de 4.0 indique une largeur d'ombre de 4 pixels. Vous pouvez contrôler la douceur, ou flou d'une ombre en modifiant la propriété Softness. Une valeur de 0.0 indique aucun flou, une valeur de 1.0 indique un flou total. L'exemple de code suivant montre comment créer une ombre légère.

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

Remarque :
Ces effets d'ombre ne traversent pas le pipeline de rendu de texte de Windows Presentation Foundation (WPF). En conséquence, ClearType est désactivé lors de l'utilisation de ces effets.

L'exemple suivant présente un effet d'ombre portée important appliqué au texte. Dans ce cas, l'ombre n'est pas floue.

Exemple de texte avec une ombre foncée

Vous pouvez créer une ombre foncée en définissant la propriété Softness à 0.0, ce qui indique qu'aucun flou n'est utilisé. Vous pouvez contrôler la direction de l'ombre en modifiant la propriété Direction. Définissez la valeur directionnelle de cette propriété à un degré entre 0 et 360. Le diagramme suivant montre toutes les valeurs de direction de la propriété Direction.

Diagramme de direction DropShadow

L'exemple de code suivant montre comment créer une ombre foncée.

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

L'exemple suivant affiche un effet d'ombre portée qui combine à la fois une ombre légère et foncée appliquée au texte.

Exemple de texte avec une ombre légère et foncée

L'exemple de code suivant indique comment créer une ombre légère et foncée combinée.

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

L'exemple suivant est une variante de l'exemple précédent. Dans cet exemple, l'ombre légère affiche l'intensité de couleur aléatoire. Vous pouvez contrôler l'intensité de couleur aléatoire en modifiant la propriété Noise. Une valeur de 0.0 indique aucun bruit, une valeur de 1.0 indique un bruit maximal.

Exemple de texte avec une ombre foncée et une ombre légère avec du bruit

L'exemple de code suivant montre comment créer une ombre légère avec du bruit.

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

Utilisation d'un effet bitmap lumineux externe

Un OuterGlowBitmapEffect peut être utilisé pour créer un effet similaire à l'ombre. Toutefois, une lumière externe rayonne également derrière le texte, contrairement au DropShadowBitmapEffect, qui restitue d'après une direction spécifiée.

L'exemple suivant présente un effet de lumière externe appliqué au texte.

Exemple de texte avec un effet de lumière externe

Vous pouvez contrôler la largeur d'une lumière externe en définissant la propriété GlowSize. Une valeur de 4.0 indique une largeur de lumière externe de 4 pixels. Le code suivant montre comment créer un effet de lumière externe.

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

Utilisation d'un effet bitmap flou

Un BlurBitmapEffect peut être utilisé pour créer un effet similaire à l'ombre pouvant être placé derrière un objet de texte. Un effet bitmap flou appliqué au texte rend le texte flou uniformément dans toutes les directions.

L'exemple suivant présente un effet flou appliqué au texte.

Exemple de texte avec un effet flou

L'exemple de code suivant montre comment créer un effet flou .

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

Utiliser une transformation de traduction

Une TranslateTransform peut être utilisée pour créer un effet similaire à l'ombre pouvant être placé derrière un objet de texte.

L'exemple de code suivant utilise TranslateTransform pour décaler le texte. Dans cet exemple, une copie légèrement décalée de texte en dessous du texte principal crée un effet d'ombre.

Exemple de texte utilisant une transformation pour un effet d'ombre

L'exemple de code suivant indique comment créer une transformation pour un effet d'ombre.

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

Voir aussi

Tâches

Ombrage de texte, exemple

Concepts

Vue d'ensemble des effets bitmap

Référence

BlurBitmapEffect

DropShadowBitmapEffect

OuterGlowBitmapEffect