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

지난 시간에 이어서 이번에도 예제파일이 있습니다.

WPSketchFlowLesson03.zip

WPSketchFlowLesson03.z01

WPSketchFlowLesson03.z02

물론 원문은  http://www.microsoft.com/design/toolbox/tutorials/using-sketchflow/part3/ 이고 역시 첨부 파일을 다운로드 받을 수 있습니다.

 이번 시간에 할 건 이미지를 삽입하는 방법, Transform을 사용한 개체 변형, 데이터를 삽입하는 곳의 디자인을 변경하는 일을 해보고자 합니다.

우선 압축을 푸시고 Lesson3_Start 관련 프로젝트를 블랜드로 열어주시기 바랍니다.

 지난 시간에 TopPicksPanoItem까지 했으니 이번에는 세번째 페이지인 FavoritePanoItem을 채울 차례입니다.

이제 Data창을 여시면 전에는 삽입하지 않았던 샘플 데이터들이 들어가 있습니다.

 

여기서 우리가 삽입해야 될 데이터는 FavoriteData이므로 그안을 열어보면 있는 개체가 FavRecipeName과 Image로 되어 있습니다. 물론 Name은 string형 Image는 Image형으로 해줘야 하겠지요. 그럼 Image형으로 바꿀때 밑에 Browse란 버튼이 있습니다. 이제 삽입해야 할 그림을 찾아야 합니다.

분명 첨부한 파일을 다 풀어보면 MealImages라는 폴더가 존재합니다. 그 폴더를 선택해주도록 합니다.

 분명 지금 일치하는 항목이 없다고 뜨지만 상관없습니다. 우리는 지금 폴더를 선택하는 것이기 때문에 해당 폴더 안에만 들어와 있으면 됩니다.

 이번엔 FavoriteData에 새로운 샘플 데이터를 삽입해보도록 하겠습니다. 이름은 Time입니다.

 기존 프로젝트 내에서는 샘플 데이터를 프로젝트 위의 버튼을 눌렀지만 Collection내의 항목을 추가하기 위해서는 위 사진에서 가리키는 버튼을 눌러줘야 합니다.

 새로운 개체를 삽입한후 자료형을 Number형으로 지정합니다. Length라고 하는 것은 숫자가 표시될 최고 자리수를 의미합니다. 어차피 시간에서는 60이 최고 숫자이므로 2라고 기본정의되어 있는 값을 그대로 둡니다.

자 이제 저번에 했던 것처럼 XAML을 통한 샘플 데이터를 수정하도록 하겠습니다.
Project창에서 SampleData-FavoriteData.xaml을 선택해줍니다.

역시 디자인뷰로는 코드를 못보니까 XAML 뷰로 바꿔주어야 하겠지요!
보면 값들이 다 정해져 있습니다. 그냥 숫자들을 15, 30,45,60 이란 숫자들로 바꿔봅니다. 물론 그대로 나둬도 상과없습니다만... 일단 값을 수정했으면 저장하고 다시 Main 스크린으로 돌아옵니다.

이제 저번에 했던 것처럼 FavoriteData의 collection을 FavPanoItem밑의 grid까지 드래그 시켜 줍니다.

Autosize-fill 까지 해주고 경계선을 투명하게 해주시면 결과가 다음과 같이 나옵니다.

여기서 일단 저장하고 이제는 WrapList 방식으로 개체를 배열해보고자 합니다.

지금과 같이 수직으로 나열되는 방식이 아닌 그림 크기에 따라 가로로 배열되는 방식을 WrapList방식이라고 합니다.
우선 Item의 Template을 수정해야 되기 때문에 다음으로 들어갑니다.

지금 한 것은 Item의 Layout에 관한 템플릿을 수정하려고 하는 겁니다. 위와 같이 해서 새로 만들고 ItemsPanelTemplate_Wrap 이란 이름을 넣어줍니다.

그럼 Object 창에 딱 StackPanel만 있는 이 항목을 삭제해줍니다.

그후에 Assets에서 Wrap이라고 검색하면 나오는 것을 ItemPanel에 삽입해줍니다.

그럼 위와 같이 WrapList에 관한 패널이 형성됩니다. 혹여나 WrapPanel이 Assets에서 뜨지 않는 분은 사전에 Silverlight Toolkit for Windows Phone  을 설치하지 않으신 분입니다. 첫번째 포스팅으로 돌아가서 해당 툴킷을 까시고 다시 블랜드를 재부팅하시기 바랍니다.

이제 selection(v키를 누르시면 됩니다.)을 누르고 WrapPanel의 크기를 적절하게 수정하면 다음과 같이

한 페이지에 깔끔하게 나옵니다. 이제 Template Edit에서 빠져나오고 저장합니다.

이제는 내부의 글자가 작으니 아이템에 관한 Template을 수정하도록 하겠습니다.

그럼 항목이 3개가 있을텐데 이 개체들의 이동을 자유롭게 하려면 Canvas 타입으로 그룹화해야 합니다.

그리고 StackPanel이라고 되어 있는것을 Change Layout type을 통해서 Border로 변경시켜줍니다.

