Использование различных режимов ориентации

Основные теоретические сведения

Существует два варианта ориентации устройства: альбомная (устройство расположено горизонтально) и книжная (устройство расположено вертикально). Телефон может определить ориентацию, и некоторые встроенные приложения правильно обрабатывают изменение ориентации телефона.

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

Указание ориентации в файле MainPage.xaml

Страница может сообщить Silverlight, какую ориентацию она поддерживает. Для этого используются свойства класса PhoneApplicationPage:

SupportedOrientations="Portrait" Orientation="Portrait"

Эти настройки Visual Studio использует по умолчанию при создании страницы. Они указывают на то, что страница использует только портретную ориентацию. В случае необходимости эти настройки можно изменить, чтобы приложение изменяло ориентацию в соответствии с ориентацией телефона:

SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"

Рис. 11.1. Приложение Сумматор в альбомной ориентации

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

<TextBox Height="72" HorizontalAlignment="Left" Margin="8,19,0,0"
    Name="firstNumberTextBox" Text="0" VerticalAlignment="Top" Width="460"
    TextAlignment="Center" />

Этот элемент использует значения отступа от краёв экрана, которые используются для точного указания расположения элементов на экране. При этом, если у элемента указана позиция, которая находится за пределами экрана, то Silverlight просто не будет отображать этот элемент на экране.

Существует два способа исправления подобной ошибки. Один способ заключается в изменении параметров расположения элементов при изменении ориентации телефона.

Событие OrientationChanged

Класс PhoneApplicationPage включает событие OrientationChanged, которое происходит при изменении ориентации страницы. Как и для других событий, для него можно создать метод-обработчик, в который нужно добавить код для обработки изменения ориентации экрана:

private void PhoneApplicationPage_OrientationChanged(object sender,
    OrientationChangedEventArgs e)
{
    if (e.Orientation == PageOrientation.PortraitUp)
    {
        setPortrait();
    }
    else
    {
        setLandscape();
    }
}

Этот код использует параметр, значение которого определяет новую ориентацию, и вызывает соответствующий метод. Методы изменяют значения отступов от краёв элементов, чтобы разместить их подходящим для определённой ориентации образом:

private void setLandscape()
{
    firstNumberTextBox.Margin = new Thickness(8, 19, 0, 0);
    firstNumberTextBox.Width = 207;
    secondNumberTextBox.Margin = new Thickness(252, 19, 0, 0);
    secondNumberTextBox.Width = 207;
    plusTextBlock.Margin = new Thickness(221, 35, 0, 0);
    resultTextBlock.Margin = new Thickness(538, 35, 0, 0);
}

Код метода setPortrait аналогичен методу setLandscape. Элементы располагаются в соответствии со значениями свойства Margin. Отступы от краёв задаются значением свойства Thickness, которое содержит величину отступа и ширину границы. В нашем случае ширина границы установлена в 0, поэтому граница не будет отображаться. После добавления этих методов приложение будет работает в обоих режимах ориентации.

Рис. 11.2. Приложение Сумматор, настроенное под разные режимы ориентации

Часто приложения при изменении ориентации экрана используют анимацию перемещения элементов. Для создания подобных эффектов рекомендуется использовать инструмент Expression Blend.

Использование контейнеров для группировки элементов

Среди элементов Silverlight есть элементы-контейнеры, которые могут содержать другие элементы. Существует несколько различных типов контейнеров, среди которых есть элемент StackPanel.

Элемент StackPanel содержит последовательность элементов Silverlight. Он позволяет располагать вложенные в него элементы в определённом порядке. Элементы в контейнере могут располагаться вертикально (сверху вниз) или горизонтально (слева направо). Вместо того, чтобы настраивать для визуальных элементов отступы от краёв экрана, можно поручить эту работу элементу StackPanel:

<StackPanel>  
    <TextBox InputScope="Digits" Height="72" HorizontalAlignment="Center"
        Name="firstNumberTextBox" VerticalAlignment="Top" Width="460"
        TextAlignment="Center" />
    <TextBlock Height="56" HorizontalAlignment="Center" Name="plusTextBlock" Text="+"
        VerticalAlignment="Top" FontSize="32" Width="25" />
    <TextBox InputScope="Digits" Height="72" HorizontalAlignment="Center"
        Name="secondNumberTextBox" VerticalAlignment="Top" Width="460"
        TextAlignment="Center" />
    <TextBlock Height="46" HorizontalAlignment="Center" Name="resultTextBlock"
        VerticalAlignment="Top" FontSize="30" Width="160" TextAlignment="Center" />
</StackPanel>

Элементы StackPanel решают сами, как будут отображаться элементы на экране. В этом коде лишь указано выравнивание всех элементов по центру выделенной им области.

При таком подходе возникает очень полезный побочный эффект, который заключается в том, что контейнер StackPanel автоматически перестроит элементы при изменении ориентации экрана.

Рис. 11.3. Приложение Сумматор, использующее элемент StackPanel

Элемент StackPanel можно добавить к проекту, перетащив его с панели инструментов Visual Studio в окно дизайнера или вводя текст XAML вручную. Если элемент StackPanel должен группировать элементы горизонтально, нужно указать соответствующий атрибут:

<StackPanel Orientation="Horizontal">

Существуют и другие типы контейнеров. Один из них — элемент Grid. Он позволяет создать прямоугольную сетку из элементов, в каждом из которых может размещаться один или несколько элементов. Также можно совместно использовать разные элементы-контейнеры, что позволит группировать элементы особым образом.

Задание к работе

Windows Phone 7.5 Training Kit: Labs/WindowsPhoneNavigationAndControls/WindowsPhoneNavigationAndControls.html/html/DocSet_fafe516f-c2d3-4c5b-9db2-56dcc688d0ea.html.

Сайт MSDN: http://msdn.microsoft.com/ru-ru/library/ms754152.aspx.

Задание к работе

1. Откройте в Visual Studio созданный в предыдущих работах проект программы для Windows Phone.
2. Добавьте в проект необходимый код для автоматического изменения ориентации приложения при изменении ориентации телефона.
3. Измените код программы так, чтобы при изменении ориентации телефона на альбомную все элементы страницы программы удобно располагались на экране и не выходили за пределы экрана.
4. Запустите программу и проверьте правильность её работы.
5. Измените программу так, чтобы элементы располагались на экране автоматически, используя элементы Grid и StackPanel.
6. Запустите программу и проверьте правильность её работы. Сделайте выводы о том, какой способ расположения элементов на странице удобнее использовать для поддержки вашим приложением различных режимов ориентации.
7. Составьте отчёт о проделанной работе. Включите в отчёт необходимые листинги программы.