Блог Сергея Пугачёва

<< День #3. Аппаратная кнопка «Назад» | День #5. Системная тема >>

Это четвёртая статья серии «45 дней с Windows Phone 7».

Вчера мы говорили об аппаратной кнопке «Назад», которая присутствует на каждом телефоне под управлением Windows Phone 7. Сегодня же мы поговорим об ориентации экрана – ещё одном важном аспекте разработки приложений для телефона, сильно завязанном на аппаратные возможности.

Портретная и ландшафтная ориентации экрана.

Пользователи держат телефоны по-разному. При этом в зависимости от того, как они его держат, может меняться ориентация экрана. Вертикальная ориентация, когда высота экрана больше его ширины, является портретной (Portrait). Ландшафтная ориентация (Landscape) – это когда телефон повёрнут и ширина экрана больше его высоты. Вы можете создавать приложения, работающие при любой ориентации экрана, но по умолчанию Windows Phone 7 Silverlight приложения запускаются в портретной ориентации. При этом игры, написанные на XNA, запускаются в ландшафтной ориентации (считается, что игры выглядят лучше на широком экране). В данной статье мы сосредоточимся на Silverlight приложениях и рассмотрим ситуацию, когда ориентация экрана меняется в процессе работы приложения.

Главная страница по умолчанию работает только в портретном режиме

После создания нового проекта Windows Phone Silverlight приложения в XAML коде страницы MainPage.xaml можно найти следующий отрывок:

SupportedOrientations="Portrait" Orientation="Portrait"

Это значит, что страница декларирует поддержку только портретной ориентации, в которой, собственно, и работает. Свойство SupportedOrientations может принимать одно из следующих значений:

• Portrait (по умолчанию)
• Landscape
• PortraitOrLandscape

Данные значения интуитивно понятны.

Свойство Orientation определяет, в какой ориентации страница запускается. Если Вы хотите, чтобы страница запускалась в ландшафтном режиме, не забудьте добавить этот режим в список поддерживаемых. Свойство Orientation может принимать следующие значения:

• Landscape
• LandscapeLeft (телефон опрокинут на левый бок)
• LandscapeRight (телефон опрокинут на правый бок)
• Portrait
• PortraitDown (нормальная вертикальная позиция)
• PortraitUp (телефон перевёрнут)

Из списка видно, что можно задать не только портретную или ландшафтную ориентацию, но и то, в какую сторону будет повёрнут телефон при той или иной ориентации. Это позволяет очень четко указать с какой ориентацией будет запускаться страница.

Изменение ориентации экрана

Если установить свойство SupportedOrientations в значение PortraitOrLandscape, то при повороте телефона ориентация экрана будет меняться. На эмуляторе Вы можете нажать соответствующие кнопки для смены ориентации. Но во многих случаях Ваши приложения могут не вписаться в размеры экрана при смене его ориентации. Для того чтобы Ваши приложения всегда выглядели хорошо давайте обработаем смену ориентации экрана.

Допустим, мы пишем приложение-калькулятор. В ландшафтной ориентации многие кнопки не видны за границей экрана.

Интересным решением может оказаться скрытие заголовка приложения при ландшафтной ориентации. Можно было бы также изменить размер и расположение кнопок. Однако целью данной статьи является показать, как обрабатывать смену ориентации экрана, а не что при такой смене следует делать.

Скачайте пример к данной статье, и в C# коде страницы MainPage найдите следующие строки:

public MainPage()
{
	InitializeComponent();
	this.OrientationChanged +=
           new EventHandler(MainPage_OrientationChanged);
}

void MainPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
{
	if ((e.Orientation == PageOrientation.LandscapeRight)
           ||(e.Orientation == PageOrientation.LandscapeLeft))
	{
		TitlePanel.Visibility = Visibility.Collapsed;
	}
	else if ((e.Orientation == PageOrientation.PortraitDown)
           ||(e.Orientation == PageOrientation.PortraitUp))
	{
		TitlePanel.Visibility = Visibility.Visible;
	}
}

Здесь мы подписываемся на событие смены ориентации экрана (OrientationChanged), и в случае ландшафтной ориентации скрываем заголовок страницы.
В реальных приложениях, возможно, также стоит учитывать различные варианты портретной и ландшафтной ориентации.

Запустим пример и попробуем сменить ориентацию экрана.

В данном примере мы подписываемся на событие OrientationChanged, чтобы получить текущую ориентацию экрана и телефона соответственно. В более же сложных случаях можно программно получить доступ к акселерометру, чтобы точнее понимать положение телефона в пространстве.

Пример кода.

Хотя интерфейс приложения и напоминает калькулятор, калькулятором приложение не является, так как данная функциональность в нём не реализована.