다음을 통해 공유

변환 개요

  • 아티클

UI에서 요소의 상대 좌표계를 변경하여 Windows Runtime API에서 변형을 사용하는 방법을 알아봅니다. x-y 공간의 위치 크기 조정, 회전 또는 변환과 같은 개별 XAML 요소의 모양을 조정하기 위해 사용할 수 있습니다.

변형이란?

변환은 한 좌표 공간에서 다른 좌표 공간으로 점을 매핑, 즉 변환하는 방법을 정의합니다. 변환이 UI 요소에 적용되면 해당 UI 요소가 UI의 일부로 화면에 렌더링되는 방식이 변경됩니다.

변환은 크게 이동, 회전, 크기 조정 및 기울이기(또는 전단) 등 네 가지로 분류할 수 있습니다. 그래픽 API를 사용하여 UI 요소의 모양을 변경하려면 일반적으로 한번에 하나의 작업만 정의하는 변환을 만드는 것이 가장 쉽습니다. 따라서 Windows Runtime은 이러한 각 변환 분류에 대한 개별 클래스를 정의합니다.

이 중 UI 시나리오에서는 TranslateTransform 및 ScaleTransform을 가장 자주 사용할 수 있습니다.

변형을 결합할 수 있으며, 이 기능을 지원하는 두 개의 Windows Runtime 클래스는 CompositeTransform 및 TransformGroup입니다. CompositeTransform에서 변환은 크기 조정, 기울이기, 회전, 이동 순서대로 적용됩니다. 변형을 다른 순서로 적용하려면 CompositeTransform 대신 TransformGroup을 사용합니다. 자세한 내용은 CompositeTransform을 참조하세요.

변형 및 레이아웃

XAML 레이아웃에서는 레이아웃 통과가 완료된 후 변환이 적용되므로 변환이 적용되기 전에 사용 가능한 공간 계산 및 기타 레이아웃이 확정됩니다. 레이아웃이 먼저 제공되기 때문에 Grid 셀에 있는 요소 또는 레이아웃 중에 공간을 할당하는 유사한 레이아웃 컨테이너를 변환하는 경우 예기치 않은 결과가 발생할 수 있습니다. 변환된 요소는 부모 컨테이너 내에서 공간을 나눌 때 변환 후 차원을 계산하지 않은 영역에 그리려고 하기 때문에 잘리거나 가려진 것처럼 보일 수 있습니다. 변환 결과를 실험하고 일부 설정을 조정해야 할 수 있습니다. 예를 들어 적응형 레이아웃 및 별 크기 조정에 의존하는 대신, 부모가 충분한 공간을 할당할 수 있도록 Center 속성을 변경하거나 레이아웃 공간에 대한 고정 픽셀 측정값을 선언해야 할 수 있습니다.

마이그레이션 참고: WPF(Windows Presentation Foundation)에는 레이아웃 단계 전에 변형을 적용하는 LayoutTransform 속성이 있었습니다. 그러나 Windows Runtime XAML은 LayoutTransform 속성을 지원하지 않습니다. (Microsoft Silverlight에는 이전까지 이 속성이 없었습니다.)

대안으로, Windows 커뮤니티 도구 키트는 애플리케이션의 모든 FrameworkElement에 매트릭스 변환을 적용하는 LayoutTransformControl을 제공합니다.

UI 요소에 변형 적용

개체에 변환을 적용하는 경우 일반적으로 UIElement.RenderTransform 속성을 설정합니다. 이 속성을 설정해도 개체 픽셀이 픽셀 단위로 변경되지 않습니다. 속성이 실제 수행하는 작업은 해당 개체가 있는 로컬 좌표 공간 내 변환의 적용입니다. 그런 다음 렌더링 논리 및 연산(사후 레이아웃)은 결합된 좌표 공간을 렌더링하여 개체의 모양과 레이아웃 위치(TranslateTransform이 적용된 경우)가 변경된 것처럼 보입니다.

