Вчера мы обсуждали системную тему и то, как можно связать цвета в своём приложении с цветами системной темы. В этом нам очень сильно помог Expression Blend. Сегодня мы поговорим об ещё одной возможности телефона, и снова Expression Blend поможет серьёзно упростить разработку. Я имею в виду такую концепцию, как панель приложения (Application Bar).

Панель приложения в Windows Phone 7 состоит из нескольких круглых иконок-кнопок в нижней части приложения. Максимальное количество кнопок – четыре. Больше разместить на панели приложения не получится. Меньше можно. Кроме того в правом верхнем углу панели приложения отображаются три точки, нажав на которые можно раскрыть панель. В этом случае появятся подписи к кнопкам и текстовые пункты меню.

Вот пример того, как панель выглядит в реальном приложении:

В примере выше Вы можете найти четыре кнопки, с которыми будет работать пользователь: Play, Best Times, Badges, и Help. Нажатие на любую из них отправит пользователя на другую страницу. Так как добавить панель в своё приложение?

Создание панели приложения.

Если Вы создали новый проект Windows Phone 7 Silverlight приложения в Visual Studio, то Вы можете найти на странице MainPage.xaml закоментированный код, добавляющий панель приложения. Вот как он выглядит:

Кроме того на странице уже подключены необходимые пространства имён:

После добавления панели приложения, можно заметить, что Visual Studio уменьшила свойство DesignHeight страницы на 72 пикселя – высоту панели. Если Вы хотите сделать область, доступную для контента Вашего приложения, больше, подумайте о том, чтобы скрыть системный трей (SystemTray).

Системный трей.

В дизайнере можно увидеть, что вверху Вашего приложения отображается системная информация телефона: уровень сигнала, заряд батареи и.т.д. Эта информация важна для пользователя, поэтому скрывать её следует только при необходимости. Место, где данная информация отображается, называется системным треем. Он занимает 32 пикселя по высоте. Для скрытия трея установите у страницы значение свойства SystemTray.IsVisible в «False»:

Добавление кнопок на панель приложения.

Если посмотреть на код, генерируемы Visual Studio для панели приложения, то можно заметить, что картинок appbar_button1.png и appbar_button2.png в проекте нет. Запустив приложение, мы увидим две одинаковые иконки в виде крестиков, показывающие, что заданные картинки не найдены. Но мы можем нарисовать нужные иконки, либо же скачать их где-нибудь в интернете и вставить в наше приложение. Так? Конечно, можем, но запустить Expression Blend значительно проще. Откройте проект приложения в Expression Blend и в окне «Objects and Timeline» найдите нужную кнопку(ApplicationBarIconButton).

Когда Вы выделите данную кнопку на панели «Properties» Вы можете легко задать иконку для кнопки и подпись. Вот как это выглядит:

Раскройте список IconUri и Вы увидите иконки, предлагаемые по умолчанию. Данные иконки подходят для очень многих приложений. Так что часто Вам не придётся рисовать свои иконки или искать где-то другие. Если Вы пока не видели всего разнообразия стандартных иконок, то вот они:

Почему только светлые иконки?

Вам не требуется заботиться о том, как иконки будут выглядеть в другой теме. Иконки, сделанные по гайдлайнам, будут выглядеть хорошо всегда. Команда Windows Phone позаботилась об этом. Требуется создать только одну версию иконки. Если пользователь выбирает светлую тему, то белая иконка автоматически становится чёрной.

Обработка нажатия.

Обработать нажатие на любую иконку очень просто, достаточно подписаться на событие «Click».

Текстовые пункты меню.

Нажав на три точки в верхнем правом углу панели приложения, Вы можете увидеть текстовые пункты меню. В примере из Visual Studio у нас будет два пункта «MenuItem 1» и «MenuItem 2». Они работают точно также, как и иконки, но их может быть больше и список текстовых пунктов меню поддерживает прокрутку. В примере ниже есть два текстовых пункта меню: «shrink» и «grow».

Если Вы хотите, чтобы панель приложения была полупрозрачной, установите для неё свойство «Opacity».

Создание панели приложения в Expression Blend.

Если Вы создаёте Windows Phone Silverlight приложение с нуля в Expression Blend, то никакой закомментированной заготовки для панели приложения на странице MainPage.xaml Вы не найдёте. Чтобы добавить меню в этой ситуации выберите в окне «Objects and Timeline» страницу (самый верхний элемент) и в контекстом меню выберите пункт «Add Application Bar».

Теперь для добавления иконок и текстовых пунктов меню можно в контекстом меню элемента ApplicationBar выбрать пункты «Add Application BarIcon» и «Add ApplicationBarMenuItem» соответственно.

Пример кода.

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