기획자를 위한 WP7 개발 기초 - Sketchflow 다루기 (6)

Prototype05_Start.zip

Prototype05_Start.z01

Prototype05_Start.z02

자 이제 마지막입니다. 물론 항상 말했던 것이지만 이내용과 소스는

http://www.microsoft.com/design/toolbox/tutorials/using-sketchflow/part5/default.aspx 

에서 받을 수 있으며 영어를 동반한 동영상 데모도 있으니 참고하시기 바랍니다.

이번 시간에 할 내용은  ListBox를 형성하고 그에 대한 애니메이션과 트리거를 설계하는 겁니다. 말은 어렵게 했지만 실제 원문에서도 볼 수 있는 것처럼 3페이지만에 끝나는 내용입니다.

 
지금 디자인뷰에 떠 있는 TopPicks 부분을 펼치면 알겠지만 안의 내용물들이 ListBox로 되어 있습니다. 이제 이 ListBox에 대한 State를 형성해보도록 하겠습니다. 우선 State창에서 새로운 State를 형성합니다.

 
그리고 그것에 대한 이름을 TopPicksVisualStateGroup 이라고 이름짓습니다. 그러면 새로운 State 그룹이 형성되는데 사진과 같이 

새로운 State를 3개 더 추가합니다. 그럼 이 StateGroup내에는 총 4개의 State가 존재하겠지요. 이중 맨 처음에 있는 Default transition 부분은 기본 설정이므로 못건드리고 나머지 3개에 대해서는 각각의 이름도 아까 topPicksPanoItem내의 여러 ListBox처럼 적절하게 이름을 넣습니다.

실수로 추가하셨다면 옆의 빼기 버튼을 누르면 해당 State는 사라집니다.
이제 지난 시간에 잠깐 언급했던 것처럼 각각의 State를 설정해야합니다. 이 과정은 딱 화면을 보시면 알겠지만 애니메이션을 만드는 과정과 유사합니다. 우선 TopPickDefaultState에 대해서 설정합니다.

이때는 ResultListBox를 제외한 나머지 ListBox는 보이지 않아야 합니다. 우리는 지나온 튜토리얼중에서 이렇게 보이지 않게 하는 기능에 대해서 배웠습니다. 바로 Collapsed 기능이지요. 이걸 ChickenListBox와 BeefListBox에 적용합니다. 변화가 생긴 부분에 대해서는 아래와 같이

개체옆에 빨간색 점이 생깁니다. 이로써 개체에 애니메이션의 영향이 미치는지를 확인할 수 있습니다.
다음은 ChickenState에 대한 지정입니다.

이 때는 Result와 beef에 대한 결과는 안보여야 합니다. 다만 Chicken에 대한 정보는 보여주어야합니다. 그럼 이걸 택한 상태에서 ResultListBox와 BeefListBox만 Collapsed하면 되겠지요. 
BeefState도 마찬가지 입니다. 역시 ResultListBox와 chickendListBox만 Collapsed 시키면 됩니다.

이걸 확인할려면 맨위의 Base 버튼을 누르면 됩니다.그래서 해당 State를 한번씩 눌러보시면 어느때에 ListBox가 떠야 할지를 알 수 있을겁니다. 이부분이 잘 안된다면 다시 State를 설정해보실것을 권합니다.

아참 resultListBox만 보인다고 하시는 분은 지금 Object창에 보면 chickenListBox와 BeefListBox가 hide 된 상태일 겁니다. 이걸 눈을 띄워줘서 show를 시키면 정상적으로 확인할 수 있을겁니다.

이제 파노라마를 테스트해볼 시간입니다. 지금 TopPick이 보이는 상황이므로 이전 페이지를 보이게 하려면 Collapsed되어있는 MainMealPanoItem을 Visible로 바꿔야 하겠지요?

그런데 분명 MainMealPanoItem을 Visible로 바꿨음에도 디자인뷰상으로는 그대로 남아있네요?
그럼 이때는 Project - Build Project를 선택하면 ReFresh과정을 거쳐서 원하는 결과가 나오게 됩니다.

그럼 아래와 같이 맨 처음 화면인 What`s cookin`이 뜨게 됩니다.

자 이제 해야 할 일은 아까 만들어놓은 State를 여기에 붙여야 합니다. 이제 원하는 결과라면 Chicken을 눌렀을때 아까 ChickenState가 활성화되고 Beef를 누르면 BeefState가 활성화되어야합니다.
이걸 위해서는 Asset에서의 GoToStateAction 이라는 것을 써야 합니다.

지금 위에는 두가지 GoToStateAction 항목이 있습니다. 이중에서 위에서 선택한 Mockup은 선택하시면 안됩니다. 중간에 Prototyping.WindowsPhone.Mockups 이라고 되어 있는 것은 선택하지 마시고

Interactivity.Core라고 되어 있는 부분을 선택하셔야 합니다. 두 항목이 나중에 Properties에서 보이는 창이 약간 다른데 결과값까지 좌우합니다. 이것때문에 피봤습니다 ㅠ

유의해야할 점은 State가 설정되어 있는 페이지가 아니라 누르는 주체가 있는 페이지에 이 Action이 포함되어야한다는 겁니다. 지금으로 따지면 이 MainMealPanoItem안에 들어가야지 아까 State를 설정한 TopPicksPanoItem가 아니라는 점입니다. 

