기획자를 위한 WP7 개발 기초 - sketchflow 다루기(3)

WPSketchFlowLesson02.zip

지난 시간에 언급한대로 예제 파일을 가지고 실습하겠습니다. 

http://www.microsoft.com/design/toolbox/tutorials/using-sketchflow/part2/ 

에서는 완성본도 포함되어 있으니 참고하실 분은 참고하셔도 됩니다.

 우선 이 파일을 블랜드를 통해서 블러오면 전에 했던 파일에 배경 이미지만 삽입되어 있는 것을 확인할 수 있을겁니다.
배경이미지는 Edit Template에서 Edit current를 통해서 이미지를 삽입하면 됩니다.

이번 시간에 할 것은 이 프로젝트에 샘플 데이터를 넣고 실제처럼 보여주자는 겁니다.

우선 Main 스크린을 더블클릭한 후 우측 창을 보시면 데이터라고 하는게 있습니다.

 
그중에 Create sample data를 선택하면  무슨 창이 뜨는데 그냥 New sample data를 선택하시면 됩니다.

 
이런 창도 역시 뜨는데 제목은 지금 보여줘야 할 데이터가 MainMenu에 관한 내용이므로 MainMenu라고 하겠습니다. 그러면 다음과 같이

샘플 데이터와 그에 소속된 개체가 두개 뜹니다. Property는 자신이 샘플로 보여주고자 하는 개체의 갯수를 나타냅니다. Data는 string이 될 수도 있고 이미지도 될 수 있고 심지어는 bool형 변수도 가능합니다. 일단은 1개만 필요하다고 가정하고 밑에 Property2는 삭제합니다. 그리고 Property1의 이름을 MainMenuItem이라고 변경합니다.

 

 유의해야 될점은 MainMenuItem의 끝에 그림이 사진과 같이 되어 있어야 한다는 겁니다. 저렇게 되어있어야
샘플 데이터를 string 변수형으로 집어넣을 수 있습니다. 

이제는 데이터를 삽입해야 합니다.

 
위의 그림처럼 Edit Sample Value라고 되어 있는 부분을 선택하면 다음과 같은 창이 뜹니다.

 
이창이 바로 샘플 데이터를 삽입하는 창이고 지금은 초기로 들어가있는 데이터를 보여줍니다. 밑에 표시되어 있는 Number of records는 바로 보여줄 데이터의 갯수를 나타내는 것이죠.

예제에서는 이를 여섯개로 하고 다음과 같이 고쳤습니다.

 
자이제 확인을 누르고 기존에 만들었던 MainMealPanoItem을 기억하실 겁니다. objects and timeline에 있는 부분으로 가서 그 아이템 옆에 있는 화살표 버튼을 누르면 하위로 grid라는게 속해 있다는 것을 확인할 수 있습니다. 이제 Sample data로 만들었던 MainMenuItem을 여기다가 드래그해서 집어넣습니다.

그러면 grid밑에 listbox라는 개체가 종속되면서 디자인 뷰에도 기존에 샘플 데이터로 넣어놓은 값이 뜨는 것도 볼 수 있습니다.

 물론 listbox를 선택한 상태에서 마우스 우클릭후 Autosize- fill을 선택하면 그 창이 가득찹니다. 이전에 다뤘던 내용이지요. 그런데 지금 보시면 listbox의 테두리에 두꺼운 선이 처져있는 것이 보이네요. 이를 제거하겠습니다.

listbox를 선택한 상태에서 properties에 들어갑니다. 그후 중간에 보면 brushes라는 항목이 있습니다. 그중에는 Borderbrush라는 항목도 있고요. 이 부분이 바로 테두리에 대한 정보를 수정하는 곳입니다. 여기를 색깔이 없게끔 해야합니다.

 
여기까지 해주면 테두리가 없어집니다. 다른 부분도 똑같이 해주면 되겠지요.

그런데 좀 이상하게 생각할 부분이 있습니다. 왜 사이즈는 늘렸는데 글자 크기는 저렇게 작은 걸까요?

이부분은 listbox의 additional template를 수정해줘야 합니다.

다음과 같이 들어갑니다.
 

listbox를 마우스 우클릭으로 들어가시면 Edit additional template 부분이 있습니다. 이중에서 여러가지 항목이 있는데
그중에 Edit Generated Items - Edit current를 선택합니다. 이 항목으로 들어가면 object and timeline창이 변합니다. 
 

 
이창과 더불어서 디자인뷰와 properties창도 각각의 개체를 선택하고 있는게 보일겁니다. 이전에는 선택이 안됬었지요.

이제 여기서 TextSize를 변경시키면 전체적인 폰트의 사이즈가 커집니다. 예제에서는 36으로 바꾸라고 되어 있습니다.

 
그럼 위와 같이 폰트가 크게 변했습니다. 다시 돌아가기 위해서는  

 
디자인뷰 창의 Listbox를 누르거나 ItemTemplate 옆에 있는 버튼 눌러주면 다시 원래의 창이 뜨게 됩니다.

 여기까지가 What1`s cookin`에 채워져야 할 부분이었습니다. 이제는 두번째인 TopPickItem에 샘플 데이터를 삽입해줘야 합니다. 그런데 지금 상태에서 수정하는 것은 결론적으로 MainMealItem에서만 적용됩니다. 다음인 TopPickItem에서 수정하기 위해서는 다음과 같은 과정을 거쳐야 합니다.

