Expression Blend for Windows Phone - Hello World(1)

 

 Expression Blend for Windows Phone- Hello World(1)

앞에서 VS 2010을 통한 Windows Phone에 대한 내용을 알아보았는데 여기서는
Expression Blend 4 for Windows Phone에서 Windows Phone Application Project 에 애니메이션 등을 추가하는 내용에 대한 부분을 알아봅니다. 본 내용은 Windows Phone 7 Training Kit의 내용을 참조했습니다.

VS 2010의 솔루션 탐색기에서 MainPage.xaml을 오른쪽 클릭하여 Expression Blend에서 열기를 클릭합니다.

 

  그럼 동일한 프로젝트를 VS 2010과 Expression Blend 4 에서 동시에 열게 됩니다.

  

Object and Timeline 에서 ClickMeButton을 오른쪽 클릭하여 Edit Template에서  “Create Empty” 를 선택합니다

  

ControlTemplate Resource 생성 창에서는 이름을 FancyButton으로 지정하고 OK 를 선택합니다. 

  

Object and Timeline의 Grid를 오른쪽 클릭해서 Border 컨트롤로 변경합니다. 

  

Border 컨트롤을 선택하고 오른쪽 속성 창에서 아래와 같이 속성 값을 설정합니다.

  

Brush 속성에서는 Gradient Brush를 선택하고 왼쪽의 값은 #FFADADAD, 오른쪽의 값은 #FF0A0A0A 로 지정합니다. 

  

BorderBrush 속성은 #FFC0C0C0로 지정합니다. 

  

Asset 탭에서 ContentPresenter를 검색해서 더블클릭하고 컨트롤을 추가합니다. 

  

ContentPresenter 컨트롤을 선택하고 오른쪽 속성창에서 중앙 정렬을 선택해서 Center에 표시되게 되게 합니다. 

  

프로젝트를 저장하고 빌드해서 실행해보면 아래와 같이 커스텀 버튼이 나타나는 것을 알 수 있습니다. 

 

Expression Blend를 통해 손쉽게 레이아웃과 색상, 속성 등을 수정할 수 있다는 것을 알아보았습니다. 내용이 길어 다음 내용에서 상태와 애니메이션에 대한 내용을 알아보도록 하겠습니다.