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

  • [アーティクル]

更新 : 2007 年 11 月

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

ms748273.alert_note(ja-jp,VS.90).gifメモ :

テキストのシャドウ効果を示すコード例全体については、「テキストの影のサンプル」を参照してください。

使用例

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

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

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

<!-- 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>
ms748273.alert_note(ja-jp,VS.90).gifメモ :

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

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

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

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

DropShadow 方向の図
シャドウの DropShadow 度の設定

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

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

テキストにハード シャドウとソフト シャドウを結合したドロップ シャドウ効果が適用されている例を次に示します。

ハード シャドウおよびソフト シャドウを適用したテキストの例
2 つのシャドウを含むテキスト

ハード シャドウとソフト シャドウを結合した影を作成する方法を次のコード例に示します。

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

前の例の変化形を次の例に示します。この例では、ソフト シャドウは、粒状性を示します。Noise プロパティを変更して、粒状性を制御できます。値 0.0 はノイズがないことを示し、値 1.0 はノイズが最大限であることを示します。

ハード シャドウおよびノイズ付きのソフト シャドウを適用したテキストの例
ノイズを含むテキスト シャドウ

ノイズ付きの影を作成する方法を次のコード例に示します。

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

光彩 (外側) ビットマップ効果の使用

OuterGlowBitmapEffect を使用して、影のような効果を作成できます。ただし、光彩 (外側) はテキストの背後で均等に放射されるものであり、指定された方向に応じてレンダリングされる DropShadowBitmapEffect とは異なります。

テキストに光彩 (外側) 効果が適用されている例を次に示します。

光彩 (外側) 効果を適用したテキストの例
OuterGlowBitmapEffect を使用するテキスト シャドウ

GlowSize プロパティを設定して、光彩 (外側) の幅を制御できます。値 4.0 は、光彩 (外側) の幅が 4 ピクセルであることを示します。光彩 (外側) 効果を作成する方法を次のコード例に示します。

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

ぼかしビットマップ効果の使用

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

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

ぼかし効果を適用したテキストの例
BlurBitmapEffect を使用するテキスト シャドウ

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

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

TranslateTransform の使用

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>

参照

処理手順

テキストの影のサンプル

概念

ビットマップ効果の概要

参照

BlurBitmapEffect

DropShadowBitmapEffect

OuterGlowBitmapEffect