기본적으로 각 렌더링 변환은 대상 개체의 로컬 좌표계 원점 (0,0)을 중심으로 합니다. 유일한 예외는 TranslateTransform으로, 변환 효과가 중심 위치에 관계없이 동일하기 때문에 에 설정할 중심 속성이 없습니다. 그러나 다른 변환에는 각각 CenterX 및 CenterY 값을 설정하는 속성이 있습니다.

UIElement.RenderTransform과 함께 변형을 사용할 때마다 동작에 영향을 주는 또 다른 속성 RenderTransformOrigin이 UIElement에 있음을 유의하십시오. RenderTransformOrigin이 선언하는 것은 전체 변환이 요소의 기본 (0,0) 지점 또는 해당 요소의 상대 좌표 공간 내의 다른 원점에 적용되어야 하는지 여부입니다. 일반적인 요소의 경우 (0,0)는 왼쪽 위 모서리에 변환을 배치합니다. 원하는 효과에 따라 변환에서 CenterX 및 CenterY 값을 조정하는 대신 RenderTransformOrigin을 변경하도록 선택할 수 있습니다. RenderTransformOrigin, CenterX / CenterY 값을 모두 적용하는 경우, 특히 값에 애니메이션 효과를 주면 결과가 매우 혼잡해질 수 있습니다.

히트 테스트 목적으로 변환이 적용되는 개체는 x-y 공간의 시각적 모양과 일치하는 예상된 방식으로 입력에 계속 응답합니다. 예를 들어 TranslateTransform을 사용하여 Rectangle을 UI에서 400픽셀로 이동한 경우 사용자가 Rectangle이 시각적으로 나타나는 지점을 누를 때 해당 Rectangle이 PointerPressed 이벤트에 응답합니다. 사용자가 이동하기 전 Rectangle이 있던 영역을 누르면 false 이벤트가 발생하지 않습니다. 히트 테스트에 영향을 주는 z-인덱스 고려 사항의 경우 변환을 적용해도 차이가 없습니다. x-y 공간의 한 지점에 대한 입력 이벤트를 처리하는 요소를 제어하는 z-인덱스는 컨테이너에 선언된 자식 순서를 사용하여 평가합니다. 이 순서는 일반적으로 XAML에서 요소를 선언하는 순서와 동일하지만 Canvas 개체 중 자식 요소의 경우 Canvas.ZIndex 연결된 속성을 자식 요소에 적용하여 순서를 조정할 수 있습니다.

기타 변형 속성

  • Brush.Transform, Brush.RelativeTransform: Brush에서 Brush가 적용된 영역 내의 좌표 공간을 사용하여 전경, 배경 등의 시각적 속성을 설정하는 방법에 영향을 줍니다. 이러한 변환은 가장 일반적인 브러시(일반적으로 SolidColorBrush로 단색 설정)와는 관련이 없지만 ImageBrush 또는 LinearGradientBrush로 영역을 그리는 경우에 유용할 수 있습니다.
  • Geometry.Transform: 이 속성을 사용하여 Path.Data 속성 값에 해당 형상을 사용하기 전에 형상에 변형을 적용할 수 있습니다.

변형에 애니메이션 효과 적용

Transform 개체에 애니메이션 효과를 적용할 수 있습니다. Transform에 애니메이션 효과를 주려면 애니메이션 효과를 줄 속성에 호환되는 형식의 애니메이션을 적용합니다. 이는 일반적으로 모든 변환 속성이 Double 유형이므로 DoubleAnimation 또는 DoubleAnimationUsingKeyFrames 개체를 사용하여 애니메이션을 정의한다는 의미입니다. UIElement.RenderTransform 값에 사용되는 변환에 영향을 주는 애니메이션은 0이 아닌 기간이 있더라도 종속 애니메이션으로 간주되지 않습니다. 종속 애니메이션에 대한 자세한 내용은 스토리보드 애니메이션을 참조하세요.

