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

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

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 개요
• 방법 항목