方法 : 影付きテキストを作成する

更新 : 2010 年 8 月

このセクションの例では、表示テキストのシャドウ効果を作成する方法を示します。

使用例

DropShadowEffect オブジェクトを使用すると、Windows Presentation Foundation (WPF) オブジェクトのさまざまなドロップ シャドウ効果を作成できます。 テキストにドロップ シャドウ効果が適用されている例を次に示します。 ここでは、影はソフト シャドウで、影の色にぼかしが使用されています。

ソフト シャドウを適用したテキストの例

ShadowDepth プロパティを設定して、影の幅を制御できます。 値 4.0 は、影の幅が 4 ピクセルであることを示します。 BlurRadius プロパティを変更して、影のぼかしを制御できます。 値 0.0 は、ぼかしがないことを示します。 ソフト シャドウを作成する方法を次のコード例に示します。

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

メモ
シャドウ効果は、Windows Presentation Foundation (WPF) テキスト レンダリング パイプラインを経由しません。そのため、シャドウ効果を使用する場合、ClearType は無効です。

テキストにハード ドロップ シャドウ効果が適用されている例を次に示します。 ここでは、影のぼかしは使用されません。

ハード シャドウを適用したテキストの例

BlurRadius プロパティを 0.0 に設定することで、ぼかしはまったく使用されなくなり、ハード シャドウを作成できます。 Direction プロパティを変更して、影の方向を制御できます。 このプロパティの方向の値を 0 から 360 の間の角度に設定します。 Direction プロパティで設定する方向の値を次の図に示します。

DropShadow 方向の図

ハード シャドウを作成する方法を次のコード例に示します。

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

ぼかし効果の使用

BlurBitmapEffect を使用すると、影のような効果を作成して、テキスト オブジェクトの後ろに適用できます。 テキストに適用されるぼかしビットマップ効果は、テキストのすべての方向へ均等に、ぼかしを適用します。

テキストにぼかし効果が適用されている例を次に示します。

ぼかし効果を適用したテキストの例

ぼかし効果を作成する方法を次のコード例に示します。

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

TranslateTransform の使用

TranslateTransform を使用すると、影のような効果を作成して、テキスト オブジェクトの後ろに適用できます。

TranslateTransform を使用してテキストをオフセットするコード例を次に示します。 この例では、主要なテキストの下のわずかにオフセットされたテキストのコピーにより、シャドウ効果が作成されます。

シャドウ効果への変換を使用しているテキストの例

シャドウ効果への変換を作成する方法を次のコード例に示します。

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

履歴の変更