Expression Blend/WPF2010.08.11 16:04

서피스 화면 위의 사진이나 오브젝트들을 터치로 늘렸다 줄였다 이리저리 움직이는 기능을 컨트롤로 간단하게 구현할 수 있습니다. 


사진출처 :
http://dvice.com/archives/2008/04/microsoft_surfa.php?p=14&cat=undefined#more

블렌드에서 ScatterView 컨트롤을 펼쳐놓고 scatterViewItem을 추가해서 scatterViewItem에 사진만 넣어 주시면 됩니다.

그렇게 해서 시뮬레이터로 실행하면 요렇게 사진이 랜덤하게 화면에 뿌려지고 늘렸다 줄였다 이리저리 움직이고 돌리고 할 수 있습니다.
그런데 스케터뷰에 랜덤하게 나오는 오브젝트들의 위치를 미리 정해놓거나 늘어나는 사이즈를 최대 최소를 정해놓거나 이동을 못하게 한다던가 오브젝트들에 간단한 에니메이션을 주고 싶을때는 ? 
스케터뷰아이템의 속성을 이용해서 간단히 스토리보드를 만들 수 있습니다. 
스케터뷰아이템을 스토리보드로 에니메이션을  만들때 xaml에서 몇가지 수정이 필요했던 것이 있어서 정리해둡니다. 
 

1) 스케터뷰로 간단히 터치 사진뷰 만들기

01. 비주얼스튜디오에서 서피스어플리케이션을 생성하고 블렌드에서 오픈했습니다. (
http://atdawn.tistory.com/36 참조)


02. 최상위 Grid선택하고 오른쪽 [Properties]패널에서 Layout속성을 w1024* h768 로 사이즈를 조정합니다. (서피스 해상도)


03. 왼쪽 [Assets]패널 Controls파트에서 SCATTER로 검색하면 관련컨트롤이 나옵니다.


04. 최상위 그리드 안에 스케터뷰 컨트롤을 그리드 꽉차게 넣은다음 스케터뷰 컨트롤 안에 스케터뷰아이템을 3개 정도 추가합니다.


05. 시뮬레이터를 켠 다음 [시작]-[Microsoft Surface SDK 1.0 SP1]-[Tools]-[Surface Simulator]


06. 방금 만든 부분을 실행 시켜봅니다. [F5]  실행화면에 디폴트 스타일의 스케터뷰 아이템이 랜덤으로 뿌려집니다. 사이즈 조절도 되고 회전도 되고 편하네요! ^^


07. 왼쪽 Projects패널에서 App파일을 선택한 후 마우스 오른쪽을 클릭하여 [Add Existing Item...]메뉴로 사진을 불러옵니다.


08. 불러온 사진들을 스케터뷰아이템안에 쏙쏙 넣어줍니다. (Projects패널에서 떠블클릭을 하면 사진이 아트보드에 뿌려집니다.) 사진을 넣을때 Margin속성에 값이 들어가는지 확인한번 해주세요. Margin(0,0,0,0)
오른쪽 [Properties]패널에서 Layout속성에서 스케터뷰 아이템의 Width값과 Height값을 사진크기에 맞게 설정해줍니다.


09. 그런다음 다시 실행해주면 화면에 빈 스케터뷰 아이템 대신 사진이 떠다니고 있습니다. 초간단 사진 뷰어 완성! 


10. 스케터뷰 아이템의 속성을 좀더 알아보겠습니다. 오른쪽 [Properties]패널에서 Miscellaneous속성을 열어보면 여러가지 옵션들이 보이는데요, ①CanMove ②CanRotate ③CanScale ④Center ⑤Orientation을 주로 사용합니다. 네임만 봐도 어떤 속성인지 보이시죠^^


11.④Center에서는 오브젝트의 위치를 지정해줄 수 있습니다. (0,0)일 경우 오브젝트의 센터가 레이아웃의 0,0 값에 위치합니다.⑤Orientation에도 값을 넣어 각도를 조절 할 수 있습니다. 


12. 사진의 위치와 각도가 지정한 값으로 화면이 실행됩니다.


이어서 http://atdawn.tistory.com/70

저작자 표시 비영리 변경 금지
신고
Posted by 도온

티스토리 툴바