안녕하세요
또 오랜만에 포스팅을 하네요.
저번 포스트에도 이야기 했듯이 오늘부터
http://charlespetzold.com/phone/
의 pdf의 자료 중 제가 필요하다 생각되는 부분들을 부분부분 포스팅 해볼까 합니다.
물론 전부다 포스팅 할 필요는 없어 보입니다.
저 책의 코딩 방식 마저 하드코딩 위주이기 때문에
툴을 사용하는 사람들을 위한 배려가 조금 결여되어있는 것은 사실입니다.
툴만 사용해서도 가능하다 라는 게 저 책의 내용과 이 포스팅 과의 차이가 되겠습니다.
오늘 포스팅 할 것은
Screen Orientataion
입니다.
한글로 단어를 명확하게 찾기 뭣하군요. 단어 그대로 풀어보자면 “스크린이 놓인 상태”를 이야기 합니다.
눈치 빠르시니 다들 무엇을 이야기 하는지 아셨으리라 봅니다.
윈도우즈 폰 7 을 사용할 때 옆으로 뉘였을 때 그리고 다시 새웠을, 다시 뉘였을 때 등
상태를 제어 하는 방법에 대한 포스팅이 되겠습니다.
자 그럼 하던 대로 따라 해 봅시다.
저는 이렇게 프로젝트를 만듭니다.

디버그로 한번 살펴 보도록 합시다. 요로케~

이 상태가 대게 디폴트 화면입니다. 세로 화면을 Portrait 라고 합니다.
인쇄 쪽 영문 설정 페이지를 보시면 이 단어를 볼 수 있습니다.

아래의 상태인 가로 화면을 Landscape 라고 합니다.

Portrait에서 Landscape로 바꾸었으나
현재 페이지는 페이지의 꼭대기가 기기의 위 끝으로 하는 구성으로 누워 버렸습니다.
이유는 단순합니다. 프로그램의 기본 설정의 Orientation이 Portrait 이기 때문이죠.
MainPage.xaml 파일에 관련 설정이 아래와 같이 보입니다.

SupportedOrentations 가 현재 프로그램이 지원하는 Orientation 값 이며
Orientation 이 현재의 Orientation을 나타내는 값 입니다. 따라서 따로 코딩 하지 않으면 Portrait가 디폴트네요.
이제 이것을 Portrait, Landscape 둘 다 지원하게 설정하겠습니다.

보시다시피 아주 쉽죠. PortraitOrLandscape 값이 우리가 원하는 그 값입니다.
이 설정을 하면 페이지는 해당 모드를 인지하고 항상 위에서 아래로 출력이 됩니다.
동작하는 것은 디버그(F5)로 확인 해 보세요.
예제프로그램으로 Orientation 값을 가져오는 법과 그 데이터를 알아보도록 하겠습니다.
하드코딩이 아닌 디자이너를 통한 방법입니다.
디자이너를 잘 보시면 아래와 같은 아이콘이 보입니다.
이 아이콘이 현재 어플리케이션을 가리키고 있습니다.
마우스 우측버튼을 눌러 Properties를 선택 합시다.

Properties 탭 옆에 Events 탭(번개 아이콘)을 누르면 아래와 같은 화면을 볼 수 있습니다.
PhoneApplicatio… <no name>
이라 되어있습니다. 줄임 말은 늘려도 안보이죠?
저 녀석이 PhoneApplicationPage 입니다.
어떻게 아냐구요? 일단 따라가 봅시다. 그럼 알 밖에 없는 값을 보여드리죠.

빨간 화살표가 Loaded 즉, 해당 어플리케이션이 로딩되었을 때 발생하는 이벤트가 되겠습니다.
파란 화살표가 OrientationChanged 즉, Orientation이 변경되었을 때 발생하는 이벤트가 되겠습니다.
이벤트 메서드 생성은 빈 상자 영역을 더블클릭 하시면 됩니다. 둘 다 하시구요~
물론 저 부분을 하드코딩도 가능하며, 메서드 명을 바꿀 수 있고 그 기능으로,
또한 다른 이름의 동일한 컨트롤들의 중복되는 이벤트를 하나의 메서드로 통합 할 수도 있습니다.
다음에 때가 되거나 필요가 있으면 포스팅 해보도록 하죠 ㅎㅎ
해당 이벤트 메서드가 생성이 되면 비하인드 코드 영역으로 들어가게 됩니다.
그전에 MainPage.xaml을 보세요!

이벤트를 등록하자 마자 PhoneApplicationPage 아래
Loaded="PhoneApplicationPage_Loaded" OrientationChanged="PhoneApplicationPage_OrientationChanged"
이벤트 명에 이벤트 메서드 가 선언이 되었죠?
이러니 PhoneApplicationPage가 아까 그 Property의 명이라고 할 수 밖에 없는 겁니다.
자 그럼 코드를 계속 구성 해 봅시다.
저는 아래와 같이 구성했습니다.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
namespace ScreenOrientation
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
}
#region private void PhoneApplicationPage_Loaded
/// <summary>
/// 어플리케이션 페이지가 로드 되었을 때
/// </summary>
private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{ // 현재의 Oriendataion 을 문자열로 가져와서 so.Text에 할당하여 표출.
so.Text = this.Orientation.ToString();
}
#endregion
#region private void PhoneApplicationPage_OrientationChanged
/// <summary>
/// 어플리케이션의 Orientation이 바뀌었을 때
/// </summary>
private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
{ // 현재의 Oriendataion 을 문자열로 가져와서 so.Text에 할당하여 표출.
so.Text = this.Orientation.ToString();
}
#endregion
}
} |
따로 설명할 것이 없네요. 간단한 코드니까요.
대신 주석으로 하는 행위에 대한 것을 추가 해 놓았습니다.
그럼 디버그로 에뮬레이터에서 확인해 봅시다.

Portrait 상태는 Orientation값으로는 PortraitIUp 이군요.
왼쪽으로 머리가 가게 하면 Orientation값으로는 LandscapeLeft 군요.

오른쪽으로 머리가 가게 하면 Orientation값으로는 LandscapeRight 군요.

에뮬레이터로는 PortraitDown 이 보이지 않습니다.
기기가 없으니 확인해 볼 방법은 없네요.
하지만 PageOrientation 의 값을 살펴보면 존재하는 값임은 확인이 가능합니다.

자 그럼 Screen Orientation 에 대한 것은 이해가 되었으리라 보고 이만 마치겠습니다.