如何：建立含陰影的文字

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

範例

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>

備註

這些陰影效果不會通過 Windows Presentation Foundation (WPF) 文字轉譯管線。 因此，使用這些效果時，會停用 ClearType。

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

您可以將 BlurRadius 屬性設定為 0.0 來建立硬陰影，這表示不會使用模糊。 修改 Direction 屬性即可控制陰影的方向。 將此屬性的方向值設定為 0 與 360 之間的度數。 下圖會顯示 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>