方法 : 影付きテキストを作成する
更新 : 2007 年 11 月
このセクションの例では、表示テキストのさまざまなシャドウ効果を作成する方法を示します。
![]() |
---|
テキストのシャドウ効果を示すコード例全体については、「テキストの影のサンプル」を参照してください。 |
使用例
DropShadowBitmapEffect オブジェクトを使用すると、Windows Presentation Foundation (WPF) オブジェクトのさまざまなドロップ シャドウ効果を作成できます。テキストに標準タイプのドロップ シャドウ効果が適用されている例を次に示します。ここでは、影はソフト シャドウで、影の色にぼかしが使用されています。
ソフト シャドウを適用したテキストの例
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>
![]() |
---|
シャドウ効果は、Windows Presentation Foundation (WPF) テキスト レンダリング パイプラインを経由しません。そのため、シャドウ効果を使用する場合、ClearType は無効です。 |
テキストにハード ドロップ シャドウ効果が適用されている例を次に示します。ここでは、影のぼかしは使用されません。
ハード シャドウを適用したテキストの例
Softness プロパティを 0.0 に設定することで、ぼかしはまったく使用されなくなり、ハード シャドウを作成できます。Direction プロパティを変更して、影の方向を制御できます。このプロパティの方向の値を 0 から 360 の間の角度に設定します。Direction プロパティで設定する方向の値を次の図に示します。
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>
テキストにハード シャドウとソフト シャドウを結合したドロップ シャドウ効果が適用されている例を次に示します。
ハード シャドウおよびソフト シャドウを適用したテキストの例
ハード シャドウとソフト シャドウを結合した影を作成する方法を次のコード例に示します。
<!-- 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 とは異なります。
テキストに光彩 (外側) 効果が適用されている例を次に示します。
光彩 (外側) 効果を適用したテキストの例
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 を使用すると、影のような効果を作成して、テキスト オブジェクトの後ろに適用できます。テキストに適用されるぼかしビットマップ効果は、テキストのすべての方向へ均等に、ぼかしを適用します。
テキストにぼかし効果が適用されている例を次に示します。
ぼかし効果を適用したテキストの例
ぼかし効果を作成する方法を次のコード例に示します。
<!-- 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 を使用してテキストをオフセットするコード例を次に示します。この例では、主要なテキストの下のわずかにオフセットされたテキストのコピーにより、シャドウ効果が作成されます。
シャドウ効果への変換を使用しているテキストの例
シャドウ効果への変換を作成する方法を次のコード例に示します。
<!-- 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>