Transform 개요

업데이트: 2007년 11월

이 항목에서는 2차원Transform 클래스를 사용하여 FrameworkElement 개체를 회전, 배율 조정, 이동(위치 변환) 및 기울이는 방법을 설명합니다.

이 항목에는 다음 단원이 포함되어 있습니다.

• Transform 정의
• Transform 클래스
• 일반적인 변환 속성
• 변환 및 좌표계
• FrameworkElement 변환
• 예제: FrameworkElement를 45도 회전
• 변환에 애니메이션 효과 주기
• Freezable 기능
• 관련 항목

Transform 정의

Transform은 점을 한 좌표 공간에서 다른 좌표 공간으로 매핑 또는 변환하는 방법을 정의합니다. 이 매핑은 값이 Double인 세 열이 있는 세 행의 컬렉션인 Matrix의 변환으로 설명됩니다.

다음 표에서는 WPF 매트릭스의 구조를 보여 줍니다.

2차원 변환 매트릭스

매트릭스 값을 조작하여 개체에 대해 회전, 배율 조정, 기울이기 및 이동(위치 변환) 작업을 수행할 수 있습니다. 예를 들어 세 번째 행의 첫 번째 열에 있는 값(OffsetX 값)을 100으로 변경하면 이를 사용하여 개체를 x축을 따라 100단위 이동할 수 있습니다. 세 번째 행의 두 번째 열에 있는 값을 3으로 변경하면 이를 사용하여 개체를 현재 높이보다 세 배 늘일 수 있습니다. 두 값을 모두 변경하면 개체가 x축을 따라 100단위 이동하며 높이는 계수 3만큼 늘어납니다. WPF(Windows Presentation Foundation)에서는 affine 변환만 지원하기 때문에 오른쪽 열의 값은 항상 0, 0, 1입니다.

WPF(Windows Presentation Foundation)에서는 매트릭스 값을 직접 조작할 수도 있지만 내부 매트릭스 구조의 구성 방식을 모르더라도 개체를 변환할 수 있는 몇 개의 Transform 클래스도 제공합니다. 예를 들어 ScaleTransform 클래스를 사용하면 변환 매트릭스를 조작하는 대신 ScaleX 및 ScaleY 속성을 설정하여 개체의 배율을 조정할 수 있습니다. 마찬가지로 RotateTransform 클래스를 사용하면 Angle 속성을 간단히 설정하여 개체를 회전할 수 있습니다.

Transform 클래스

WPF(Windows Presentation Foundation)에서는 자주 사용되는 변환 작업에 사용할 수 있는 다음 2차원Transform 클래스를 제공합니다.

더 복잡한 변환을 만들기 위해 WPF(Windows Presentation Foundation)에서는 다음 두 클래스를 제공합니다.

WPF(Windows Presentation Foundation)에서는 3차원 변환도 제공합니다. 자세한 내용은 Transform3D 클래스를 참조하십시오.

일반적인 변환 속성

개체를 변환하는 방법 중 하나는 적절한 Transform 형식을 선언한 다음 개체의 변환 속성에 적용하는 것입니다. 개체 형식에 따라 변환 속성의 형식이 다릅니다. 다음 표는 자주 사용하는 몇 가지 WPF(Windows Presentation Foundation) 형식 및 해당 변환 속성의 목록입니다.

변환 및 좌표계

개체를 변환할 때에는 개체만 변환하는 것이 아니라 해당 개체가 존재하는 좌표 공간도 변환합니다. 기본적으로 변환은 대상 개체의 좌표계 원점인 (0,0)을 중심으로 합니다. 유일한 예외는 TranslateTransform이며 TranslateTransform의 경우 중심이 어디인지에 관계없이 변환 효과가 동일하기 때문에 설정할 중심 속성이 없습니다.

다음 예제에서는 RotateTransform을 사용하여 FrameworkElement 형식의 Rectangle 요소를 기본 중심인 (0, 0)을 기준으로 45도 회전합니다. 다음 그림에서는 이 회전의 효과를 보여 줍니다.

점 (0,0)을 중심으로 45도 회전된 사각형 요소

