안녕하세요? 두번째 시간입니다.
저번 강좌에서는 어떻게 기획하고 구성해야 하는지 알아봤는데요.
이번 시간에는 다음 강좌를 진행하겠습니다.
2. 블렌드에서 윈도우 폰 레이아웃 잡기
3. 화면 디자인 및 컨트롤 디자인 하기
4. (필요 시) 애니메이션 제작하기
5. 윈도우 폰의 시작 타일 및 페이지 전환 etc...
저번주에 블렌드 프로그램 여는 것까지 작업을 하였으니 바로 블렌드 작업을 하겠습니다.
1. 저번 시간에 Window phone Application 기본 화면으로 프로젝트를 생성하였습니다.
위의 두개의 타이틀을 속성(Properties) 패널에서 수정해보겠습니다. 오브젝트 및 타임라인 패널(Objects and Timeline)에서
해당 레이어를 클릭합니다. 그리고 우측에서 Title 속성을 수정합니다.
2. 이번에는 애플리케이션의 타이틀을 수정합니다. 위와 같이 해당 레이어 클릭 후 수정합니다.
3. 배경색을 수정해보겠습니다. [LayoutRoot] 레이어를 클릭 후 Background를 원하는 색으로 설정할 수 있습니다.
필자는 다음과 같은 색으로 지정 후, [Alpha]값을 100%로 설정하였습니다.
4. 또는 뒤의 배경을 이미지로 제작하신 분이 계실텐데요. 프로젝트에서 우 클릭 > 기존 파일 추가를 클릭합니다.
이미지 경로를 따라가서 선택 후 확인을 클릭하면 이미지를 가지고 올 수 있습니다.
5. 가져 온 이미지를 배경으로 지정하기 위해 배경색으로 지정했던 [LayoutRoot] 레이어를 클릭 후,
타일 브러쉬 선택 > 이미지 소스의 콤보박스를 클릭, 가져온 이미지의 네임을 선택합니다.
6. 여기까지는 전체 배경을 설정해 보았습니다. 이제는 컨텐츠 그리드 레이어에서 컨텐츠를 생성해 보도록 하겠습니다.
기획 시에 그리드 Row:3 / Column:3으로 구성하겠다는 머릿속의 기획을 실천할 차례입니다.
[ContentPanel] 그리드는 컨텐트를 넣을 수 있는 공간입니다. 이 그리드를 선택 후, 우측 속성에서 layout의 화살표를 클릭 후
[ColumnDefinition]의 우측 버튼을 클릭합니다.
7. 우측 속성에서 ColumnDefinition과 RowDefinition을 설정합니다. 우측의 박스모양을 클릭하면 팝업이 뜹니다.
팝업에서 [Add another item] 버튼을 세번 눌러 Row와 Column을 생성합니다.
그리드에 대해 좀 더 알고 싶으시다면 다음 링크에서 확인 할 수 있습니다.
링크 : 그리드란?
8. 위의 작업을 끝내면 다음과 같이 자물쇠가 각각 행과 열에 3개 씩 있는 모습을 볼 수 있습니다.
좌측 버튼 컨트롤을 클릭하여 그리드 하위에는 각 칸마다 하나씩 넣어주도록 합니다.
9. 버튼을 각 칸에 넣고 난 후 버튼을 전부 선택 후, 좌우 정렬과 마진, 사이즈를 다음과 같이 리셋합니다.
10. 다음은 하단에 큰 버튼을 넣기 위해 [RowDefinition]을 다시 클릭 후, Row 행을 한 줄 더 추가합니다.
11. 그리고 버튼 컨트롤을 두 개 추가 합니다. 이 두 객체를 같이 선택 후 우 클릭 > 그룹 > 스택패널(Stack Panel)로 묶어 줍니다.
12. Orientation을 Horizontal로 설정 후, 높이 값을 100, 가운데 정렬로 설정합니다.
13. 어느정도 비슷한 느낌으로 레이아웃의 구성이 그려졌습니다.
버튼이나 아직까지 디자인 한 모양과 비슷하지는 않지만 구성은 거의 일치하게 만들었습니다.
다음 강좌에는 이 컨트롤들을 어떻게 디자인하는지 알아보도록 하겠습니다.
