본문 바로가기
Programming/Windows Phone

익스프레션 블렌드에서 Hello Windows Phone 커스텀 버튼 만들기

by 강철 벼룩 2011. 1. 10.


대개 실버라이트 컨트롤은 템플릿을 사용해 시각적 모양과 로직을 분리한다. ControlTemplate은 컨트롤의 시각적 구조와 동작을 지정한다. 기본 ControlTemplate 설정을 수정해 컨트롤의 모양을 조정할 수 있다. 이것을 사용하면 컨트롤의 기능을 변경하지 않고도 모양을 변경할 수 있다. 예를 들면 애플리케이션에서 버튼을 기본 사각형 모양이 아니라 모서리를 둥글게 처리할 수 있지만, 이 버튼은 여전히 Click 이벤트를 일으킨다.

이번 시간에는 익스프레션 블렌드에서 이전에 작업한 비주얼 스튜디오 프로젝트를 열어서 버튼의 ControlTemplate을 대체해 룩앤필을 수정한다. XAML에서 ControlTemplate을 생성하기 때문에 코드를 작성할 필요 없이 컨트롤의 모양을 변경할 수 있다. (이번 실습은 앞서 주인장이 쓴 글을 따라왔다는 전제하에 이어진다.)

1. [시작]|[모든 프로그램]|[Microsoft Visual Studio 2010 Express for Windows Phone]에서 윈도우 폰용 비주얼 스튜디오 2010 익스프레스를 시작한다.

2. 앞서의 Hello Phone 프로젝트를 잘 따라왔다면, 랩의 Source 폴더에서 HelloPhone\Ex2-WP7AppUXDesignWithBlend\Begin에 있는 Begin.sln을 연다.

3. 비주얼 스튜디오에서 [솔루션 탐색기]에 있는 MainPage.xaml을 오른 클릭하고나서, [Open in Expression Blend]를 선택한다. 보안 위험 경고가 표시되면, [Yes]를 클릭해 닫는다.

[그림 43] 익스프레션 블렌드로 솔루션 열기



4. 익스프레션 블렌드에서 MainPage.xaml이 디자이너 창에서 열렸는지 그리고 현재 워크스페이스가 [Design]으로 설정되었는지를 확인한다. 현재 워크스페이스를 보려면 [Windows] 메뉴에서 [Workspaces]를 선택하고 [Design] 옵션이 체크되었는지 확인한다.

[그림 44] 익스프레션 블렌드에서 현재 워크스페이스 선택하기



익스프레션 블렌드의 워크스페이스는 모든 시각적 인터페이스 요소로 구성된다. 여기에는 아트보드와 각종 패널, 도구 패널, 워크스페이스 구성, 저작 뷰, 메뉴가 포함된다.


5. 디자이너 창에서, "Click Me" 버튼을 오른 클릭한 뒤, 메뉴에서 [Object]|[Edit Template]|[Create Empty]를 선택한다.

6. [Create ControlTemplate Resource] 대화 상자에서 [Name]을 "FancyButton"으로 설정하고 [Define in]옵션의 "This document"를  현재 값으로 유지하고 [OK]를 클릭한다.

[그림 45] 해당 버튼에 대한 빈 컨트롤 템플릿을 생성한다



Resources는 정의된 객체와 값을 공통으로 재사용하는 간단한 방법을 제공한다. 컨트롤 템플릿과 스타일, 브러시, 컬러, 애니메이션 등의 공통 항목에 대한 정의를 만들고 리소스 사전에 저장할 수 있다. 리소스 사전은 XAML과 코드 둘 다에서 사용할 수 있는 핵심 개체의 사전이다. 애플리케이션 구조에서 다른 범위에서 리소스 사전을 만들 수 있고 페이지 수준에서 리소스를 정의하거나 애플리케이션 리소스로 정의할 수 있다.

위에 보인 대화상자는 전역 Application 범위에서 컨트롤 템플릿을 정의하는 옵션을 제공하는데, 이 옵션의 경우는 App.xaml에 저장되어 있고 애플리케이션의 다른 페이지에서 이 템플릿을 재사용할 수 있으며, 그렇지 않고 This document에서 저장하도록 하면 동일한 페이지 내에서만 리소스를 사용할 수 있다.


7. [Objects and Timeline] 패널이 보이지 않으면, [Window]|[Objects and Timeline]을 선택해 이 패널을 표시한다. 만일 기본 상태로 워크스페이스를 재설정하고 싶은 경우는 [Window]|[Reset Current Workspace]를 선택한다.

새로운 템플릿을 만들때, 익스프레션 블렌드는 새로운 템플릿을 보고 편집할 수 있는 모드로 들어간다. [Objects and Timeline] 패널에서 새로운 요소 트리의 루트에 있는 [Template]은 편집중인 현재 범위를 가리킨다.

8. 현재 템플릿의 루트 레이아웃 컨테이너를 변경하자. [Objects and Timeline] 패널에서, [Template]내의 자식 [Grid] 요소를 오른 클릭하고 [Change Layout Type]|[Border]를 선택한다.

