Создание приложения для Windows Phone 7 от начала до конца. Часть 6. Поддержка альбомной ориентации, использование элементов управления

Предыдущая часть

В этой части вы узнаете:

• Как реализовать поддержку портретной и альбомной ориентации.
• Какие элементы управления доступны и как выбрать правильный.
• Как выбрать между элементами управления Panorama и Pivot.
• Как использовать элементы управления для ввода текста.
• Как обрабатывать события элементов управления.

Поддержка портретной и альбомной ориентации

Портретная ориентация является стандартной для Windows Phone приложений. Для того, чтобы реализовать поддержку альбомной ориентации, вам придётся написать дополнительный код. Чтобы указать, что приложение поддерживает как портретную, так и альбомную ориентацию, вы должны установить свойство SupportedOrientations в значение PortraitOrLandscape либо в XAML, либо в коде. Затем вы должны убедиться, что содержимое страниц вашего приложения отображается правильно в альбомной ориентации.

Рекомендация по проектированию интерфейса:
Если приложение поддерживает ввод текста, вы должны поддерживать альбомную ориентацию из-за возможности существования аппаратной клавиатуры.

Существуют различные способы гарантировать правильное отображение содержимого как в портретной, так и в альбомной ориентации. Два основных метода — это прокрутка (scrolling) и сетка (grid layout). Эти методы могут использоваться отдельно или в сочетании друг с другом.

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

Поддержка портретной и альбомной ориентации с помощью прокрутки

1. Измените свойство страницы SupportedOrientations на PortraitOrLandscape.
2. Замените стандартный Grid на ScrollViewer и StackPanel.

Второй метод — сетка — позволяет разместить элементы пользовательского интерфейса в элементе управления Grid. При необходимости, когда происходит изменение ориентации, вы программно (programmatically) перемещаете элементы в другие ячейки сетки.

Поддержка портретной и альбомной ориентации с помощью сетки

1. Измените свойство страницы SupportedOrientations на PortraitOrLandscape .
2. Используйте Grid в качестве панели для содержимого.
3. Если необходимо, создайте обработчика события OrientationChanged и добавьте код, чтобы переместить элементы в Grid.

Приложение Fuel Tracker использует сетку, но также использует элементы управления ScrollViewer для того, чтобы гарантировать, что все элементы в списке могут быть просмотрены пользователем. Разметка достаточно проста, так что нет необходимости вносить изменения, связанные с обработкой события OrientationChanged. На следующем изображении показано поведение приложения при смене ориентации на странице информации об автомобиле.



Элементы управления в приложении используются для отображения данных и позволяют пользователю взаимодействовать с приложением.

Выбор элементов управления

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



Следующая таблица предоставит вам некоторое руководство, какой элемент управления вы должны использовать в зависимости от требований к приложению. В таблице приведены элементы управления Silverlight (такие как Button и TextBox), а также элементы управления, созданные специально для Windows Phone (например, Panorama и Pivot). Существуют и другие элементы управления доступные в Silverlight for Windows Phone Toolkit.

Требование к приложению	Элемент управления
Навигация	PhoneApplicationFrame PhoneApplicationPage ApplicationBarIconButton ApplicationBarMenuItem HyperlinkButton
Разметка	Border Canvas ContentControl Grid Panorama Pivot StackPanel ScrollViewer VirtualizingStackPanel
Отображение текста	TextBlock
Ввод текста	TextBox PasswordBox
Отбражение списка элементов	ListBox
Кнопки	Button HyperlinkButton
Элемент управления для выбора из списка	CheckBox RadioButton Slider ComboBox*
Отображение изображений	Image
Работа с картами	Bing Maps
Отображение видео	MediaElement
Отображение HTML	WebBrowser
Прогресс	ProgressBar
Всплывающие сообщения	Popup

*Не стилизован под дизайн Metro, но может быть использован, если будет оформлен надлежащим образом.

Совет по улучшению производительности:
Если вы используете элемент управления ProgressBar в неопределенном режиме (indeterminate mode), это может повлиять на производительность приложения. Если вам необходим indeterminate progress bar, рассмотрите вариант создания собственного элемента управления.

Совет по улучшению производительности:
При использовании ресурсоемких элементов управления (таких как Bing Maps или видео) и в случае, если вашему приложению не хватает памяти, вы можете вызвать метод DeviceExtendedProperties.GetValue для мониторинга использования памяти.

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

Выбор между элементами управления Panorama и Pivot

