2011.10.15 Windows Phone 7 App camp 따라가기. (2)

두번째는 파일에 있는 PathListBoxMenu.sln을 불러오시면 됩니다. 다음과 같이 뜨게 됩니다.

이제 해야 하는건 화면에 나와있는 아이콘들을 어떤 모양으로 설정해서 그 모양대로 보이게 하는것이지요. 예를 들면 다음과 같이요.

자 일단 배열하고자 하는 모양을 폰상에 올려 놓습니다. 일단 캠프의 예시대로 원형을 해보겠습니다.

뭐 단순히 Eclipse만 집어넣으면 뒤에 있는 이미지가 보이지 않으므로 적절하게 Transparent를 줘서 우측과 같이 표현해 줍니다.

자 이제 가장 핵심인 PathListBox를 삽입해야 합니다. 물론 이 항목은 Assets에서 검색을 통하면 가장 쉽게 찾습니다.

 

이걸 이제 Object속에 삽입을 해줘야 합니다. 그런데 현재 제가 사용하는 프로젝트에는 TitlePanel,StackPanel 이 있고
그 안에 각종 메뉴 아이콘들이 있습니다. 그렇기 때문에 메뉴를 조절하기 위해서는 실질적으로 StackPanel안에 삽입합니다.
다음과 같이 지정하시면 됩니다.

자 그럼 이제 본격적인 Path를 지정해보도록 하겠습니다. 좌측 Properties에서 아래로 내리다 보면 LayoutPath라는 항목이
있습니다. 거기서

밑줄친 부분의 원 표시를 누르면 아이콘을 선택할 수 있게 됩니다. 이 아이콘이 바로 Path를 지정해주는 역할을 합니다.

저는 아까 설정한 원형을 Path로 설정할거기 때문에 지정하면 다음과 같이 바뀌게 됩니다.

그럼 Path를 지정해줬으므로 다음은 Path를 따라 이동할 element가 필요합니다. 그럼 다음과 같이 메뉴 아이콘을 Pathlistbox안에 삽입하면 되겠지요?

아 뭔가 하나가 빠진거 같지 않나요? 지금과 같은 경우는 겹쳐서 발생한 현상입니다. 이제 균일하게 배열하기 위한 설정을 해줘야 합니다.
균일하게 배열하기 위해서는  distribution 부분을 Even으로 설정하면 됩니다.

Capacity는 한번에 Path위에 삽입할 수 있는 아이콘 수를 결정지어 줍니다.
Padding은 메뉴간의 간격을 표현해주는데 여기선 별 상관없을 듯 하네요.
Orientation은 발산을 표현해줍니다.
Start은 처음 시작을 어떻게 할건가 지정해줍니다. 수치를 변화시키면 원 모양으로 뺑글뺑글 도는 걸 확인할 수 있습니다.

각종 메뉴를 적절하게 설정하면 다음과 같은 결과를 얻을 수 있습니다.

그럼 이제 이걸 Story화를 시켜야되겠지요. Storyboard를 만들도록 하겠습니다. 다음과 같이 만들 수 있습니다.

이렇게 만들면 Timeline이 형성되는데 이때 PathListBox를 선택하고 0초에서 Action을 줍니다.

이제 그럼 아까 Start의 뺑글뺑글 도는 기능을 이용해보도록 하겠습니다. 2초에 타임을 두고 start를 0에서 100으로 변화시킵니다. 그럼 Timeline이

늘어나 있는 것을 확인할 수 있습니다.

여기서 2초 부분에 마우스를 클릭하면 우측창이 다음과 같이 EasingFuction이라는 게 활성화되지요.

여기서 이동하는 가속도를 줄 수 있습니다. 저는 참고로 Back out을 선택해줬습니다.

이제 여기다가 몇번을 반복하겠다는 걸 설정으로 줄수 있습니다. 무한하게 돌릴 수도 있지요

Object & Timeline에서 Storyboard1이라는 제목을 바로 클릭하면 우측에 메뉴가

바뀝니다. 여기서 원하는 만큼 지정할 수 있습니다.

자 이제 StoryBoard를 지정해줬으니 이를 활성화시킬 ControlStoryboardAction의 필요성이 느껴지네요.
(이 부분에 대해서는 1번 글에서 언급했으니 생략하겠습니다.)
다음과 같이 메뉴를 지정해줍니다.

<- 특정 조건이 없으므로 Loaded로 지정합니다.





<- 결론적으로 바로 Storyboard1을 실행하라는 겁니다.






여기까지가 PathListBox를 활용한 아이콘의 이동 방법이었습니다. 이밖에도 다른 모형을 주고 그 모양대로 따라가게끔
지정할 수도 있는 거지요. 정상적으로 컴파일하면 다음과 같은 결과를 얻을 수 있을 겁니다.

여기까지가 PathListBox를 활용한 아이콘의 이동 방법이었습니다. 이밖에도 다른 모형을 주고 그 모양대로 따라가게끔
지정할 수도 있는 거지요.

벌써부터 다음 AppCamp가 기대됩니다. 모든 분들 많이 참석하셔서 좋은 기술 및 정보를 얻어가셨으면 좋겠습니다.