방법: 텍스트에 변환 적용

변환은 응용 프로그램에서 텍스트의 표시 방식을 변경할 수 있습니다. 다음 예제에서는 다양한 렌더링 변환 형식을 사용하여 TextBlock 컨트롤에서의 텍스트 표시 방식에 영향을 줍니다.

예제

다음 예제에서는 2차원 x-y 평면에서 지정한 지점을 중심으로 회전된 텍스트를 보여 줍니다.

90도 회전된 텍스트 예제

다음 코드 예제에서는 RotateTransform을 사용하여 텍스트를 회전합니다. Angle 값이 90이면 요소가 시계 방향으로 90도 회전됩니다.

<!-- Rotate the text 90 degrees using a RotateTransform. -->
<TextBlock FontFamily="Arial Black" FontSize="64" Foreground="Moccasin" Margin ="80, 10, 0, 0">
  Text Transforms
  <TextBlock.RenderTransform>
    <RotateTransform Angle="90" />
  </TextBlock.RenderTransform>
</TextBlock>

다음 예제의 둘째 줄과 셋째 줄에서는 각각 x축 방향으로 150% 확대한 텍스트와 y축 방향으로 150% 확대한 텍스트를 보여 줍니다.

배율이 조정된 텍스트 예제

다음 코드 예제에서는 ScaleTransform을 사용하여 원래 크기와 다르게 텍스트의 배율을 조정합니다.

<!-- Scale the text using a ScaleTransform. -->
<TextBlock
  Name="textblockScaleMaster" 
  FontSize="32"
  Foreground="SteelBlue"
  Text="Scaled Text"
  Margin="100, 0, 0, 0"
  Grid.Column="0" Grid.Row="0">
</TextBlock>
<TextBlock
  FontSize="32"
  FontWeight="Bold" 
  Foreground="SteelBlue"
  Text="{Binding Path=Text, ElementName=textblockScaleMaster}"
  Margin="100, 0, 0, 0"
  Grid.Column="0" Grid.Row="1">
  <TextBlock.RenderTransform>
    <ScaleTransform ScaleX="1.5" ScaleY="1.0" />
  </TextBlock.RenderTransform>
</TextBlock>
<TextBlock
  FontSize="32"
  FontWeight="Bold" 
  Foreground="SteelBlue"
  Text="{Binding Path=Text, ElementName=textblockScaleMaster}"
  Margin="100, 0, 0, 0"
  Grid.Column="0" Grid.Row="2">
  <TextBlock.RenderTransform>
    <ScaleTransform ScaleX="1.0" ScaleY="1.5" />
  </TextBlock.RenderTransform>
</TextBlock>

참고
텍스트의 배율을 조정하는 것은 텍스트의 글꼴 크기를 늘리는 것과 다릅니다.글꼴 크기는 다양한 크기에서 최상의 해상도를 제공하기 위해 서로 독립적으로 계산되는 반면배율이 조정된 텍스트는 원래 크기 텍스트의 비율을 유지합니다.

다음 예제에서는 x축 방향으로 기울인 텍스트를 보여 줍니다.

기울어진 텍스트 예제

다음 코드 예제에서는 SkewTransform을 사용하여 텍스트를 기울입니다. 기울이기는 균일하지 않은 방식으로 좌표 공간을 늘리는 변환입니다. 이 예제에서 두 텍스트 문자열은 x 좌표 방향으로 -30°와 30° 기울여집니다.

<!-- Skew the text using a SkewTransform. -->
<TextBlock
  Name="textblockSkewMaster" 
  FontSize="32"
  FontWeight="Bold" 
  Foreground="Maroon"
  Text="Skewed Text"
  Margin="125, 0, 0, 0"
  Grid.Column="0" Grid.Row="0">
  <TextBlock.RenderTransform>
    <SkewTransform AngleX="-30" AngleY="0" />
  </TextBlock.RenderTransform>
</TextBlock>
<TextBlock
  FontSize="32"
  FontWeight="Bold" 
  Foreground="Maroon"
  Text="{Binding Path=Text, ElementName=textblockSkewMaster}"
  Margin="100, 0, 0, 0"
  Grid.Column="0" Grid.Row="1">
  <TextBlock.RenderTransform>
    <SkewTransform AngleX="30" AngleY="0" />
  </TextBlock.RenderTransform>
</TextBlock>

다음 예제에서는 x축과 y축 방향으로 변환되거나 이동된 텍스트를 보여 줍니다.

변환된 텍스트 예제

다음 코드 예제에서는 TranslateTransform을 사용하여 텍스트를 오프셋합니다. 이 예제에서 기본 텍스트 아래에 있는 텍스트의 약간 오프셋된 복사본은 그림자 효과를 만듭니다.

<!-- Skew the text using a TranslateTransform. -->
<TextBlock
  FontSize="32"
  FontWeight="Bold" 
  Foreground="Black"
  Text="{Binding Path=Text, ElementName=textblockTranslateMaster}"
  Margin="100, 0, 0, 0"
  Grid.Column="0" Grid.Row="0">
  <TextBlock.RenderTransform>
    <TranslateTransform X="2" Y="2" />
  </TextBlock.RenderTransform>
</TextBlock>
<TextBlock
  Name="textblockTranslateMaster" 
  FontSize="32"
  FontWeight="Bold" 
  Foreground="Coral"
  Text="Translated Text"
  Margin="100, 0, 0, 0"
  Grid.Column="0" Grid.Row="0"/>

참고
DropShadowBitmapEffect는 그림자 효과를 제공하기 위한 다양한 기능 집합을 제공합니다.자세한 내용은 방법: 그림자가 적용된 텍스트 만들기를 참조하십시오.

참고 항목

작업

방법: 텍스트에 애니메이션 적용