Silverlight를 이용한 WP7 개발 - 방향잡기


기본적으로 Hello Phone까지 하시면 이제 방향 잡기에 대한 언급을 드리고자 합니다.
우선 mainPage.xaml에서 위에서 조금 내려오다 보면 이런 맥락들이 있습니다.

이 부분은 이 프로젝트를 구성하는 silverlight의 표준 네임스페이스를 나열한 창들입니다. 찾다보면 App.xaml 부분과 유사하다는 것을 발견할 수 있을 겁니다. 여기서 전반적으로 폰에 쓰이는 시스템을 정의해둔 것이라고 보면 될거 같습니다. 일단 방향을 자유롭게 전환, 즉 가로보기와 세로보기가 자유롭게 전환되기 위해서는 SupportedOrientations 부분을 수정해주어야 합니다. 아마 Default는 Portrait로 되어 있을 겁니다. 지금 위의 화면은 가로보기와 세로보기를 동시에 지원하기 위해서 코드를 수정해주었습니다. 간단히 표현하면

 Portrait - 세로모드
 Landscape - 가로모드

라고 정의되지요.

자 그럼 이제 content grid속에 여러개의 셀을 넣어보겠습니다. 다음과 같이 content panel을 수정해주세요.

뭔 코드가 이렇게 길까 싶지만 cut & paste 하시면 금방 짜실거라고 봅니다. 그럼 다음과 같은 결과가 나오는 걸 확인할 수 있습니다.

물론 지금은 디버깅을 하고 있지 않아서 Portrait 모드로 나온거지만 디버깅해보고 Landscape로 전환시켜도 비슷한 결과가 나오겠지요 이게 다 SupportedOrientation을 설정해줬기 때문에 가능한 일입니다.

일단 지금은 vertical 과 horizontal alignment만 지정해줬지만 실제로는 또 정의를 해야될게 있습니다. 바로 Margin(여백)입니다. 다음과 같이 테스트해봅니다.

지금 변화를 준 것은 Top-Left 파트에 Margin을 100픽셀로 준것입니다.
정확한 정의에 의하면 Margin 속성은 Thickness를 조절하는 특성으로 여기에서는 Left,Top, Right, Bottom을 정의할 수 있습니다.
위와 같이 사용하면 네변 모두 100픽셀의 여유를 준다는 의미이고
두개만 사용할 수 있습니다. 그때 앞의 숫자는 좌우의 여백, 뒤의 숫자는 위아래의 여백을 나타내지요. 이렇게 여백을 조절할수 있습니다. 그런데 주의해야 할 점은 여백이 너무 크면 다른 문자열과 overlap되는 현상이 발생할 수 있습니다. silverlight 자체에서 그걸 판별하는 내용이 없기 때문에 텍스트가 겹치더라도 정해놓은 여백값은 그대로 유지가 됩니다.
또다른 여백을 표현하는 기법으로 Padding이라는 속성도 있답니다. 패딩이라는 뜻에서 의미하듯 이건 안의 여백을 표현해줍니다. 바깥 여백을 조절하는건 앞에서 언급한 Margin이 되겠습니다.

또하나 TextBlock을 결정지어주는 요소도 있습니다. 바로 Width와 Height인데 이는 말 그대로 TextBlock의 높이와 폭을 결정지어줍니다. 물론 이것처럼,

코드를 쓸수있지만 그냥 옆의 폰에서 크기를 직접적으로 조절해줘도 같은 효과를 나타냅니다. 물론 정확한 크기를 요구하는 작업에서는 위의 것처럼 코딩하는게 더 나을수도 있겠지요. 이밖에도 ActualWidth나 ActualHeight같이 실제 길이를 알려주는 속성도 있습니다만..

이제는 사이즈 변화를 위한 이벤트 핸들러를 삽입해보겠습니다. 일단 다음과 같이 짭니다.

