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

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

Пример

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

Схема направления объекта DropShadow

В следующем примере показан способ создания жесткой тени.

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

Журнал изменений

Дата	Журнал	Причина
Август 2010 г.	Обновлен для использования новых классов Effect.	Исправление ошибки содержимого.