속성에 애니메이션 효과를 적용하여 순수한 시각적 외관에서 변형과 유사한 효과를 내는 경우(예: TranslateTransform을 적용하는 대신 FrameworkElement의 Width 및 Height로 애니메이션 효과를 추가하는 경우), 이러한 애니메이션은 거의 항상 종속 애니메이션으로 처리됩니다. 애니메이션을 사용하도록 설정해야 하며, 특히 해당 개체에 애니메이션 효과가 적용되는 동안 사용자 상호 작용을 지원하려는 경우 애니메이션에 중요한 성능 문제가 있을 수 있습니다. 이러한 이유로 애니메이션이 종속 애니메이션으로 처리되는 다른 속성에 애니메이션 효과를 주기보다는 변환을 사용하여 애니메이션 효과를 주는 것이 좋습니다.

변환을 대상으로 지정하려면 RenderTransform의 값으로 기존 Transform이 있어야 합니다. 일반적으로 초기 XAML에 적절한 변환 형식에 대한 요소를 배치하며, 경우에 따라 해당 변환에 설정된 속성이 없는 경우도 있습니다.

보통은 간접 대상 지정 기술을 사용하여 변환의 속성에 애니메이션을 적용합니다. 간접 대상 지정 구문에 대한 자세한 내용은 스토리보드 애니메이션 및 Property-path 구문을 참조하세요.

컨트롤의 기본 스타일은 변형 애니메이션을 시각적 상태 동작의 일부로 정의하는 경우가 있습니다. 예를 들어 ProgressRing의 시각적 상태는 애니메이션 효과가 추가된 RotateTransform 값을 사용하여 링의 점을 '회전'시킵니다.

다음은 변환에 애니메이션을 적용하는 방법의 간단한 예입니다. 이 경우 RotateTransform의 Angle에 애니메이션 효과를 추가하여 시각적 중심을 중심으로 Rectangle을 회전시킵니다. 이 예제에서는 RotateTransform의 이름을 (UIElement.RenderTransform).(RotateTransform.Angle)(으)로 지정하므로 간접 애니메이션 대상 지정이 필요하지 않지만 변환 이름을 명명하지 않은 상태로 두고, 변환이 적용되는 요소의 이름을 지정하고, 간접 대상 지정을 사용할 수도 있습니다.

<StackPanel Margin="15">
  <StackPanel.Resources>
    <Storyboard x:Name="myStoryboard">
      <DoubleAnimation
       Storyboard.TargetName="myTransform"
       Storyboard.TargetProperty="Angle"
       From="0" To="360" Duration="0:0:5" 
       RepeatBehavior="Forever" />
    </Storyboard>
  </StackPanel.Resources>
  <Rectangle Width="50" Height="50" Fill="RoyalBlue"
   PointerPressed="StartAnimation">
    <Rectangle.RenderTransform>
      <RotateTransform x:Name="myTransform" Angle="45" CenterX="25" CenterY="25" />
    </Rectangle.RenderTransform>
  </Rectangle>
</StackPanel>

void StartAnimation (object sender, RoutedEventArgs e) {
    myStoryboard.Begin();
}

런타임에 참조의 좌표 프레임 고려

UIElement에는 두 UI 요소의 참조 좌표 프레임을 상호 연결하는 Transform을 생성할 수 있는 TransformToVisual이라는 메서드가 있습니다. 루트 시각적 개체를 첫 번째 매개 변수로 전달하는 경우 이를 통해 요소를 앱의 기본 참조 좌표 프레임과 비교할 수 있습니다. 이는 다른 요소에서 입력 이벤트를 캡처했거나 실제로 레이아웃 패스를 요청하지 않고 레이아웃 동작을 예측하려는 경우에 유용할 수 있습니다.