В Windows Phone есть два специальных элемента управления, которые эффективно расширяют область разметки. Элементы управления Panorama и Pivot предоставляют возможность горизонтальной навигации по содержимому страницы, что позволяет пользователю по мере необходимости бегло пролистывать и масштабировать содержимое. Элемент управления Panorama создаёт панорамный вид на элементы. Элемент управления Pivot предоставляет простой способ управлять представлениями больших наборов данных в приложении. Элемент управления Pivot может быть использован как навигационный интерфейс для фильтрации больших наборов или для переключения между представлениями.

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

Рекомендации по проектированию для элементов управления Panorama и Pivot:

• Используйте элементы Panorama в качестве отправной точки для более подробной информации.
• Используйте элемент управления Pivot для фильтрации больших объемов данных, предоставляя возможность просмотра нескольких наборов данных или способ переключения между различными режимами отображения одних и тех же данных.
• Не используйте элемент управления Pivot для задач навигации, таких как в мастере настройки (wizard).
• Вертикальная прокрутка списка или сетки в секциях Panorama приемлемо, пока она находится в пределах границ секции и не параллельна горизонтальной прокрутке.
• Никогда не помещайте элемент управления Pivot внутри другого элемента управления Pivot.
• Никогда не помещайте элемент управления Pivot внутри элемента управления Panorama.
• Вы должны свести к минимуму количество содержащих Pivot страниц в вашем приложении.
• Элемент управления Pivot должен использоваться только для отображения элементов или данных подобного типа.
• Вы не должны использовать кнопки панели приложения для навигации в элементе управления Pivot. Если Pivot требует навигационных средств, вы, вероятно, используете его не по назначению.

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

При добавлении элементов управления для ввода текста в приложение вы должны оставить пространство для экранной клавиатуры, которая также называется программной панелью ввода (SIP — soft input panel). Вы должны убедиться, что клавиатура не скрывает кнопки или другие элементы управления навигацией. Один из способов предотвратить такое поведение — разместить элементы навигации в панели приложения.

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

Клавиатура	Раскладка
TelephoneNumber	Раскладка с 12 цифровыми клавишами
Text	Стандартная раскладка с такими функциями, как автокоррекция и подсказка текста (text suggestion)

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

Рекомендация по проектированию интерфейса:
Если приложение поддерживает ввод текста, вы должны поддерживать альбомную ориентацию из-за возможности существования аппаратной клавиатуры.

Обработка событий элементов управления

Событие жеста происходит, когда пользователь взаимодействует с экраном, например, нажимая или проводя пальцем по нему. Обработка жестов автоматически включена во все элементы пользовательского интерфейса и перобразует все жесты в стандартные события. Например, элемент управления Button содержит событие Click (нажатие), которое возникает, когда кнопка нажата. Вы создаете метод, называемый обработчиком события (event handler) для обработки события (to handle the event). Вы можете создать обработчик события в окне Properties или в XAML-коде.

Вы можете создать обработчик события с помощью вкладки Events окна Properties. В окне Properties перечислены все события, доступные для выбранного элемента управления. На следующем изображении приведены некоторые события для Button.



Чтобы создать обработчик события с именем по умолчанию, вы можете просто дважды щелкнуть имя события в окне Properties. Cоздаётся обработчик события и в редакторе кода откроется code-behind файл. В следующем фрагменте кода показан обработчик события Click элемента управления Button.

1. private void PhotoButton_Click(object sender, RoutedEventArgs e)
2. {
3.  
4. }

* This source code was highlighted with Source Code Highlighter.

Вы также можете создать обработчик события в XAML. В режиме редактирования XAML введите название события, которое вы хотите обрабатывать. Когда вы начинаете печатать в режиме редактирования XAML, появляется окно IntelliSense. На следующем изображении показано, как определить событие Click в XAML-коде.



Как только вы определили событие, вы можете указать имя обработчика события или дважды щелкнуть <New Event Handler> в появившемся окне IntelliSense. На следующем изображении показано окно IntelliSense, которое появляется, чтобы помочь вам создать новый обработчик события.



Следующий фрагмент XAML-кода привязывает событие Click элемента управления Button к обработчику события PhotoButton_Click.

1. <Button Grid.Row="2" Grid.ColumnSpan="2"
2.         Content="choose picture" Click="PhotoButton_Click"
3.         HorizontalAlignment="Center" VerticalAlignment="Center"/>

* This source code was highlighted with Source Code Highlighter.

Следующая часть