새롭게 삽입한 것은 SizeChanged라는 겁니다. ContentPanel_SizeChanged 라는 이벤트 핸들러를 새롭게 넣었습니다. 사실 Sizechanged라고만 치면 visual studio는 똑똑하게도 새롭게 이벤트 핸들러를 만들거냐고 물어봅니다. 거기서 선택하면 이름으로 지정되는것이 바로 저 이름이지요. 그런데 이렇게 하면 좋은 점이 또 있습니다. 그건 MainPage 하위에 있는 .cs 파일에서 확인할 수 있지요.

바로 다음과 같이 새로운 private 함수가 자동으로 생성된 겁니다. 사실은 책의 저자 찰스 페졸드씨는 .cs 내부에서 함수를 다르게 정의할 수도 있기 때문에 이렇게 자동으로 생성해주는 방식을 선호하지는 않는다고 언급을 했습니다. 그래서 private라는 단어도 빼고 여러가지를 수정한다는데 예제에서는 그냥 이용한다고 되어 있군요.
자 이제 이벤트 핸들러에서 다루는 내용을 코딩으로 짜보겠습니다. 조금 기네요.

실질상으로 이 이벤트가 말하고자 하는건 각 page나 panel의 실제 크기와 폭을 보여주고
이를 rootvisual 속성을 가진 frame으로 반환하겠다는 겁니다. 물론 저도 보고 치는 중이라 정확히 이해는 못하겠지만 앞에서 언급한 ActualWidth와 ActualHeight이 쓰인 것을 확인했습니다. 책에 나온 바에 따르면 이 속성들은 폰상에서 실제 크기와 폭을 나타내주되 하나의 element로 형성되고 나서 알려주는 거라고 합니다. 말이 어려우니까 실제로 디버깅을 해보겠습니다.

아참! 디버깅시 폰상에 위에 작게나마 여백이 있는게 보이시나요? 이건 현재 폰의 상태를 알려주는 system tray부분입니다. 사실 윈폰을 접해보신분은 가끔 와이파이가 잡혔다던가 이벤트를 알려줄때 이 시스템 상태줄이 활성화되는 걸 확인할 수 있을텐데요. 이 작은 글씨들을 표현하는데도 픽셀이 점유되고 있습니다. 우리는 일단 아무것도 없는 상태에서의 actualWidth와 Height를 알고 싶기 때문에 이 부분을 없애주는게 좋을 듯합니다. 없애려면 MainPage.xaml상의 root부분에서 system tray부분을 이렇게

False로 만들어주면 사라지게 됩니다. 디버깅 결과는 다음과 같습니다.

이게 실질적으로 폰에서 구현할수 있는 기본적인 틀의 크기라고 정의할수 있겠네요.

그런데 이밖에도 보기 모드를 변경하려고 할경우 앞에서 언급한 SupportedOrientation을 변경하는 거 외에도 다른 방법도 있습니다.가령 좌우로 돌렸을때 페이지의 레이아웃을 변경시키려면 어떻게 해야 될까요? 이같은 경우에는 책에서 PhoneApplicationFrame과 PhoneApplicationPage에서 모두 OrientationChanged를 제공해야 한다고 합니다.

새로운 프로젝트를 만든후 다음과 같이 ContentPanel에 삽입해보세요.

 그런후 MainPage.xaml.cs내부에도 다음과 같이 코드를 삽입해봅니다.

저 같은 경우는 프로젝트 이름을 silverlightOrientationDisplat로 했고 그안에 세부적으로 더 삽입했습니다. 그럼 결과가 어떻게 되어 있을까요?
 

분명 지금 MainPage.xaml상에서는 Orientation이 Portrait으로 되어 있는데 디버깅 결과는 Portrait된 상태에서 Landscape가 적용된 모습이 됩니다. 좀 이상하네요. 그럼 SupportedOrientation을 PortraitOrLandscape로 바꿔보겠습니다.

아 이제 정상적으로 나오네요. 모드변경이 가능하게끔 하니까 사용자가 폰방향을 어느쪽으로 놓느냐에 따라서 txtblk가 변하는 것을 확인할수 있습니다. 이렇게 화면 전환을 할 수 있습니다.
여기까지가 silverlight를 활용한 화면 전환이었습니다. 다음포스팅은 xna상에서의 화면전환에 대해서 다뤄보겠습니다!