共用方式為

HOW TO：建立含陰影的文字

  • 發行項

更新：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" />

使用 Translate 轉換

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