우선 MainMealItem을 선택한 상태에서 Properties를 봅니다. 그럼 중간에 Appearance가 있습니다.

초기에 Visible이라고 되어 있는 부분을 Collapsed라고 바꿔주시면 옆의 디자인 뷰 화면이 Top Pick으로 변하는 것도 보실 수 있습니다.

역시 TopPicksPanoItem에도 아까와 같은 과정을 거쳐서 샘플 데이터를 삽입해줍니다.

다만 유의해야 할 점이 있다면 Rating은 String으로 입력해줘야 하기에 기존에 Boolean이라고 되어 있는 항목을 다음과 같이 String이라고 바꿔줘야 합니다.

 이전에는 Sample Data를 블랜드내에서 삽입하는 과정을 다뤘었는데 이제 다루는 것은 xaml상에서 Data를 삽입하는 겁니다.
 

프로젝트창에서 TopPicks 부분으로 들어가면 TopPicks.xaml이라는 파일이 있습니다. 여기로 들어가면..
처음에는 오류가 뜹니다. 말은 즉 코드는 디자인 뷰로 볼수 없다는 이야기인데 여기서 마우스가 가리키는 XAML 이라고 된 부분을 눌러줍니다.

 
그러면 현란한 코드가 눈에 보일겁니다. 대충 감은 잡히시겠지만 

NameRecipe에는 만들 음식의 이름, NumberRating에는 그걸 본 횟수가 들어가겠지요. 예제랑 똑같이 하면
됩니다. 참고로 첨부되어 있는 파일을 복사해서 붙여넣어줘도 됩니다.

그러면

이렇게 되겠지요. 자 이제 저장하고 다시 Data창으로 넘어옵니다. 그러고 아까 와 똑같이 TopPicks라는 데이터를 TopPicksPanoitem아래에 있는 grid 밑에 드래그해서 넣어주면 역시 샘플데이터가 생성됩니다.

 신기한건 아까 xaml상에 바꿔줬던 Data가 그대로 화면상에 뜬다는 겁니다. 역시 Autosize-fill을 통해서 화면에 가득차게 만든후 테두리를 없애주는 과정을 거칩니다.

 글자가 작기 때문에 아까 앞에서 말한대로 Item Template를 수정하는 과정을 수행합니다. 방법은 다들 아시겠지요.
우선 아까와는 다르게 먼저 StackPanel을 선택한후 들어갈 공간을 미리 키워놓습니다.

그리고 한가지 과정을 또 거쳐야 합니다.

StackPanel을 선택한후 우클릭하면 여러가지가 드는데 여기서 Change LayoutType를 통해서 Canvas로 바꿔줘야 합니다. 이 과정을 거치지 않는다면 TextBlock이 StackPanel안에서만 움직이는 것을 보실겁니다. 틀에 제한을 두지 않으려면 반드시 이 과정을 거쳐야 합니다.

자 이제 폰트 사이즈도 늘리고 배치도 자유롭게 해줍니다.

참고로 제목에 두꺼운 효과를 주려면

위와 같은 항목을 눌러서 활성화시키면 됩니다.

이제 해야 될것은 Rating옆에 별 그림을 삽입해야 합니다. 그런데 애초에 첨부된 파일이 잘못되어서 아마 원본과 같이 Rating이라는 항목을 검색하면 아마 아무것도 안뜰겁니다.

다음과 같이 해줍니다.

System.Windows.Controls.Input.Toolkit.dll

위 파일을 다운로드 받고 다시 블랜드로 들어가서 project창으로 들어갑니다. 중간에 아마 Reference라는 폴더가 있을겁니다. 
 그중에 System.Windows.Controls.Input.toolkit이란 항목이 있으면 지우고 없으면 

위와 같은 항목을 통해서 다운로드 받은 파일을 선택해줍니다. 이렇게 해야 Assets항목에 Rating을 검색하면 
별이 포함된 Rating 항목이 활성화됩니다.

위와 같은 과정을 마친후 Assets에서 Rating을 겁색하면 Rating이란 항목이 있습니다.
이 것을 더블클릭해주면 Canvas 아래에 Rating이란 항목이 추가되면서 디자인뷰에도 무언가가 생성됩니다.

 
그런데 배경이 흰색으로 된거 같으니 역시 Properties에서 배경색을 투명하게 바꿔줍니다.

 
Rating의 크기도 알맞게 수정해줍니다.
이렇게 수정해주는 이유는 후에 삽입할 RatingItem이 이 Rating속에 들어가게 하기 위해서입니다.

물론 그냥 RatingItem을 바로 삽입해도 별은 생깁니다만.. 연속해서 생성할때 계속 같은 위치에 생성되는 불편함이 존재합니다. 위와 같이 사전에 Rating을 수정해주어야 이안에 쏙 들어갑니다.
이제 RatingItem을 더블클릭해서 Rating밑에 포함되는 것을 확인합니다.
 

결과물은 다음과 같이 

 
됩니다.

어떤가요? 여기까지가 두번째 튜토리얼의 내용이었습니다. 이번 내용에서는 샘플 데이터를 삽입하고 ItemTemplate를 통해서 그안에 위치를 수정하는 것까지 확인하였습니다.