Image 컨트롤과 ScaleTransform 을 이용한 단순한 Image의 확대 축소 방법 입니다.

핵심 소스 부분은 다음과 같이 매우 간단 합니다.

<Grid Height="Auto" Width="Auto" Background="#FFFFFFFF">
                <Image Margin="0,0,0,0" x:Name="PhotoImage" Source="/wonder02.jpg" Stretch="Fill">
                    <Image.RenderTransform>
                        <ScaleTransform x:Name="Zoom" ScaleX="1" ScaleY="1">
                           
                        </ScaleTransform>
                    </Image.RenderTransform>
                </Image>
  </Grid>


Grid 레이아웃 밑에 Image 컨트롤을 하나 추가 하고 이 Image 컨트롤 안에 들어가는 이미지가 확대 축소 될 수 있게
컨트롤의 크기나, 위치, 회전이나, 기울기 등을 변형 할 수 있는 RenderTransfrom 이라는 프로퍼티를 하나 설정 했습니다.
마지막으로 Image 컨트롤의 수평, 수직 방향으로 크기를 조절해 주는 ScaleTransform 을 정의 했습니다.

위에서 ScaleX , ScaleY의 값을 조절 이미지의 크기를 확대, 축소 합니다.
두 값이 1이면 기본값이고, 1보다 작아지면 크기가 줄고, 1보다 커지면 크기가 커짐니다.

또한 수평과 수직 크기조절의 기준점이 되는 CenterX 속성과 CenterY 속성
CS 파일에서 Image 컨트롤의 가운데로 정의 하였습니다.


소스는 다음과 같습니다.
(소스의 나머지 부분들은 뭔가 다른것 시도 할려고 남겨 났습니다.)


Posted by JMSOFT

댓글을 달아 주세요

티스토리 툴바