Вчера мы говорили про изолированное хранилище, и то, как приложения могут сохранять данные на телефоне c Windows Phone 7. Сегодня мы рассмотрим намного менее системную тему, а именно работу с элементом управления «Panorama» .

Элемент управления Panorama.

Если Вы смотрели презентации, посвящённые Windows Phone 7, Вы точно видели, как работает элемент управления Panorama. Он применяется очень часто, взять хотя бы те же хабы.

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

Другой пример, но без наведённого телефона:

Отлично, теперь мы знаем, что Panorama является крутым элементом управления. А значит, теперь поговорим, как использовать его в своих приложениях.

Проект приложения «Panorama Application».

В предыдущих 15 статьях серии каждый проект начинался с самого простого шаблона «Windows Phone Application». Для приложений, использующих панораму, Вы можете применить шаблон проекта «Windows Phone Panorama Application». Конечно, если Вам этого хочется. Панорама представляет собой просто элемент управления, поэтому её можно использовать в любом проекте Windows Phone 7 приложения, и не важно, какой шаблон использовался.

Если Вы забыли, какие проекты доступны, вот их список:

Важно отметить, что шаблон «Windows Phone Panorama Application» использует для построения интерфейса паттерн проектирования MVVM (Model-View-ViewModel) , что даёт нам хороший пример при разработке приложений.

Но для лучшего понимания работы с элементом управления, давайте теперь посмотрим, как с нуля добавить панораму на страницу (шаблон «Windows Phone Panorama Application» мы использовать НЕ будем).

Добавляем Panorama на Toolbox

Панорама не отображается в списке стандартных элементов управления в Toolbox. Поэтому, для добавления панорамы можно выполнить ряд действий руками (например, определить XML пространство имён в XAML коде), а можно один раз добавить панораму на Toolbox, чтобы потом её достаточно было просто перетащить нужную страницу.

Для этого в контекстном меню вкладки «Windows Phone controls» на Toolbox выберите пункт «Choose Items…»

В открывшимся диалоге на вкладке «Windows Phone Components» отметьте элемент управления Panorama (завтра мы будем говорить про элемент управления Pivot, так что сейчас можете добавить и его).

После нажатия кнопки «OK» нужные нам элементы управления появятся на Toolbox.

Добавляем элемент управления Panorama на страницу.

После того, как мы добавили панораму на Tooolbox, сделав, тем самым, себе жизнь легче, пришло время использовать данный элемент управления. Удалите всё содержимое страницы, на которую будет добавляться панорама (внутри тега «Grid» с именем «LayoutRoot»).

Перетащите панораму на страницу. После этого Вы увидите в XAML коде нечто похожее:

Не густо. Также можно заметить, что на странице добавлено XML пространство имён:

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

Установка фона и заголовка.

Одной из классных «фич» панорамы является возможность иметь одно большое изображение в фоне, которое прокручивается медленнее, чем остальной контент. Для реальных приложений найдите классное изображение, которое отражает суть Вашего приложения. Далее я подобрал фоновое изображение для приложения, которое будет использоваться, чтобы скоротать время во время ожидания еды в ресторане (данное здание, это Corner Grill в Bowling Green).

Для установки данного изображения как фона панорамы, я вначале добавил изображение в проект, а потом для свойства «Background» панорамы задал кисть «ImageBrush», которая использует наше изображение. Кроме того я задал прозрачность (Opacity) для кисти равной 0.5. Это сделано для того, чтобы белый текст лучше читался на данном весьма светлом изображении.

Кроме того я задал заголовок для панорамы – «waiter» (тот, кто ожидает кого-л. или что-л.).
Вот как теперь выглядит приложение:

Замечательно! У нас есть фон. Теперь пора добавить то, ради чего приложение, собственно, и создаётся – контент.

Создаём PanoramaItem (секцию панорамы).

Сейчас наше приложение работает не очень хорошо. Оно не прокручивается и не показывает ничего кроме фона и заголовка. Добавляя PanoramaItem мы создаём индивидуальные секции панорамы, а уже в PanoramaItem можно добавить XAML разметку, представляющую конкретную секцию.

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

Далее я добавлю три секции и задам заголовок для каждой из них. Скриншоты каждой секции представлены ниже после кода.

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

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

Добавляем контент в PanoramaItem.

Конечно, не обязательно, но я бы рекомендовал начать создание секции с добавления ListBox`а. Это даст Вам возможность прокручивать элементы по вертикали. Есть много способов размещать элементы в секции, но ListBox часто оказывается наиболее удобным (кроме того использовать связывание данных в случае ListBox`а очень просто. Прочитайте, что об этом пишет Scott Guthrie).

В моём примере будут элементы, описывающие пять игр, которые, пользователь может запустить, чтобы скоротать время (естественно сейчас самих игр нет, но Вы можете их написать, чтобы потом продавать получившееся приложение в Marketplace). Я создал некоторый XAML код для описания каждой игры и поместил его в ListBox. Далее приведен код получившейся секции «play» и скриншот того, как данная секция выглядит в эмуляторе.

Пример кода.

Пример кода показывает в работе всё, о чём мы говорили в данной статье. Скачайте его и попробуйте панораму в действии!

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