如何：创建具有阴影的文本

  • 项目

更新：2007 年 11 月

本节中的示例演示如何为所显示的文本创建各种阴影效果。

说明：

有关阐释文本阴影效果的完整代码示例，请参见文本阴影示例。

示例

使用 DropShadowBitmapEffect 对象，可以为 Windows Presentation Foundation (WPF) 对象创建各种投影效果。下面的示例演示应用于文本的典型类型的投影效果。在本例中，阴影是柔和阴影，这表示阴影的颜色发生模糊。

具有柔和阴影的文本的示例

Softness 为 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>
说明：

这些柔和效果不通过 Windows Presentation Foundation (WPF) 文本呈现管道。因此，在使用这些效果时，ClearType 处于禁用状态。

下面的示例演示应用于文本的强烈投影效果。在本例中，阴影不模糊。

具有强烈阴影的文本的示例

Softness 为 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>

下面的示例演示一个投影效果，其中结合了应用于文本的强烈阴影和柔和阴影。

具有强烈阴影和柔和阴影的文本的示例

有两个阴影的文本

下面的代码示例演示如何创建将强烈阴影和柔和阴影结合在一起的文本。

<!-- 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 的文本阴影

下面的代码示例演示如何为阴影效果创建转换。

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