Gewusst wie: Erstellen von Text mit einem Schatten

Die Beispiele in diesem Abschnitt erklären, wie Sie einen Schatteneffekt für angezeigten Text erstellen.

Beispiel

Mit diesem DropShadowEffect-Objekt können Sie eine Vielzahl von Schlagschatteneffekten für Objekte der Windows Presentation Foundation (WPF) erstellen. Das folgende Beispiel zeigt einen auf einen Text angewendeten Schlagschatteneffekt. In diesem Fall ist der Schatten ein weicher Schatten, d.h. die Schattenfarbe verwischt.

Sie können die Breite eines Schattens steuern, indem Sie die ShadowDepth-Eigenschaft einstellen. Ein Wert von 4.0 gibt eine Schattenbreite von 4 Pixeln an. Sie können die Weichheit bzw. Unschärfe eines Schattens steuern, indem Sie die BlurRadius-Eigenschaft ändern. Ein Wert von 0.0 gibt an, dass es keinen Weichzeichner gibt. Im folgenden Codebeispiel wird gezeigt, wie ein weicher Schatten erstellt wird.

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

Hinweis

Diese Schatteneffekte navigieren nicht über die Text-Rendering-Pipeline von Windows Presentation Foundation (WPF). Daher ist ClearType bei Verwendung dieser Effekte deaktiviert.

Das folgende Beispiel zeigt einen auf einen Text angewendeten harten Schlagschatteneffekt. In diesem Fall wird der Schatten nicht verwischt.

Sie können einen harten Schatten erzeugen, indem Sie die BlurRadius-Eigenschaft auf 0.0 setzen, was bedeutet, dass keine Unschärfe verwendet wird. Sie können die Richtung des Schattens steuern, indem Sie die Direction-Eigenschaft ändern. Legen Sie den direktionalen Wert dieser Eigenschaft auf einen Grad zwischen 0 und 360 fest. Die folgende Illustration zeigt die Richtungswerte der Direction-Eigenschaftseinstellung.

Im folgenden Codebeispiel wird das Erstellen eines harten Schattens veranschaulicht.

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

Verwenden eines Weichzeichnereffekts

BlurBitmapEffect kann verwendet werden, um einen schattenähnlichen Effekt zu erstellen, der hinter einem Textobjekt platziert werden kann. Ein auf Text angewendeter Weichzeichner-Bitmapeffekt verwischt Text gleichmäßig in alle Richtungen.

Das folgende Beispiel zeigt einen Text mit Weichzeichnereffekt.

Im folgenden Codebeispiel wird das Erstellen eines Weichzeichnereffekts veranschaulicht.

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

Verwenden von TranslateTransform

TranslateTransform kann verwendet werden, um einen schattenähnlichen Effekt zu erstellen, der hinter einem Textobjekt platziert werden kann.

Das folgende Codebeispiel verwendet TranslateTransform, um Text zu versetzen. In diesem Beispiel erstellt eine geringfügig versetzte Kopie des Textes hinter dem primären Text einen Schatteneffekt.

Im folgenden Codebeispiel wird das Erstellen einer Transformation für einen Schatteneffekt veranschaulicht.

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