Transform 개요

  • 아티클

이 토픽에서는 2D Transform 클래스를 사용하여 FrameworkElement 개체를 회전, 크기 조정 및 이동(번역)하고 기울이는 방법을 설명합니다.

변환이란?

Transform은 포인트를 한 좌표 공간에서 다른 좌표 공간으로 매핑, 즉 변환하는 방법을 정의합니다. 이 매핑은 Double 값 열 3개로 구성된 컬렉션인 변환 Matrix로 설명됩니다.

참고

WPF(Windows Presentation Foundation)에서는 행 주 행렬을 사용합니다. 벡터는 열 벡터가 아니라 행 벡터로 표시됩니다.

다음 표에서는 WPF 행렬 구조를 보여줍니다.

2D 변환 행렬

X축 Y축 아핀 변환
M11

기본값: 1.0		 M12

기본값: 0.0		 0.0
M21

기본값: 0.0		 M22

기본값: 1.0		 0.0
OffsetX

기본값: 0.0		 OffsetY

기본값: 0.0		 1.0

행렬 값을 조작하여 개체를 회전, 크기 조정, 기울이기 및 이동(변환)할 수 있습니다. 예를 들어 세 번째 행의 첫 번째 열에 있는 값(OffsetX 값)을 100으로 변경하는 경우 이를 사용하여 x축을 따라 개체를 100개 단위씩 이동할 수 있습니다. 두 번째 행의 두 번째 열에 있는 값을 3으로 변경하는 경우 이를 사용하여 개체를 현재 높이의 3배로 늘릴 수 있습니다. 두 값을 모두 변경하는 경우 x축을 따라 100개 단위씩 개체가 이동되고 높이가 3배로 늘어납니다. WPF(Windows Presentation Foundation)는 아핀 변환만 지원하므로 오른쪽 열의 값은 항상 0, 0, 1이 됩니다.

WPF(Windows Presentation Foundation)를 사용하면 행렬 값을 직접 조작할 수 있지만 기본 행렬 구조의 구성 방식을 알지 못해도 개체를 변환할 수 있는 Transform 클래스도 여러 개 제공합니다. 예를 들어 ScaleTransform 클래스를 사용하면 변환 행렬을 조작하는 대신 ScaleX 속성과 ScaleY 속성을 설정하여 개체 크기를 조정할 수 있습니다. 마찬가지로 RotateTransform 클래스를 사용하면 Angle 속성만 설정하여 개체를 회전할 수 있습니다.

변환 클래스

WPF(Windows Presentation Foundation)는 일반적인 변환 작업에 다음과 같은 2D Transform 클래스를 제공합니다.

클래스 설명 예제 그림
RotateTransform 지정된 Angle만큼 요소를 회전합니다. 개체 회전 그림 회전
ScaleTransform 지정된 ScaleX 및 ScaleY 양만큼 요소 크기를 조정합니다. 요소 배율 조정 그림 비율 크기 조정
SkewTransform 지정된 AngleX 및 AngleY 양만큼 요소를 기울입니다. 요소 기울이기 그림 기울이기
TranslateTransform 지정된 X 및 Y 양만큼 요소를 이동(변환)합니다. 요소 변환 그림 변환

좀 더 복잡한 변환을 만들 수 있도록 WPF(Windows Presentation Foundation)에서는 다음 두 가지 클래스를 제공합니다.

클래스 설명 예제
TransformGroup 속성을 변환하는 데 적용할 수 있는 단일 Transform에 TransformGroup 개체 여러 개를 그룹화합니다. 개체에 다중 변환 적용
MatrixTransform 다른 Transform 클래스에서 제공하지 않는 사용자 지정 변환을 만듭니다. MatrixTransform을 사용하면 행렬을 직접 조작합니다. MatrixTransform을 사용하여 사용자 지정 변환 만들기

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

사용자 지정 변환 속성

개체를 변환하는 한 가지 방법은 해당 Transform 형식을 선언하고 개체의 변환 속성에 적용하는 것입니다. 개체의 형식이 다르면 변환 속성 형식도 다릅니다. 다음 표에는 일반적으로 사용되는 몇 가지 WPF(Windows Presentation Foundation) 형식과 해당 변환 속성이 나와 있습니다.

Type 변환 속성
Brush Transform, RelativeTransform
ContainerVisual Transform
DrawingGroup Transform
FrameworkElement RenderTransform, LayoutTransform
Geometry Transform
TextEffect Transform
UIElement RenderTransform

변환 및 좌표계

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

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

FrameworkElement가 약 45도 회전(0,0)
점 (0,0)을 기준으로 45도 회전된 Rectangle 요소

<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도로 회전합니다. 하지만 이때 CenterX 속성과 CenterY 속성은 RotateTransform 중심이 (25, 25)가 되도록 설정됩니다. 다음 그림에서는 회전의 결과를 보여 줍니다.

Geometry가 약 45도 회전(25, 25)
점 (25, 25)를 기준으로 45도 회전된 Rectangle 요소

<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 속성에 적용됩니다. 다음 그림에서는 변환의 결과를 보여 줍니다.

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을 사용하여 변환된 단추
단추 회전에 사용된 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에 애니메이션 효과를 주려면 애니메이션 효과를 줄 속성에 호환되는 형식의 애니메이션을 적용합니다.

다음 예제에서는 클릭하면 영역에서 Button이 회전하도록 RotateTransform과 함께 Storyboard 및 DoubleAnimation을 사용합니다.

<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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>

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

Freezable 기능

Freezable 클래스에서 상속하므로 Transform 클래스는 몇 가지 특별한 기능을 제공합니다. Transform 개체는 리소스로 선언되고, 여러 개체 간에 공유되며, 성능 향상을 위해 읽기 전용으로 만들고, 복제하고, 스레드로부터 안전하게 만들 수 있습니다. Freezable 개체에서 제공하는 다른 기능에 대한 자세한 내용은 Freezable 개체 개요를 참조하세요.

참고 항목