WP7 개발 기초 - 코드로 이해하는 실버라이트

지난 번 tombstoning을 하다보니까 저도 더 공부해야 될 부분인 거 같아서 잠시 접어두고 기존의 내용대로 실버라이트에 대한 내용을 따라가고자 합니다.

 
참 이 그림만 봐도 실버라이트는 편리합니다. 초기에 프로젝트를 실행하면 MainPage.xaml 파일이 딱 뜨고 개발자는 자신이 원하는 기능을 단순히 디자이너 뷰에 삽입만 하면 됩니다. 이에 해당하는 코드는 알아서 다 짜줍니다.
물론 이를 더 특화시킨 걸로 Expression Blend가 있습니다.다양한 에니메이션도 해당 메뉴만 선택하고 녹화 버튼만 눌러주면 알아서 그 기능을 수행해줍니다.

하지만 프로그래머인이상 조금더 코드쪽 측면을 더 훑어봐야 되겠지요. 간단한 TextBlock을 c#으로 구현하는 것부터 보겠습니다.

 
기존에 이렇게만 하면 딱 화면 ContentPanel안에 해당 문구가 뜨는 건 맨처음에 했던 겁니다. 그런데 이번에 c#을 통해서 구현해보는 건 누르면서 새로운 TextBlock이 랜덤하게 생성되는겁니다.  

우선 MainPage.xaml에서는 TextBlock을 새로운 이름으로 지정합니다. 예제에서는 txtblk로 했습니다.

 
그 후 코드 뷰로 다음과 같이 짜줍니다.

 

우선 동작 화면부터 보여드리겠습니다.

화면을 탭할수록 문구가 랜덤하게 찍히는 것을 확인할 수 있습니다.
 우선 처음에 뜨고 있는 문구는 xaml상에서 띄워놓은 문구입니다. 그러고 나서 새로운 TextBlock에 대한 정의를 동작시에 정의가 된겁니다. 지금은 rand.NextDouble이란 메서드를 사용해서 0~1사이의 난수를 통해 위치를 정해준겁니다.

 애초에 실버라이트로만 정의했다면 위와 같은 기능을 만들 수  있었을까요? xaml이란 파일 자체는 그 때 순간의 화면 출력과 그에 대한 동작을 정의하는 거지 자세한 동작 설명을 언급할 수가 없습니다. 그래서 위와 같이 코드로 정의하는게 필요한 겁니다. Expression Blend에선 위와 같은 동작 구술을 녹화라는 개념을 통해서 코드로 바꿔주는 방식을 구현하고 있습니다만.. 조금 불확실하기에 프로그래머가 정확하게 구현해주는게 좋을 것 같습니다.

c#을 잘하시는 분이라면 위와 같이 메인 class속에 포함된게 아닌 TextBlock로 다시 정의하는 것도 생각해볼 수 있습니다. 간단하게 표현하자면 다음과 같이 되겠지요.

이렇게 하면 newTextBlock은 클래스내에서 어디서나 불러올 수 있고 여기에 포함된 속성으로는 Text,Horizontal(vertical)Alignment, Margin 등이 되겠지요. 결과는 똑같습니다.

이걸 응용한다면 그림을 호출하게 해놓고 화면에 찍는대로 그림도 같이 찍혀 나오는 것도 생각해볼 수 있겠지요.
다음 포스팅에선 xaml상에서 다루는 속성에 대한 이야기를 해보겠습니다.

TapForTextBlock.zip