[Windows 8] ScrollViewer

8월 15일자로 Windows 8 RTM과 VS 2012 이 출시되었습니다. 저는 MSDN 계정을 가지고 있기 때문에 남들보다는 조금 일찍 써보게 되네요. 그런데 사실 이런 툴이 중요한게 아니라 그냥 해보는게 중요한 거지요. 이에 맞춰서 페졸드씨의 Programming Windows 8 6th edition도 RP버전으로 업그레이드했습니다.

정식으로 ebook을 구매하신 분은 O`reilly에서 추가버전과 소스 코드를 받으실 수 있습니다. 뭐 그렇다 해도 거의 내용은 CP버전과 비슷한 거 같습니다. 자 다시 시작해보겠습니다. 

 StackPanel로 여러가지를 다뤄보셨나요? 그런데 이것 저것 건드려 보신 분은 뭔가 이상한게 보일겁니다.StackPanel 안에 개체를 여러개 넣다보면 아무래도 화면의 크기는 한정되어 있기 때문에 사용자가 컨트롤 할 수 없는 곳까지 개체들이 쌓이게 됩니다. 이때는 당연한 이야기이겠지만 무언가의 공간을 확장시키는 것이 필요합니다. 그렇게 할 수 있는 것 중 하나가 바로 이번 포스트에서 소개해드릴 ScrollViewer입니다. 우선 이 개체를 사용하려면 xaml에서 다음과 같이 작성해줍니다.

이렇게 하면 StackPanel이 하나의 ScrollViewer로 둘러 쌓이게 됩니다. 물론 디자인 뷰상에서는 확인할 수 없지만 실행시켜보면

우측에 화살표 줄이 생기는 것을 확인할 수 있습니다. 이게 바로 스크롤뷰어이며 항상 활성화되어 있는 것이 아니라 마우스를 움직였을때만 움직일 수 있는 가이드라인이 등장합니다.

 지난번 예시에도 잠깐 나왔었지만 StackPanel에서 이미지를 삽입하면 자동으로 Stretch 속성이 활성화되서 이미지가 화면크기에 딱 맞춰서 늘어났습니다. 물론 그 Stretch 속성을 비활성화 시켜서 원상태로 복원할 수 있지만 아무튼 이미지가 화면에 자동으로 맞춰지는 경향이 있었습니다. 하지만 StackPanel은 이미지 크기 그대로를 유지하고 자유롭게 마우스 컨트롤을 통해서 이동할 수 있습니다. 예를 들어서 프로젝트에 2560x1600 짜리 이미지를 하나 삽입했습니다. 분명 이걸 표현할 수 있는 건 노트북을 제외하고는 없을 겁니다. 그런데 그냥 삽입하고 xaml을 다음과 같이 작성해보고 확인해봅시다.

당연히 1.jpg라는 이미지 파일이 프로젝트에 포함되어 있어야 합니다. 이상태에서 Simulator를 통해서 결과를 확인해보면

 

위와 같이 뜹니다. 정상적으로 나온거 같지만 이미지가 전부 나온게 아닙니다. 그건 시뮬레이터에서 터치기능을 활용해서 움직여도 전혀 안 움직입니다. 다시 코드로 돌아와서 StackPanel을 ScrollViewer로 감쌉니다.

결과는 영상으로 보시는게 좋을 것 같네요.

 

기존에 삽입을 하지 않았을 때는 움직이지 않던 개체가 ScrollViewer를 삽입하고 나서는 화면상에서 자유롭게 이동할 수 있게 됩니다. 참고로 동영상에도 잠깐 나왔지만 ScrollViewer를 설정하면 Pinch Zoom도 가능하게 됩니다. Simulator모드에서만 활성화 되는 기능은 우측의 버튼에서 선택할 수 있습니다.

이걸 선택하면 마우스 포인터가 두개의 원으로 바뀌는데 좌측으로 아래 원을 이동시키고 핀치를 시키고 싶으면 휠을 올리시면 됩니다. 반대로 하시려면 내리면 되는거지요.

그래서 동영상에서 확대 축소가 되는 것도 ScrollViewer를 삽입해서 였습니다. 물론 이런 기능이 필요없다 하시는 분이라면 속성중에서 ZoomMode라는 것이 있습니다. 이걸 비활성화시키면 됩니다. 다음과 같이 작성하면 되는 것이지요.

이 ScrollViewer의 속성을 조절할 수 있는 것중에 Visibility를 변경시킬 수 있는 게 있는데 그걸 사용할 때는 뷰어안의 StackPanel의 속성이 Vertical이냐 Horizontal이냐를 조금 고려해줄 필요가 있습니다. 만약 StackPanel이 가로로 쌓게 되어있다면 굳이 수직으로 ScrollViewer를 가로로 해줄 필요는 없는 거지요. 이런 때는 VerticalScrollBarVisibility를 Disable시키고 HorizontalScrollBarVisibility를 활성화시키면 되는거지요. 참고로 아까 동영상에도 보시면 아시겠지만 아무 속성을 설정하지 않은 상태에서 수직으로는 ScrollBar가 생기고 수평으로는 생기지 않았지요. 이게 바로 Default 속성입니다. 그래서 HorizontalScrollBarVisibility는 Disabled, Vertical은 Visible로 되어 있습니다.

 그러면 한가지 의문점이 생길 수 있습니다. 그 visibility의 속성값에는 총 4가지가 있습니다.

대충 기능 중에서 visible과 Disabled는 아실 겁니다.  그런데 도대체 Auto와 Hidden은 뭘까요?

 그 설명은 msdn에 잘되어 있습니다.

http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.scrollbarvisibility.aspx

 hidden은 그 bar의 속성은 유지한 채로 안보이게만 하는 겁니다. 그래서 마우스나 손을 움직여도 우측의 바는 나타나지 않습니다. 반면 Auto는 마우스로 컨트롤 했을 때 바가 형성됩니다. 그 이외의 상태에서는 이동만 가능하고 스크롤바는 보이지 않습니다. 더 자세한 설명을 하자면 Auto나 Disable은 시야에 보이는 폭이나 높이의 영향을 받지만 Hidden같은 경우에는 그런게 전혀 상관이 없습니다. 그냥 자유롭게 움직이는 거지요.

 

 간단하게 ScrollViewer가 어떤건지 사용법에 대해서 언급해봤습니다. 아마 다음 프로그램에서는 이를 활용한 예제를 해보고자 합니다.