Поделиться через

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

  • Статья

Обновлен: Ноябрь 2007

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

ms748273.alert_note(ru-ru,VS.90).gifПримечание.

Полный пример кода, иллюстрирующий эффекты тени для текста, см. в разделе Пример отображения текста с тенью.

Пример

Объект DropShadowBitmapEffect позволяет создавать разнообразные эффекты тени для объектов Windows Presentation Foundation (WPF). В следующем примере показан типичный эффект тени, примененный к тексту. В этом случае тень является мягкой, что означает размытие цвета тени.

Пример текста с мягкой тенью
Тень текста с мягкостью = 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>
ms748273.alert_note(ru-ru,VS.90).gifПримечание.

Эти эффекты тени не проходят через конвейер визуализации текста Windows Presentation Foundation (WPF). В результате, при использовании этих эффектов отключается технология ClearType.

В следующем примере показан эффект жесткой тени, применяемый к тексту. В этом случае тень не размыта.

Пример текста с жесткой тенью
Тень текста с мягкостью = 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" />

Использование преобразования со смещением

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