이렇게 하는 이유는 StackPanel로 하면 규격이 딱 정해져서 안의 개체들이 자유롭게 움직이지 못합니다. 본문에 언급된 바로는 Border 타입이 그런 틀을 깰 수 있는 좋은 수단이라고 합니다. 다만 한 Border안에는 하나의 개체만 들어갈 수있기 때문에 그걸 만족하기 위해선 그룹화를 시켜준 것이지요.
 
이제 Border를 Properties를 통해서 변화를 주겠습니다.
우선 BorderBrush를 검정색으로 바꿔줍고 밑의 BorderThickness를 각각 1로 수정해줍니다.

그럼 디자인뷰의 각 개체에 틀이 생길겁니다. 여기서 조금더 확대해보겠습니다. z 키를 누르고 한 개체를 확대합니다.

이제 이미지를 선택하고 Autosize-Fill을 선택하면

사진이 다 안채워지는 이유는 사진 위아래로 공백이 있기 때문입니다. 이는 Properties내에 CommonProperties를 수정해줘야 합니다. 다음을 UniformToFill을 선택해줍니다.

그럼 위아래 공백없이 그림이 가득차는 것을 확인할 수 있을겁니다.

앞에서 보면 제목이 그림에 가려서 안보였지요? 이를 빼주는 작업을 해줘야 합니다. 

제목에 해당하는 TextBlock을 Image 밑으로 삽입하면 됩니다.

그럼 위와 같이 되는데 이때 selection tool을 이용해서 TextBlock의 틀을 왼쪽으로 몰아넣습니다. 이때 글자는 같이 안 움직입니다. 바로 글자가 NoWrap 상태에 있기 때문입니다. 역시 이를 바꿔줘야 TextBlock의 틀안에 글자가 들어가겠지요.

Properties에 Text항목을 보면 처음에는 크기와 문체만 수정할 수 있지만 밑의 화살표를 펼치면 더 많은 항목이 있습니다. 여기서 맨 밑의 TextWrapping항목을 Wrap으로 바꿔줍니다.

그리고나서 이 개체를 따로 Canvas로 그룹화시킵니다. 그리고 이름을 RecipeName으로 바꿉니다.

이제 제목을 잘 보이게 하기위해서 이 개체의 배경색을 흰색으로 바꿔줍니다. Recipename을 선택한 상태에서Properties의 Background를 흰색으로 바꿔주면됩니다. 그리고 selection tool을 이용해서 크기를 조절하면 다음과같이 만들어집니다.

이제 RecipeName을 선택한 상태에서 SelectionTool로 그림 밑까지 드래그하면 

와 같이 나옵니다. 음 그럼 이제 숫자가 가려지네요. 숫자도 따로 표시해보겠습니다.

좌측의 ToolBox를 꾹누루면 여러 항목이 뜨는데 그중에 Eillipse를 선택합니다.

그리고 Object창에서 Canvas 항목을 선택한 후 디자인 뷰에서 원하는 크기를 드래그합니다.

이렇게 원이 들어가게 되고 Eillipse는 canvas의 하위 개념으로 들어갑니다. 이제 역시 이 원의 Background도 검정으로 바꿔주고 숫자에 해당하는 TextBlock을 이 Eillipse 아래로 드래그해줍니다.

그리고 그 TextBlock의 Properties로 들어가서 Foreground를 흰색으로 바꿔줍니다. 위치까지 적절하게 수정해주면

왠만큼 깔끔하게 보이네요. 이제 너무 따닥따닥 붙은거 같으니까 다시 Resize하는 과정을 거치겠습니다. 물론 지금까지 배운 과정을 응용하셔도 됩니다.

맨위 Border를 선택한 상태에서 Canvas로 그룹화시킵니다. 그리고 그 상태에서 selection tool을 사용해서 canvas의 크기를 조절합니다. 

좀 간격이 늘어났네요. 이제 그 상태에서 properties의 맨 밑에 있는 Transform으로 들어갑니다.
맨처음 창은 Translate 창입니다. 여기서 

원으로 표시된 부분을 누르면 그쪽이 비워집니다. 지금하는 과정은 정확히 Reference point를 잡는 과정입니다. canvas안에 개체를 기준점에 따라 어디로 배치할 것인지를 보여주는 겁니다. 

이제 세번째 탭으로 가면 scale을 조절할 수 있습니다. 각각 1.4로 수정해줍니다.

그럼 결과가 다음과 같이

겹쳐서 나오게 되는데 이때는 canvas를 선택한후 SelectionTool을 이용해서 보기좋게 크기를 수정하면 됩니다.

아마 첫번째 Reference Point가 잘못 잡혀 있다면 사진이 짤리는 현상이 발생할텐데 정확히 잡았다면

와 같은 결과를 얻을 수 있을겁니다. 이제 f5 버튼을 눌러서 테스트를 해보면 됩니다. 물론 이전에 한 결과도 보고 싶으면 사전에 Appearance의 visibility를 Visible로 바꿔줘야 하겠지요?

이번 과정은 toolbox의 세번째 과정으로써 이미지를 입히고 템플릿을 수정하는 방법을 익혀보았습니다!