이번 시간에 해 볼 내용은 동적으로 컨트를들을 생성하는 작업입니다.




모두 이렇게 아무것도 없는 상태로 프로젝트를 만들어 주시기 바랍니다.
지금부터 아무 것도 없는 화면에서 동적으로 컨트롤들을 생성해서 배치할 것입니다.
즉, 애플리케이션 실행 중에 컨트롤을 만들 것입니다.

가장 단순한 것이 버튼 컨트롤일 것입니다.
동적으로 버튼 컨트롤을 생성하기 위해서는 당연한 얘기지만,
폰 페이지가 생성되는 시점에 컨트롤을 만들어주는 코드를 추가해 주면 됩니다.
*.cs 파일을 열어서 다음과 같이 내용을 추가해 줍니다.




이들은 블렌드 툴에서 컨트롤 속성을 설정하는 부분을,
프로그램 소스 상에서 속성을 제어하는 부분입니다.
속성 정보는 중에 제가 현재 이벤트를 연결한 부분이 있습니다.
pStartCtrl.Click += OnStartButtonClick 와 pEndCtrl.Click += OnEndButtonClick 부분입니다.
이벤트도 코드 상에서 이렇게 연결해 줄 수 있습니다.


현재 예제에서는 간단히 메시지 박스를 출력하는 것은 마무리 했습니다.
대부분의 컨트롤들은 위의 방법과 같이 동적으로 생성해 줄 수 있습니다.
여기까지가 예제 샘플 작업의 끝입니다.^^






그런데 한가지 생소한 부분이 있을 것이라 생각을 합니다.
바로 ContentPanel.Children.Add( XXX ) 부분입니다.
어딘가에 현재 우리가 생성한 컨트롤들을 추가해주고 있습니다.
과연 이 패널은 무엇일까요?

프로그램 작성을 마치고, 다시 디자인 폼 수정 화면으로 돌아옵니다.



위의 화면을 확인해 보실 수 있겠죠?
앞에서 언급한 낯선 이름이 보입니다.
'ContentPanel' 보이시죠?

여기에 버튼을 하나 만들어 봅니다.
이번에는 소스 코드 레벨이 아니라, 디자인 폼 상에서 버튼을 바로 배치해 봅니다.




디자인 폼 상에서 버튼을 배치시키면,
바로 ContentPanel 의 하위 계층에 추가되어지는 것을 확인할 수 있습니다.
즉, 앞선 언급했던 ContentPanel.Children.Add( XXX ) 소스 코드는 바로
이 작업을 해준 것입니다.

조금 더 정확히 얘기하자면,
윈도우폰7의 레이아웃은 크게 TitlePanel과 ContentPanel 로 나눠져 있습니다.
그래서 이들 패널에 컨트롤을 추가했던 것입니다.

패널( Panel )이 무엇인지 모르시겠다구요?
패널은 이후의 시간에 언급될 기회가 있을 것입니다만,
지금은 단순히 컨트롤들을 그룹화 시켜서
자동으로 관리시켜주는 것 정도로 생각하시면 될 것입니다.^^


샘플 파일 첨부해드립니다..^^



얼마전 윈도우 폰 개발 툴 베타 버전( Windows Phone Developer Tools Beta )이 배포되기 시작했습니다.


http://www.microsoft.com/downloads/details.aspx?FamilyID=c8496c2a-54d9-4b11-9491-a1bfaf32f2e3&displaylang=en


이번 개발 툴 버전의 가장 큰 특징 중 하나는
'Microsoft Expression Blend for Windows Phone Beta'의 포함입니다.
지난 버전까지는 별도의 애드인 작업을 거쳐야 했는데, 이번 버전부터는 포함되어 있습니다.

윈도우폰7 개발에 많은 관심이 있으신 분들 중에는
Expression Blend( 이하 블렌드 ) 라는 소프트웨어에 대해서 굉장히 생소할 수 있습니다.
이 소프트웨어는 마이크로소프트에서 개발되었으며,
실버라이트나 WPF 와 같은 마이크로소프트 플랫폼에서 손쉬운 그래픽 디자인을 위해서 탄생했습니다.
처음 공개적으로 배포된 것이 2007년 1월이니, 정말 최신 소프트웨어라고 할 수 있습니다.
( 현재는 4.0까지 출시되었으며, 이것이 2010년 6월의 일입니다. )

알려진 바와 같이 윈도우폰7 개발 방법은 크게 2가지로 나누어져 있습니다.
실버라이트를 기반으로 한 일반 애플리케이션 분야와
XNA 를 기반으로 한 게임 분야입니다.



아주 불행하게도 XNA와 블렌드는 연동되지 않습니다.
( 이것은 블렌드를 조금이라도 아는 분들이라면, 정말 불행한 일이라고 생각하실 것입니다. )

무슨 말이 더 필요하겠습니까?
지금 당장 윈도우폰 개발 베타 버전을 설치하신 후에 Visual Studio가 아닌,
Microsoft Expression Blend for Windows Phone Beta 실행하시기 바랍니다.




아마 위와 같은 화면이 실행되어졌을 것입니다.
실행 후에는 이 블렌드를 통해서 윈도우폰7 프로젝트를 생성합니다.







적당한 경로에 자신이 원하는 프로젝트 명칭으로 설정해주면 됩니다.
그리고 OK를 클릭하면, 프로젝트가 생성됩니다.




기존의 디자인툴에 익숙하신 분들이라면, 친숙한 모습일 것입니다.
블렌드는 사실 기능이 너무 많습니다.
개인적인 생각이지만, 포토샵 + 플래시 + 드림위버 같은 느낌이였습니다.
여러분들은 어떠신가요? ^^