포인터 이벤트에서 가져온 이벤트 데이터는 GetCurrentPoint 메서드에 대한 액세스를 제공합니다. 여기서 relativeTo 매개 변수를 지정하여 참조의 좌표 프레임을 앱 기본값이 아닌 특정 요소로 변경할 수 있습니다. 이 방법은 변환 변환을 내부적으로 적용하고 반환된 PointerPoint 개체를 만들 때 x-y 좌표 데이터를 변환합니다.

수학적으로 변형 설명

변환 행렬의 관점에서 변환을 설명할 수 있습니다. 3×3 행렬은 2차원 x-y 평면의 변환을 설명하는 데 사용됩니다. 아핀 변환 행렬을 곱하여 회전 및 기울이기(전단) 및 변환과 같은 선형 변환의 수를 구성할 수 있습니다. 아핀 변환 행렬의 마지막 열은 (0, 0, 1)와 같으므로 수학 설명에서 처음 두 열의 구성원만 지정해야 합니다.

수학적 배경 지식이 있거나 행렬을 사용하여 좌표 공간의 변환을 설명하는 그래픽 프로그래밍 기술에 익숙한 경우 변환에 대한 수학적 설명이 유용할 수 있습니다. 3x3 행렬 측면에서 Transform을 직접 표현할 수 있는 Transform 파생 클래스인 MatrixTransform입니다. MatrixTransform에는 6개의 속성이 있는 Matrix 속성이 있습니다. 해당 속성은 M11, M12, M21, M22, OffsetX, OffsetY입니다. 각 Matrix 속성은 Double 값을 사용하며, 아핀 변환 행렬의 6개의 관련 값(열 1과 2)에 해당합니다.

1 열 2 열 3 열
M11 M12 0
M21 M22 0
OffsetX OffsetY 1

TranslateTransform, ScaleTransform, RotateTransform 또는 SkewTransform 개체로 설명할 수 있는 모든 변형은 Matrix 값을 갖는 MatrixTransform으로 동일하게 설명할 수 있습니다. 그러나 이러한 변환 클래스의 속성은 Matrix에서 벡터 구성 요소를 설정하는 것보다 개념화하기 쉽기 때문에 일반적으로 TranslateTransform 및 기타 함수만 사용합니다. 또한 변환의 불연속 속성에 애니메이션 효과를 더 쉽게 적용할 수 있습니다. Matrix은 실제로 DependencyObject가 아닌 구조이므로 애니메이션 효과가 더해진 개별 값을 지원할 수 없습니다.

변환 작업을 적용할 수 있는 일부 XAML 디자인 도구는 결과를 MatrixTransform으로 직렬화합니다. 이 경우 XAML에서 직접 Matrix 값을 조작하지 않고 동일한 디자인 도구를 다시 사용하여 변환 효과를 변경하고 XAML을 다시 직렬화하는 것이 가장 좋습니다.

3D 변형

Windows 10에서 XAML은 UI를 사용하여 3D 효과를 만드는 데 사용할 수 있는 새 속성 UIElement.Transform3D를 도입했습니다. 이렇게 하려면 PerspectiveTransform3D를 통해 화면에 공유 3D 원근 또는 '카메라'를 추가한 다음 CompositeTransform을 사용할 때와 마찬가지로 CompositeTransform3D를 사용하여 3D 공간의 요소를 변환합니다. 3D 변환을 구현하는 방법에 대한 자세한 내용은 UIElement.Transform3D를 참조하세요.

단일 개체에만 적용되는 더 간단한 3D 효과의 경우 UIElement.Projection 속성을 사용할 수 있습니다. PlaneProjection을 이 속성의 값으로 사용하는 것은 고정 정사각형 보기 변환 및 요소에 하나 이상의 3D 변환을 적용하는 것과 같습니다. 이러한 유형의 변환은 XAML UI에 대한 3차원 정사각형 보기 효과에 자세히 설명되어 있습니다.