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

10월 28일 포스코 센터 5층 Drive Room 에서 어김없이 Windows Phone 7 App Camp가 실시되었습니다.

지난 15일에는 앱을 개발하는 디자이너를 대상으로 Expression Blend 4에 대한 수업을 진행되었었고,

이번 시간에는 기존에 앱을 개발해본 적이 있는 개발자를 대상으로 Visual Studio 2010을 기반으로 한 코딩과 Expression
 
Blend 4에 대한 세미나가 진행되었습니다. 참석하지 않으신 분들을 위해서 강의내용을 그대로 따라가보고자 합니다.


우선 Visual Studio 2010 상에서 New project을 선택해 주시고
silverlight for windows phone 이란 섹션 상의 Windows phone application을 선택합니다.
이름은 원하는 대로 쓰시면 되지만 오늘은 기초를 다지는 수업이었기에 Hello world라고 합니다.
(silverlight for windows phone 이란 부분이 없으면 이는 Windows Phone 7 SDK가 정상적으로 안깔린 것이기에
 이부분은 확인하고 넘어가셔야 할 듯 합니다.)

이번에 하고자 한 것은 간단한 문자를 넣은 후, 버튼을 클릭하면 밑에 출력이 되게끔 하고 거기에 대한 에니메이션을 주는 것입니다. 첫번째 포스팅에서는 VS상에서 코딩하는 방법을 언급하겠습니다.

우선 프로젝트가 생성되면 기본적인 폰 화면과 xaml이라고 칭하는 코딩이 되어 있습니다.보여지는 코딩은 MainPage에 대한 전반적인 내용을 다루고 있습니다. 여기서 수정하는대로 옆의 폰에서는 그대로 결과가 출력되게 됩니다.

딱 처음 보기에는 코딩으로 무엇을 짜야 할까하는 막막함이 들기도 합니다만, 이 프로젝트에선 간단하게 코드를 생성할 수 잇는 툴박스를 제공합니다.

표시되고 있는 것처럼 툴박스를 view 메뉴에서 선택해도 되고 화면 제일 좌측을 보시면 Toolbox가 hide되어 있는 걸 확인할 수 있습니다. 이걸 실행하게 되면 다음과 같이 뜨게 됩니다.

해당 기능을 쓰고 싶다 하시면 이 툴박스에 있는 기능을 드래그해서 옆에 보이는 폰에 드롭하시면 됩니다.
일일이 코딩을 해도 되지만, 코딩 작성상 시간이 걸리는 편도 있고, 무엇보다도 이 기능을 사용하면 직접적으로
기능의 위치를 지정할 수 있기 때문에 개발자 입장에서는 이런식으로 기능을 삽입하는 것도 편리하다고 생각합니다.
일단 필요한 기능을 적절히 삽입해보겠습니다.

 우선 오늘 실습에서 쓰였던 기능은 textbox, Button, textblock이었습니다. 지금 그림이 작아서 확인이 잘 안되지만
삽입을 하면서 MainPage.xaml 속의 ContentPanel안에 새롭게 Textbox, Button, TextBlock 이 새롭게 정의되어 있는 것을
확인 할 수 있습니다.

그런데 보시면 TextBlock안의 Font가 지정해준 크기에 비해서 작다는 걸 확인할 수 있습니다. 물론 코딩으로도 이 사이즈를 조절 할 수 있지만 단순히 마우스 클릭만으로도 이를 수정할 수 있습니다. Textblock에 마우스를 올려서 우클릭하면 하단에 Properties라는 항목이 있습니다. 이를 누르시면 새로운 창이 활성화 됩니다.

여기서 TextBlock에 관한 특성을 설정할 수 있습니다. 일단 Fontsize가 작기 때문에 그 항목을 수정해주면 다음과 같이 변경되는 것을 확인할 수 있습니다.

이런 식으로 다른 항목에 대해서도 적절히 수정을 가해줄 수 있습니다.이를테면 글자들을 가운데 정렬하게 한다던지 말입니다.
 xaml도 적절하게 바꿔줍니다.
저 같은 경우는 Button내의 이름을 Click Me!!로 바꾸고 각각의 정의를 바꿔줬습니다.

 

자 이제 xaml상에서 다룰 내용을 다했습니다. 이제는 조금 어렵지만 C#의 내용을 삽입해줘야 합니다.
해야 할 일은 button을 누르면 Textbox의 내용을 TextBlock으로 내리고 싶은데 어떻게 하는게 좋을까요?
역시 마우스로 button을 더블 클릭하시면 해결됩니다. 해결하면 다음과 같은 결과가 나옵니다.

앞에서 언급을 하지 않았지만 MainPage.xaml의 하위에는 .cs라는 c#코드가 내재되어 있습니다. 더블클릭을 함으로써
아까 지정해준 이름_Click이라는 private 함수가 생성되었습니다. 짧은 코드하나 삽입하면 됩니다.

간단히 주석을 달자면 자기가 지정해준 이름의 Text를 그대로 받아서 가져오겠다는 겁니다.
여기까지가 Visual Studio 상에서 해주는 일의 전부입니다.
결과는 다음과 같습니다.

 

참 디버깅시에도 약간의 팁이 있습니다. 에뮬레이터로 글자를 입력해야 될 때 일일이 클릭해야 될듯한데
키보드 입력값을 그대로 넣을 수가 있습니다. 이때는 쓰고 있는 키보드상에서 Pause/Break 키를 누르시면
바로 매핑되는 것을 확인할 수 있습니다.

다음 포스팅에서는 Expression Blend 4에서 에니메이션을 삽입하는 것에 대해서 알아보겠습니다.