Gewusst wie: Erstellen von Text mit einem Schatten

Aktualisiert: November 2007

Die Beispiele in diesem Abschnitt zeigen, wie Sie unterschiedliche Schatteneffekte für angezeigten Text erstellen.

Tipp

Das vollständige Codebeispiel zur Veranschaulichung der Schatteneffekte für Text finden Sie unter Beispiel für Textschatten.

Beispiel

Das DropShadowBitmapEffect-Objekt ermöglicht es Ihnen, eine Vielzahl von Schlagschatteneffekten für Objekte in Windows Presentation Foundation (WPF) zu erstellen. Im folgenden Beispiel wird ein typischer Schlagschatteneffekt auf einen Text angewendet. In diesem Fall handelt es sich bei dem Schatten um einen weichgezeichneten Schatten, was eine Weichzeichnung der Schattenfarbe bedeutet.

Beispiel für Text mit einem weichgezeichneten Schatten

Sie können die Breite eines Schattens steuern, indem Sie die ShadowDepth-Eigenschaft festlegen. Ein Wert von 4.0 gibt eine Schattenbreite von 4 Pixel an. Indem Sie die Softness-Eigenschaft ändern, können Sie die Intensität des weichgezeichneten Schattens ändern. Ein Wert von 0.0 gibt an, dass keine Weichzeichnung erfolgt, ein Wert von 1.0 gibt die maximale Weichzeichnung an. Im folgenden Codebeispiel wird das Erstellen eines weichgezeichneten Schattens veranschaulicht.

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

Tipp

Diese Schatteneffekte durchlaufen nicht die Textrenderingpipeline von Windows Presentation Foundation (WPF). Aus diesem Grund wird ClearType bei der Verwendung dieser Effekte deaktiviert.

Im folgenden Beispiel wird ein Text angezeigt, auf den ein Schlagschatteneffekt mit scharfer Kontur angewendet wurde. In diesem Fall wird der Schatten nicht weichgezeichnet.

Beispiel für Schlagschatten mit scharfer Kontur

Sie können einen Schlagschatten mit scharfer Kontur erstellen, indem Sie die Softness-Eigenschaft auf 0.0 festlegen. Diese Einstellung gibt an, dass keine Weichzeichnung verwendet wird. Wenn Sie die Richtung des Schattens steuern möchten, ändern Sie die Direction-Eigenschaft. Legen Sie den Richtungswert dieser Eigenschaft auf einen Wert zwischen 0 und 360 Grad fest. Im folgenden Diagramm werden die Richtungswerte zur Einstellung der Direction-Eigenschaft dargestellt.

Richtungsdiagramm für DropShadow

Im folgenden Codebeispiel wird das Erstellen eines Schattens mit scharfer Kontur veranschaulicht.

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

Im folgenden Beispiel wird ein Schlagschatteneffekt auf einen Text angewendet, der einen weichgezeichneten Schatten und einen Schatten mit scharfer Kontur miteinander verknüpft.

Beispiel für Text mit einem Schatten mit scharfer Kontur und einem weichgezeichneten Schatten

Das folgende Codebeispiel zeigt, wie Sie einen Schatten mit scharfer Kontur und einen weichgezeichneten Schatten miteinander verknüpfen können.

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

Das folgende Beispiel zeigt eine Variante des vorherigen Beispiels. In diesem Beispiel zeigt der weichgezeichnete Schatten eine zufällige Farbintensität. Sie können die zufällige Farbintensität steuern, indem Sie die Noise-Eigenschaft ändern. Ein Wert von 0.0 gibt eine Geräuschunterdrückung an, ein Wert von 1.0 gibt das maximale Geräusch an.

Textbeispiel für Schatten mit scharfer Kontur und einem weichgezeichneten Schatten mit Geräusch

Im folgenden Codebeispiel wird das Erstellen eines Schattens mit Geräusch veranschaulicht.

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

Verwenden eines äußeren Bitmap-Leuchteffekts

Ein OuterGlowBitmapEffect kann verwendet werden, um einen schattenähnlichen Effekt zu erzielen. Im Gegensatz zum Effekt DropShadowBitmapEffect, der den Text entsprechend der angegebenen Richtung rendert, strahlt der äußere Leuchteffekt ein gleichmäßiges Licht hinter dem Text aus.

Im folgenden Beispiel wird ein Text mit einem Leuchteffekt umgeben.

Beispiel für Text mit einem äußeren Leuchteffekt

Sie können die Breite eines äußeren Leuchteffekts steuern, indem Sie die GlowSize-Eigenschaft festlegen. Ein Wert von 4.0 gibt einen äußeren Leuchteffekt von 4 Pixel an. Das folgende Codebeispiel zeigt, wie ein äußerer Leuchteffekt erstellt wird.

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

Verwenden eines Bitmap-Weichzeichnereffekts

Ein BlurBitmapEffect wird für die Erstellung eines schattenähnlichen Effekts verwendet, der hinter einem Textobjekt platziert werden kann. Wenn Sie einen Bitmap-Weichzeichnereffekt auf einen Text anwenden, wird der Text in alle Richtungen gleichmäßig weichgezeichnet.

Im folgenden Beispiel wird ein Weichzeichnereffekt auf einen Text angewendet.

Beispiel für Text mit einem 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.BitmapEffect>
    <BlurBitmapEffect
      Radius="8.0"
      KernelType="Box"/>
  </TextBlock.BitmapEffect>
</TextBlock>
<TextBlock
  Text="Shadow Text"
  Foreground="Maroon"
  Grid.Column="0" Grid.Row="0" />

Verwenden von TranslateTransform (Verschieben einer Transformation)

Ein TranslateTransform wird für die Erstellung eines schattenähnlichen Effekts verwendet, der hinter einem Textobjekt platziert werden kann.

Im folgenden Codebeispiel wird ein TranslateTransform verwendet, um Text zu versetzen. In diesem Beispiel wird ein Schatteneffekt erzielt, indem die Kopie des Textes hinter dem primären Text geringfügig versetzt wird.

Beispiel für Text mit einer Transformation für einen Schatteneffekt

Das folgende Codebeispiel zeigt, wie eine Transformation für einen Schatteneffekt erstellt wird.

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

Siehe auch

Aufgaben

Beispiel für Textschatten

Konzepte

Übersicht über Bitmapeffekte

Referenz

BlurBitmapEffect

DropShadowBitmapEffect

OuterGlowBitmapEffect