2011.10.28 Windows Phone 7 AppCamp 따라가기 (2) - Hello Phone!

이전 포스팅에 이어서 바로 진행하겠습니다.
지금과 같이 VS 2010상에서 다음과 같이 Expression Blend로 넘어갈 수 있습니다.

이렇게 실행하면 이런 경고가 발생할 수가 있습니다. 물론 Expression Blend를 바로 실행했을때는 경고 메세지가 발생하지 않습니다.

결론은 다른 프로그램을 통해서 실행해서 보안적 문제가 발생한다는 건데 그냥 무시해도 좋을 거 같습니다. 우선 이렇게까지 실행하면 아까 VS에서 실행했던 폰 화면이 그대로 나옵니다.

이번 과정을 통해서 주고자 하는 에니메이션은 다음과 같습니다.

- 문자를 넣고 Click Me!!를 눌렀을 때 TextBlock안의 문자가 뺑글뺑글 도는 것.
- 문자를 넣고 Click Me!!를 눌렀을 때 Button의 색깔이 바뀌는 것.

자 이제 에니메이션을 줘야 합니다. 우선 앞서서 다음과 같은 메뉴를 활성화 시켜줍니다.

이는 에니메이션 설정에 적합하게 화면을 배치하는 기능입니다. 앞에서 언급하지 않았지만 자기 취향의 workspace를 저장해서 그대로 불러올 수 있는 기능도 제공합니다.

해당 창에서 다음과 같이 지정해줍니다.

 

그럼 template를 만들 수 있는데 저는 FancyButton라는 이름으로 현재 프로젝트안에서 사용할 수 있도록 지정합니다.

그러면 기존에 만들었던 Textblock이 사라지고 Templete밑에 Grid란 메뉴가 있을 겁니다. 이 Grid를 없애고 Asset에서 Border를 삽입합니다. 이는 버튼의 테두리를 지정해주는 겁니다. 그리고 Asset에서 Textblock을 끌어서 이 Border 밑에 삽입해줍니다. 정상적이면 다음과 같이 나옵니다.

 

그런데 왜 Textblock을 넣어준 걸까요? 분명 Asset에는 Button이란 항목이 있는데 말이죠.
답은 바로 지금 이걸 수행하고 있는 환경이 바로 Button Templete 상에 있기 때문입니다. 그래서 단순히 Border와 Textblock만으로 디자인만 조정하면 되지 button을 또 넣을 필요는 없는거지요.

자 우선 조금 밋밋하기에 Button을 조금 꾸며보기로 하겠습니다.
 Textblock을 마우스로 클릭해보면  화면 우측창에 Properties가 활성화됩니다. 지난 시간에도 언급했었지만 Properties에선 박스에 관한 디자인을 지정해 줄 수 있습니다. 그중 Brushes 항목을 변경해줍니다.

 

또 border를 살펴보면 다음과 같이 되어 있습니다.

위에 보면 brush아래에 세가지 항목이 있습니다.
- Background : 버튼의 배경 색깔을 변경해줍니다.
- BorderBrush : 버튼의 테두리에 대한 색상을 변경해줍니다.
- Foreground : 버튼 내부의 내용에 대한 색상을 변경해줍니다. (여기에선 button라는 문자겠지요!)

또 밑에 5가지 메뉴를 통해서 다양한 gradation을 줄수 있는데 저는 다음과 같이 했습니다.

 

 

빨리 크리스마스가 왔으면 좋겠네요. 왠지는 모르겠지만..

참 gradation 효과도 주는 창이 있습니다. 위와 같은 메뉴가 있는데 밑의 화살표를 적절히 이동하면 gradation도 변화시킬 수 있습니다.

그런데 좀 이상하게 있습니다. 이전에는 Button안의 내용을 Click Me!!라는 내용인데 지금은 Textblock으로 바뀌어 있습니다. 이는 어떻게 수정해줘야 좋을까요?

답은 다음과 같이 하면 됩니다.

하단부에 보면 Common Properties라는 항목이 있습니다. 여기서 Content 옆의 흰 네모를 누르게 되면 다음과 같은 메뉴가
뜨게 됩니다. 그중 contents라는 항목을 선택해줍니다.

그러면 디자인 파트도 다음과 같이 변하는 걸 확인할 수 있겠지요.

이밖에도 Appearance를 통해서 border의 두께도 변경할 수 있습니다. 이제 에니메이션을 삽입하겠습니다.

우선 지금 Templete에서 벗어나야 합니다. 다음같이 Fancybutton옆의 버튼을 클릭합니다.

그러고 나서 mytextblock에 마우스를 대고 Animation을 삽입합니다. + 버튼을 누르면 창이 바뀌게 됩니다.

 

 

이제 원하는 에니메이션을 삽입하면 됩니다. 아까 언급한 바와 같이 문자가 한바퀴 도는 것을 시도하려면 properties상의 Transform이란 메뉴를 다뤄야 합니다. 지금은 Scale이라는 세번째 항목을 수정하고 있습니다.

 

여기서 첫번째 X에 -1을 삽입합니다.

그리고 timeline을 2로 맞춘후 똑같은 Transform에서 X를 1로 변경합니다. 그럼 timeline이 다음과 같이 변경됩니다.

 

다시한번 정리해보면 1초일때 RenderTransform의 Scale이 X가 -1로 정의되어 있다가 2초일때 1로 변경되는 겁니다.
여기까지가 첫번째 원하고자 하는 에니메이션을 넣은 것입니다. 일단 동작을 확인해야되겠지요.

참 바로 이 모든게 이뤄지지 않습니다. 안타깝게도 c#파트를 한번더 처리해줘야 합니다. Expression Blend에서 모든 과정을 저장한후 VS 2010으로 넘어갑니다. 그러고 나서 MainPage.xaml.cs에 들어갑니다. 분명 아까 그대로라면 Click 함수내부에는

TextBlock.Text = TextBox.Text

란 수식만 삽입되어 있습니다. 여기에 기존의 스토리보드를 삽입해야 합니다.
이걸 구동시키는 함수는 추가적으로 .begin()이라고 삽입해줘야 합니다. 다음과 같이 수정합니다.

자 이제 첫번째 에니메이션을 돌릴 수 있는 조건은 모두 마쳤습니다. 결과는 다음과 같습니다.

여기까지가 VS와 연동한 스토리 보드 동작 방법입니다.

조금 따라오다 보면 복잡한 감도 있지만 그래도 어렵다고는 생각되지 않네요.

조금 길어지는 감이 있으니까 다음 포스팅에서 두번째 효과를 넣는 것을 해보겠습니다.