방법: UIElement를 좌우 또는 상하 대칭 이동

이 예제에서는 ScaleTransform을 사용하여 UIElement를 좌우 또는 상하로 대칭 이동하는 방법을 보여 줍니다. 이 예제에서 Button 컨트롤(UIElement의 형식)은 ScaleTransform을 해당 RenderTransform 속성에 적용하여 대칭 이동됩니다.

단추를 대칭 이동하기 위한 그림

다음 그림은 대칭 이동할 단추를 보여 줍니다.

대칭 이동하려는 UIElement

다음은 단추를 만드는 코드를 보여 줍니다.

<Button Content="Flip me!" Padding="5">
</Button>

단추를 가로로 대칭 이동하기 위한 그림

단추를 가로로 대칭 이동하려면 ScaleTransform을 만들고 해당 ScaleX 속성을 -1로 설정합니다. ScaleTransform을 단추의 RenderTransform 속성에 적용합니다.

<Button Content="Flip me!" Padding="5">
  <Button.RenderTransform>
    <ScaleTransform ScaleX="-1" />
  </Button.RenderTransform>
</Button>

ScaleTransform을 적용한 후의 단추

해당 위치에서 단추를 대칭 이동하기 위한 일러스트레이션

이전 그림에서 볼 수 있듯이 단추가 대칭 이동되었지만 이동되었습니다. 단추가 왼쪽 위 모서리에서 대칭 이동되었기 때문입니다. 단추를 제자리에서 대칭 이동하기 위해 모서리가 아닌 가운데에 ScaleTransform을 적용하려고 합니다. ScaleTransform을 단추 가운데에 적용하는 쉬운 방법은 단추의 RenderTransformOrigin 속성을 0.5, 0.5로 설정하는 것입니다.

<Button Content="Flip me!" Padding="5"
  RenderTransformOrigin="0.5,0.5">
  <Button.RenderTransform>
    <ScaleTransform ScaleX="-1" />
  </Button.RenderTransform>
</Button>

RenderTransformOrigin이 0.5, 0.5인 단추

단추를 세로로 대칭 이동하기 위한 그림

단추를 세로로 대칭 이동하려면 해당 ScaleX 속성 대신 ScaleTransform 개체의 ScaleY 속성을 설정합니다.

<Button Content="Flip me!" Padding="5"
  RenderTransformOrigin="0.5,0.5">
  <Button.RenderTransform>
    <ScaleTransform ScaleY="-1" />
  </Button.RenderTransform>
</Button>

세로로 대칭 이동된 단추

참고 항목

• Transform 개요