이제 이것을 MainMealPanoItem 하위에 있는 ListBox에 드래그해서 넣습니다.

 이제 Properties창이 이 GoToStateAction에 대한 것으로 잡히게됩니다.

먼저 이 Action을 활성화시키기위한 Trigger가 필요합니다.

중간에 보시면 Selection Changed라는 항목이 있습니다. 이게 바로 현재 상태에서 변화했을 때 활성화시키는 항목입니다.

이중에 중간에 접혀있는 Condition이라는 항목을 펼칩니다.

이제 어떤 조건일때 GoToState를 수행할 것인지 Condition을 정해야합니다. 위와 같이 Add Condition이란 항목을 통해서 추가시킵니다.

 그럼 새로운 Condition이 형성되는데 이제 우리는 실제 들어있는 Data중에서 일치하는 항목을 찾았을때 State가 실행되도록 해야합니다. 위와 같은 항목은 옆에 있는 조그만 네모를 눌렀을때 활성화되는데 이중에 중간에 있는 Data Binding을 선택해줍니다. 그리고 이걸 설정하기에 앞서서 Data Store라고 되어 있는 부분을 Value로 바꿔줘야 합니다.

그럼 Data Binding에 대한 항목이 뜨게 됩니다. 우리가 봐야할 항목은 두번째 탭에 있는 Element Property가 되겠습니다.
 

그러면 우리가 PhoneChorme상에서 만들었던 모든 내용들이 포함되어 있습니다. 이중에서 바로 앞에서 다뤘던 MainMealPanoItem안에 있는 listBox를 선택합니다.

이중에 중간에 내리다보면 SelectedIndex라는 항목이 있습니다. 이 항목을 선택한 채로 확인버튼을 누릅니다.

이 SelectedIndex부분은 초기값이 -1입니다. 이때는 아무 선택이 안된 상태입니다. 그런데 해당 Listbox가 눌린 다음부터는 안의 Data값이 0부터 매핑됩니다. 예를 들어서 아무것도 안눌린 상태는 -1이지만 만약 이 What`s cookin`이 눌린다면 chicken은 0, Beef는 1.... 이런식으로 차례대로 번호가 매겨진다는 것이지요. 

그럼 우리는 그 값이 0일때를 찾아서 이때는 chickenState, 1일때는 BeefState를 가게한다면 그게 바로 GotoStateAction에 대한 condition이 되는 것이지요.

 그래서 두번째 채우는 항목을 일단 0으로 채워넣습니다.

물론 사전에 Data Store라고 되어 있는 부분을 Value로 바꿔주는 것 잊지 마세요.

이제 어느 State로 가느냐를 결정하면 됩니다.
 

 
우리는 첫번째 항목인 ChickenState를 가는게 목적입니다. 그래서 이걸 선택해줍니다.

아까 분명 GoToStateAction에서 Mockups를 선택하지 마라는 이유가 바로 여기 있습니다. Mockups를 선택하면 이 항목이 없습니다..

 자 이제 f5키를 눌러서 테스트해보면 chicken을 클릭했을때 TopPick 값이 변하는 것을 확인할 수 있을겁니다.
이같은 방식으로 Beefstate나 TopPickDefaultState를 설정하면 됩니다.

 어차피 위에서 수정할 값은 두번째 박스의 Value이므로 GoToStateAction을 복사하기로 하겠습니다.

 
이제 두번째는 이렇게 바꿔주면 되겠지요?

 
그냥 값과 StateName만 변경시켜준겁니다.
이제 얼추 끝났습니다.

남은건 AdvSearch페이지를 어떻게 써먹냐는것만 남았습니다.
튜토리얼에서는 검색 이미지를 삽입해서 그 버튼을 누르면 이동하게끔 해놨습니다.

일단 Assets에서 Search란 걸 검색하면 이미지가 하나뜹니다. 이걸 선택하고

 
MainMealPanoItem상에 삽입합니다. 그럼 메인창에 검색 이미지인 돋보기가 뜨겠지요. 원하는 곳에 배치하면 됩니다.
 

이제 여기에 Navigate To라는 기능을 써서 이동하면 됩니다.

 
이 항목을 통해서 자신이 원하는 어느 스크린으로든 갈 수 있습니다. 

 
유심히 보신분은 아시겠지만 네비게이트를 지정하면 종속적으로 이런 항목이 생성됩니다. 이게 다 코딩의 과정인데 이걸 블랜드가 대신해주고 있는거지요. 편리해요!

이제 끝입니다. 한번 시뮬레이션해보겠습니다.
 

이것이 Toolbox에서 언급한 SketchFlow의 tutorial이었습니다. 지금까지 한 전반적인 내용들이 다 들어가 있었고 아마 지금까지 했던 내용들을 유념해두시면 Sketchflow를 하는데 있어서 크게 어려울 건 없으실 겁니다. 응용하실 수도 있고요.

 나중에 잡지보고 홈페이지에 오신 분이나 SketchFlow가 어떤건데 다루기가 어렵다 하신 분들에게 도움이 되셨으면 하고 이 기획시리즈를 마칩니다. 다음부턴 다시 실버라이트 기초로 돌아가겠습니다. 읽어주셔서 감사합니다~