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

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

예시

DropShadowEffect 개체를 통해 WPF(Windows Presentation Foundation) 개체에 대해 다양한 그림자 효과를 만들 수 있습니다. 다음 예제에서는 그림자 효과가 적용된 텍스트를 보여 줍니다. 이 경우 그림자는 그림자 색깔이 흐린, 부드러운 그림자입니다.

Softness = 0.25인 텍스트 그림자

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>

비고

이러한 그림자 효과는 WPF(Windows Presentation Foundation) 텍스트 렌더링 파이프라인을 거치지 않습니다. 따라서 이러한 효과를 사용할 때 ClearType이 사용하지 않도록 설정됩니다.

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

Softness = 0인 텍스트 그림자

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

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

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" />

좌표 이동 변환 사용

BlurBitmapEffect를 사용하여 텍스트 개체 뒤에 놓을 수 있는 그림자 같은 효과를 만들 수 있습니다.

다음 코드 예제는 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>