如何：建立含陰影的文字

本節中的範例示範如何建立所顯示文字的陰影效果。

範例

物件 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>

下列範例示範套用至文字的實色延伸陰影效果。 在此情況下，陰影不會模糊。

您可以將 屬性設定 BlurRadius 為 0.0 來建立硬陰影，這表示不會使用模糊。 您可以修改 Direction 屬性來控制陰影的方向。 將此屬性的方向值設定為 和 360 之間的 0 度。 下圖顯示內容設定的方向 Direction 值。

下列程式碼範例示範如何建立強烈陰影。

<!-- 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 來位移文字。 在此範例中，主要文字下方文字的略微位移複本會建立陰影效果。

下列程式碼範例示範如何建立陰影效果的轉換。

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