<Canvas Width="200" Height="200">
  <Rectangle 
    Canvas.Left="100" Canvas.Top="100"
    Width="50" Height="50" 
    Fill="RoyalBlue" Opacity="1.0">
    <Rectangle.RenderTransform>
      <RotateTransform Angle="45" />
    </Rectangle.RenderTransform>
  </Rectangle>
</Canvas>

기본적으로 요소는 왼쪽 위 모퉁이인 (0, 0)을 중심으로 회전합니다. RotateTransform, ScaleTransform 및 SkewTransform 클래스에서는 변환을 적용할 점을 지정할 수 있는 CenterX 및 CenterY 속성을 제공합니다.

다음 예제에서도 RotateTransform을 사용하여 Rectangle 요소를 45도 회전하지만, 여기에서는 RotateTransform의 중심이 (25, 25)가 되도록 CenterX 및 CenterY 속성을 설정합니다. 다음 그림에서는 이 회전의 효과를 보여 줍니다.

점 (25,25)를 중심으로 45도 회전된 사각형 요소

<Canvas Width="200" Height="200">
  <Rectangle 
    Canvas.Left="100" Canvas.Top="100"
    Width="50" Height="50" 
    Fill="RoyalBlue" Opacity="1.0">
    <Rectangle.RenderTransform>
      <RotateTransform Angle="45" CenterX="25" CenterY="25" />
    </Rectangle.RenderTransform>
  </Rectangle>
</Canvas>

FrameworkElement 변환

FrameworkElement에 변환을 적용하려면 Transform을 만든 다음 FrameworkElement 클래스가 제공하는 두 속성 중 하나에 적용합니다.

• LayoutTransform – 레이아웃 과정 전에 적용되는 변환. 변환이 적용되면 레이아웃 시스템에서 요소의 변환된 크기와 위치를 처리합니다.

• RenderTransform – 요소의 모양을 수정하지만 레이아웃 과정이 완료된 후 적용되는 변환. LayoutTransform 속성 대신 RenderTransform 속성을 사용하면 성능을 높일 수 있습니다.

어떤 속성을 사용해야 할까요? 성능을 높일 수 있으므로 가능하면, RenderTransform 속성을 사용하는 것이 좋습니다. 특히 애니메이션이 적용된 Transform 개체를 사용할 때는 더욱 그렇습니다. 배율 조정, 회전 또는 기울이기를 수행할 때와 요소의 변환된 크기를 조정하기 위해 요소의 부모가 필요할 때는 LayoutTransform 속성을 사용하십시오. 하지만 LayoutTransform 속성과 함께 사용하는 경우 TranslateTransform 개체는 요소에 아무런 효과를 미치지 않는 것처럼 보입니다. 이는 레이아웃 시스템에서 처리 도중 변환된 요소를 원래 위치로 되돌리기 때문입니다.

WPF(Windows Presentation Foundation)에서의 레이아웃에 대한 자세한 내용은 레이아웃 시스템 개요를 참조하십시오.

예제: FrameworkElement를 45도 회전

다음 예제에서는 RotateTransform을 사용하여 단추를 시계 방향으로 45도 회전합니다. 단추는 두 개의 다른 단추가 있는 StackPanel에 들어 있습니다.

기본적으로 RotateTransform은 점 (0, 0)을 중심으로 회전합니다. 예제에서는 중심 값을 지정하지 않기 때문에 단추는 점 (0, 0), 즉 왼쪽 위 모퉁이를 중심으로 회전합니다. RotateTransform은 RenderTransform 속성에 적용됩니다. 다음 그림에서는 이 변환의 결과를 보여 줍니다.

왼쪽 위 모퉁이를 기준으로 시계 방향으로 45도 회전

<Border Margin="30" 
  HorizontalAlignment="Left" VerticalAlignment="Top"
  BorderBrush="Black" BorderThickness="1" >
  <StackPanel Orientation="Vertical">
    <Button Content="A Button" Opacity="1" />
    <Button Content="Rotated Button">
      <Button.RenderTransform>
        <RotateTransform Angle="45" />
      </Button.RenderTransform>
    </Button>
    <Button Content="A Button" Opacity="1" />
  </StackPanel>
