Практическое руководство. Создание текста с помощью тени

В примерах этого раздела показано, как создать эффект тени для отображаемого текста.

Пример

Объект 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>