[그림 46] 템플릿의 루트 레이아웃 컨테이너를 변경한다.


ControlTemplate을 만들때, FrameworkElement 개체를 결합해 하나의 컨트롤을 만든다. ControlTemplate은 루트 요소로서 하나의 FrameworkElement만 가져야 한다. 루트 요소는 보통 다른 FrameworkElement 개체들을 포함한다. 개체의 조합을 통해 컨트롤의 시각적 구조를 만든다.


9. [Objects and Timeline] 패널에서 [Borde] 요소가 선택된 상태에서 [Properties] 패널로 전환하고 [Appearance] 아래에서 [BorderThickness] 속성의 값을 각각 2로 설정한뒤 CornerRadius 속성의 값을 15로 설정한다.

[그림 47] 테두리 요소의 모양을 구성한다


10. 이제 [Brushes] 섹션에서 [Background] 속성을 선택하고 [Gradient brush] 옵션을 사용한다. 왼쪽 그라데이션 중지점을 클릭해  옅은 회색으로 값을 설정한다(예를 들면 #FFADADAD). 다음으로 오른쪽 그라데이션 중지점을 선택하고 값을 진한 회색으로 설정한다(예를 들면 #FF0A0A0A).

[그림 48] 버튼 배경색에 대해 그라데이션 브러시를 구성한다



11. [Brushes] 섹션에서, [BorderBrush] 속성을 선택하고 [Solid color brush]를 클릭하고 연한 회색(예를 들면, #FFC0C0C0)을 선택한다.

[그림 49] 버튼 테두리에 대한 단색 브러시 구성

12. 버튼에 대한 배경을 만들었다면, 다음 단계는 캡션을 추가하는 것이다. 먼저 [Objects and Timeline] 패널에서 Border 요소가 선택되어있는지 확인한다.
 
13. 다음으로 [Assets] 패널로 전환하고 [Controls] 범주를 선택한 뒤, 범주의 오른쪽에 표시된 스크롤을 내려서 TextBlock 컨트롤을 찾는다. 그 뒤 목록에서 해당 항목을 더블 클릭해 이 컨트롤의 인스턴스를 템플릿의 Border 요소내에 삽입한다.

[그림 50] 도구상자에서 TextBlock 컨트롤을 삽입한다

[그림 51] Border 요소내에 중첩된 새로운 TextBlock을 보여주는 [Objects and Timeline] 패널

14. 이제 [Tools] 패널에서 [Selection] 도구를 선택하거나 [V]를 눌러 선택 모드로 돌아 간다.

TextBlock을 삽입한 후, 디자이너는 삽입 모드를 유지하고 이 모드를 빠져나가기 전까지는 다른 TextBlock 요소를 계속추가할 수 있다.

 
15. [Objects and Timeline] 패널에서 새로 추가한 TextBlock 요소를 선택한다. 그 다음 [Properties] 패널에서 [Brushes] 범주를 확장하고 Foreground 브러시를 밝은 색(예를 들면, #FFFFFFFF)으로 설정한다.

[그림 52] 버튼의 전경색 설정



16. 다음으로 Layout 범주를 확장하고 HorizontalAlignment과 VerticalAlignment의 값을 가운데로 설정한다. 그 다음 [Margin] 속성의 값을 왼쪽과 오른쪽에 대해서는 10으로, 위쪽과 아래쪽의 경우는 4로 설정한다.

[그림 53] 캡션의 여백과 정렬 속성 구성



17. 템플릿에서 TextBlock 컨트롤의 Text 속성을 버튼 템플릿 컨트롤의 Content 속성과 연결한다. 이를 위해서는 다음의 작업을 수행한다.

  • [Common Properties] 범주를 확장한다.
  • [Advanced property options]를 클릭한다. 속성의 값 옆에 있는 작은 사각형 아이콘이다.
  • [Template Binding]을 선택해 이 속성에 바인딩할 템플릿 컨트롤의 속성 목록을 표시한다.
  • 이 목록에서 Content 속성을 선택한다.

 Text 속성의 값을 "Click Me"로 변경한다. 이 값은 버튼의 현재 Content 속성을 설정한다. 이 속성을 바인딩하고 나면 아이콘의 모양이 노란색으로 바뀐다.

[그림 54] 템플릿의 Text 속성을 바인딩한다.

18. [CTRL + S]를 눌러 파일을 저장한다.
이제 새로운 커스텀 버튼을 시험할 준비가 되었다. Expression Blend for Windows Phone을 사용해 실제 폰 장치나 에뮬레이터에서 윈도우 폰 애플리케이션을 실행할 수 있다. Device 패널 (Window 메뉴)을 열어보면, 애플리케이션을 미리보기할 대상을 선택할 수 있다. 익스프레션 블렌드에서 기본 값은 윈도우 폰 에뮬레이터다.

[그림 55] 애플리케이션을 실행해볼 대상 설정

19. [F5]를 눌러 애플리케이션을 빌드하고 실행한다. 약간의 텍스트를 입력하고 버튼을 클릭해보자.

[그림 56] 익스프레션 블렌드에서 애플리케이션 실행