그러면 코딩은 어디서 해야 할까요?
의구심이 드시겠죠? ^^
실제 코딩은 블렌드 내부에서도 가능하고, Visual Stduio를 별도로 띄워서도 가능합니다.
이것이 제가 Visual Studio 가 아닌, 블렌드를 실행시키라는 진정한 의미입니다.
즉, 개발과 그래픽 디자인이 모두 하나의 툴에서 이루어지는 것입니다.

'Projects' 탭에서 아래 그림처럼 해보시기 바랍니다.
트리 메뉴에서 MainPage.xaml.cs 에서 마우스 오른쪽을 누르시면 됩니다.



위와 같이 실행하면, 별도로 Visual Studio가 실행됩니다.
물론 Visual Studio에서 수정하면, 즉시 블렌드쪽에 결과가 반영이 됩니다.

*.cs 파일을 더블 클릭하면, 블렌드 상에서 바로 수정할 수 있는 창이 실행됩니다. ( 완전 좋다는.... )
*.xaml 파일을 더블 클릭하면, 다시 디자인 폼 수정 상태로 이동할 수 있습니다.



실행은 다음과 같이 수행합니다.








이번 베타버전에서는 빌드 성능도 꽤 많이 좋아졌습니다.
에뮬레이터 모양도 굉장히 예뻐졌습니다..^^




이번 시간에는 간단하게 페이지 간의 전환을 해보려고 합니다.
그러기 위해서는 최소 2개 이상의 페이지가 존재해야 합니다.
그래서 첫 작업은 페이지를 추가하는 작업입니다.
역시나 이번에도 VisualStudio가 아닌, 블렌드를 실행합니다.

그리고 프로젝트에서 아래 그림과 같이 새로운 아이템을 추가합니다.








이렇게 하면 새로운 페이지가 추가되어져 있을 것입니다.
그리고 첫번째 페이지에 간단히 버튼을 추가합니다.
버튼은 Asset 패널에 컨트롤 메뉴에 있습니다.
버튼을 배치하면, 각종 속성을 제어할 수 있도록 화면 우측에 여러 윈도우가 활성화 되는 것을 볼 수 있습니다.





버튼만 화면에 있으니깐 너무 단순한 것 같아, 이미지를 화면에 배치시키겠습니다.
이미지를 위해서 프로젝트 내부에 폴더를 만듭니다.



그렇게 폴더가 만들어진 후에는 'Add Existing Item...' 메뉴를 통해서 이미지를 추가합니다.



이 때, 이미지 파일 어느 곳에 있든 상관이 없습니다.
왜냐하면, 현재 작업중이 프로젝트로 이미지 파일을 새롭게 복사를 해오기 때문입니다.
현재 작업 중인 프로젝트를 열어서 확인해 보시기 바랍니다.
이미지 파일이 자동적으로 생성되어서 복사되었음을 확인할 수 있을 것입니다.

이제 이미지를 배치해 보겠습니다.
이미지 역시 컨트롤이기 때문에 Assets 탭에서 Image 컨트롤을 선택해서 적당히 배치하시기 바랍니다.
같은 방법으로 두번째 페이지에도 추가해 주시면, 결과 확인이 쉽겠죠? ^^



이미지의 경우에는 컨트롤만 연결되었지, 아무런 변화가 없을 것입니다.
즉, 이미지 리소스를 연결해 주어야 합니다.
아래 그림처럼 현재 연결 가능한 리소스 리스트에서 하나를 선택해서 연결해 주시면 됩니다.




각 페이지마다 이미지가 잘 등장했으리라 예상이 됩니다.

혹시나 컨트롤이 잘 선택이 안되어지는 경우에는 아래와 같은 패널을 이용하시기 바랍니다.
이 패널은 컨트롤을 가장 확실하게 선택할 수 있습니다..^^





이제는 속성 창에 대한 설명을 뒤로 한채 간단하게 저 버튼들에 이벤트를 연결해 보겠습니다.
아래 그림에서 빨간색 타원 영역이 보이십니까?
그 영역에서 번개 모양의 아이콘을 클릭하면 이벤트를 연결할 수 있습니다.
버튼이 선택되어진 상태에서 해야, 버튼에 관련한 이벤트를 연결할 수 있습니다.





번개 모양의 아이콘을 클릭하면 다음과 같은 이벤트 속성 창이 등장합니다.



저는 Click 속성에 Next 를 입력한 후에 엔터키를 쳤습니다.
그러면 Next 라는 이벤트용 함수가 만들어 집니다.
각각의 상황을 모두 제어하고 싶다면,
바로 이렇게 이벤트 속성에서 함수명을 입력하고 제어하면 되는 것입니다.
아래와 같이 친절하게 함수를 만들어 줍니다.^^




페이지 전환을 위해서 저는 아래와 같이 코드를 추가했습니다.



두번째 페이지에서도 동일한 방법으로 페이지 파일명만 교체해서 추가해 주었습니다.
제가 만든 결과는 다음과 같습니다.^^



버튼을 클릭할 때마다, 페이지 이동이 발생합니다.^^
실행 프로젝트는 첨부를 하니, 참고해 주시기 바랍니다.^^
이번 시간에 Uri가 무엇인지, NavigationService 가 무엇인지 등 코드에 대한 설명하지 않습니다.^^
실제 코드 개발 관련 내용은 다른 분들이 다루어 주실 것입니다.