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

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

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

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

변환이 없는 단추graphicsmm_buttonflipbeforeflip
대칭 이동하려는 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>

단추가 가로로 대칭 이동(0,0)graphicsmm_buttonfliphorizontalflip_displaced
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>

단추가 중앙으로 대칭 이동graphicsmm_buttonfliphorizontalflip_inplace
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>

단추가 세로로 대칭 이동graphicsmm_buttonflipverticalflip_inplace
세로로 대칭 이동된 단추

참고 항목

• Transform 개요