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

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

예제

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

대칭 이동할 UIElement

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

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

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

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

ScaleTransform을 적용한 후의 단추

이전 그림에서 볼 수 있듯이 단추가 좌우로 대칭되는 동시에 이동되었습니다. 이는 단추를 왼쪽 모퉁이를 기준으로 대칭 이동했기 때문입니다. 단추를 제자리에서 대칭 이동하려면 ScaleTransform을 모퉁이가 아니라 가운데에 적용해야 합니다. 단추의 RenderTransformOrigin 속성을 0.5, 0.5로 설정하면 손쉽게 단추 가운데에 ScaleTransform을 적용할 수 있습니다.

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

RenderTransformOrigin이 0.5, 0.5인 단추

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

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

상하 대칭 이동한 단추

참고 항목

개념

Transform 개요