방법: 그림자가 적용된 텍스트 만들기

업데이트: 2007년 11월

이 단원의 예제에서는 표시된 텍스트에 대해 다양한 그림자 효과를 만드는 방법을 보여 줍니다.

참고

텍스트의 그림자 효과를 설명하는 전체 코드 샘플을 보려면 텍스트 그림자 샘플을 참조하십시오.

예제

DropShadowBitmapEffect 개체를 사용하면 WPF(Windows Presentation Foundation) 개체에 그림자가 적용된 효과를 다양하게 만들 수 있습니다. 다음 예제에서는 전형적인 유형의 그림자 효과가 적용된 텍스트를 보여 줍니다. 이 경우 그림자는 그림자 색깔이 흐린, 부드러운 그림자입니다.

부드러운 그림자가 적용된 텍스트의 예

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>

참고

이러한 그림자 효과는 WPF(Windows Presentation Foundation) 텍스트 렌더링 파이프라인을 거치지 않습니다. 따라서 이러한 효과를 사용할 때 ClearType이 해제되어 있습니다.

다음 예제에서는 진한 그림자 효과가 적용된 텍스트를 보여 줍니다. 이 경우 그림자가 흐려지지 않습니다.

진한 그림자가 적용된 텍스트의 예

Softness 속성을 흐림이 전혀 사용되지 않음을 나타내는 0.0으로 설정하여 진한 그림자를 만들 수 있습니다. Direction 속성을 수정하여 그림자의 방향을 제어할 수 있습니다. 이 속성의 방향 값을 0과 360도 사이의 값으로 설정합니다. 다음 다이어그램에서는 Direction 속성 설정의 방향 값을 보여 줍니다.

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와 달리 텍스트 뒤에서 균일하게 빛을 발합니다.

다음 예제에서는 후광 효과가 적용된 텍스트를 보여 줍니다.

후광 효과가 적용된 텍스트의 예

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를 사용하여 텍스트 개체 뒤에 놓이는 그림자 같은 효과를 만들 수 있습니다. 텍스트에 적용된 흐림 비트맵 효과는 모든 방향에서 균등하게 텍스트를 흐리게 만듭니다.

다음 예제에서는 흐림 효과가 적용된 텍스트를 보여 줍니다.

흐림 효과가 적용된 텍스트의 예

다음 코드 예제에서는 흐림 효과를 만드는 방법을 보여 줍니다.

<!-- 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을 사용하여 텍스트를 오프셋합니다. 이 예제에서 기본 텍스트 아래에 있는 약간 오프셋된 텍스트 복사본이 그림자 효과를 만듭니다.

그림자 효과에 변환을 적용한 텍스트의 예

다음 코드 예제에서는 그림자 효과에 변환을 만드는 방법을 보여 줍니다.

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