</Border>

다음 예제에서도 RotateTransform을 사용하여 단추를 시계 방향으로 45도 회전하지만 여기에서는 단추의 RenderTransformOrigin을 (0.5, 0.5)로 설정합니다. RenderTransformOrigin 속성의 값은 단추 크기에 상대적입니다. 그 결과, 회전은 왼쪽 위 모퉁이가 아니라 단추의 중심에 대해 적용됩니다. 다음 그림에서는 이 변환의 결과를 보여 줍니다.

가운데를 중심으로 시계 방향으로 45도 회전

<Border Margin="30"   
  HorizontalAlignment="Left" VerticalAlignment="Top"
  BorderBrush="Black" BorderThickness="1">
  <StackPanel Orientation="Vertical">
    <Button Content="A Button" Opacity="1" />
    <Button Content="Rotated Button"
      RenderTransformOrigin="0.5,0.5">
      <Button.RenderTransform>
        <RotateTransform Angle="45" />
      </Button.RenderTransform>
    </Button>
    <Button Content="A Button" Opacity="1" />
  </StackPanel>
</Border>

다음 예제에서는 RenderTransform 속성 대신 LayoutTransform 속성을 사용하여 단추를 회전합니다. 이 경우 변환은 단추의 레이아웃에 영향을 미치며 이로 인해 레이아웃 시스템의 전체 전달이 트리거됩니다. 그 결과, 단추는 회전한 다음 그 크기가 변경되기 때문에 위치가 재조정됩니다. 다음 그림에서는 이 변환의 결과를 보여 줍니다.

LayoutTransform을 사용한 단추 회전

<Border Margin="30"   
 HorizontalAlignment="Left" VerticalAlignment="Top"
 BorderBrush="Black" BorderThickness="1">
  <StackPanel Orientation="Vertical">

    <Button Content="A Button" Opacity="1" />   
    <Button Content="Rotated Button">
      <Button.LayoutTransform>
        <RotateTransform Angle="45"  />
      </Button.LayoutTransform>
    </Button>   
    <Button Content="A Button" Opacity="1" />
  </StackPanel>
</Border>

변환에 애니메이션 효과 주기

Animatable 클래스에서 상속되는 Transform 클래스에는 애니메이션 효과를 줄 수 있습니다. Transform에 애니메이션 효과를 주려면 애니메이션 효과를 줄 속성에 호환 가능한 형식의 애니메이션을 적용합니다.

다음 예제에서는 Storyboard 및 DoubleAnimation과 함께 RotateTransform을 사용하여 Button이 클릭되면 제자리에서 회전하도록 만듭니다.

<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  Title="Button Animated RotateTransform Example"
  Background="White" Margin="50">
  <StackPanel>



    <Button Content="A Button"
      RenderTransformOrigin="0.5,0.5">
      <Button.RenderTransform>
        <RotateTransform x:Name="AnimatedRotateTransform" Angle="0" />
      </Button.RenderTransform>
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation 
                Storyboard.TargetName="AnimatedRotateTransform"
                Storyboard.TargetProperty="Angle" 
                To="360" Duration="0:0:1" FillBehavior="Stop" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>

  </StackPanel>
</Page>

전체 샘플을 보려면 2차원 변환 샘플을 참조하십시오. 애니메이션에 대한 자세한 내용은 애니메이션 개요를 참조하십시오.

Freezable 기능

Transform 클래스는 Freezable 클래스에서 상속되므로 몇 가지 특수한 기능을 제공합니다. 예를 들어 Transform 개체를 리소스로 선언하거나, 여러 개체 간에 공유하거나, 읽기 전용으로 설정하여 성능을 향상시킬 수 있으며, 복제하거나, 스레드로부터 안전하게 보호할 수 있습니다. Freezable 개체가 제공하는 다양한 기능에 대한 자세한 내용은 Freezable 개체 개요를 참조하십시오.

참고 항목

작업

2차원 변환 샘플

참조

Transform

Matrix

기타 리소스

변환 방법 항목