방법: 상대 값을 사용하여 변환 원점 지정

이 예제에서는 상대 값을 사용하여 FrameworkElement에 적용되는 RenderTransform의 원점을 지정하는 방법을 보여 줍니다.

RenderTransform 속성을 사용하여 FrameworkElement에 대해 회전, 확장 또는 기울이기를 수행할 때 기본 설정은 요소의 왼쪽 위 모퉁이에 변환을 적용하는 것입니다. 요소의 중심에서 회전, 확장 또는 기울이기를 수행하려는 경우에는 변환의 중심을 요소의 중심으로 설정하여 조정할 수 있습니다. 하지만 이렇게 하려면 요소의 크기를 알아야 합니다. 요소의 중심에 변환을 적용하는 보다 쉬운 방법은 변환 자체에 중심 값을 설정하는 대신 RenderTransformOrigin 속성을 (0.5, 0.5)로 설정하는 것입니다.

예제

다음 예제에서는 RotateTransform을 사용하여 Button을 시계 방향으로 45도 회전합니다. 예제에서는 중심을 지정하지 않기 때문에 단추는 왼쪽 위 모퉁이인 점 (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을 사용하여 Button을 시계 방향으로 45도 회전하지만 이 예제에서는 단추의 RenderTransformOrigin을 (0.5, 0.5)로 설정합니다. 그 결과 회전이 왼쪽 위 모퉁이가 아니라 단추의 중심에 적용됩니다.

다음 그림에서는 다음 예제의 변환 결과를 보여 줍니다.

RenderTransformOrigin이 (0.5, 0.5)인 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"
      RenderTransformOrigin="0.5,0.5">
      <Button.RenderTransform>
        <RotateTransform Angle="45" />
      </Button.RenderTransform>
    </Button>
    <Button Content="A Button" Opacity="1" />
  </StackPanel>
</Border>

FrameworkElement 개체 변환에 대한 자세한 내용은 Transform 개요를 참조하십시오.

참고 항목

참조

Transform

개념

Transform 개요

기타 리소스

변환 방법 항목