[WPF] Zoom In/Out & Rotate (줌인/줌아웃 & 회전)

이미지, 혹은 엘리먼트를 확대/축소, 회전 시키는 것은 Transform을 통해 쉽게 구현할 수 있다.

WPF에는 여러 개의 Transform 들을 제공하는데, 확대/축소의 경우 ScaleTransform, 회전의 경우 RotateTransform 을 사용하여 구현한다.

간단하게, 이미지를 확대 축소, 회전 시키는 프로젝트를 만들어보자. 

1. 확대 축소 시 전체 이미지를 볼 수 있도록 ScrollViewer 를 하나 만들고,

2. 이미지를 하나 삽입한다.

3. 확대, 축소, 회전을 위해 버튼을 3개 만들어보자

자 그럼 준비는 됐으니 Transform을 적용해보자.

우리가 Transform을 적용하고자 하는 엘리먼트는 <Image> 이므로, 하위에 LayoutTransform 에

TransformGroup 을 하나 만들고, 그 하위에 ScaleTransform 과 RotateTransform 을 각각 생성한다. C#측에서 변경해야 하기 때문에 각각의 트랜스폼에 적당히 이름을 달아주도록 한다.

해당 부분 코드는 아래와 같다.

<Image>

<Image.LayoutTransform>

<TransformGroup>

<ScaleTransform x:Name="myScaleTransform" />

<RotateTransform x:Name="myRotateTransform" />

</TransformGroup>

</Image.LayoutTransform>

</Image>

자, 그럼 모든 준비는 끝났다. 버튼을 눌렀을 때 확대/축소의 경우엔 ScaleTransform 의 ScaleX, ScaleY 속성을, 회전의 경우엔 RotateTransform 의 Angle 속성을 변경하면 된다.

함수는 간단하게 다음과 같이 작성하면 된다.

여기까지 작성하고 실행해보면 아래와 같이 제대로 동작함을 알 수 있다.