45 дней с Windows Phone 7. День #4. Ориентация экрана.

Вчера мы говорили об аппаратной кнопке «Назад», которая присутствует на каждом телефоне под управлением 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, чтобы получить текущую ориентацию экрана и телефона соответственно. В более же сложных случаях можно программно получить доступ к акселерометру, чтобы точнее понимать положение телефона в пространстве.

Пример кода.

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

Автор Jeff Blankenburg
Перевод и доработка Сергей Пугачёв