Проекты сводного (pivot) типа

Expression Blend --- Windows Phone 7 --- Проекты сводного (pivot) типа

Еще одна стандартная система навигации, предоставляемая в Windows Phone 7 SDK, называется приложением сводного типа (Windows Phone Pivot Application). Это приложение, по существу, является разновидностью системы вкладок, в которой пользователь может переходить от одного представления информации к другому связанному с ним представлению, выбирая соответствующую вкладку в верхней части экрана мобильного устройства или совершая такие жесты для ввода информации, как, например, панорамирование по горизонтали постукиванием и скольжение пальцем по экрану влево либо вправо или же резкое движение по горизонтали постукиванием и быстрой проводкой пальцем по экрану влево либо вправо.

В соответствии с этой моделью программирования в корневом диспетчере компоновки типа Grid содержится объект типа Pivot, отвечающий за страничную организацию данных, где отдельные страницы представлены объектом типа PivotItem.

Итак, создайте новое приложение по шаблону проекта Windows Phone Pivot Application в диалоговом окне New Project, присвоив ему имя PivotDemoApp. Первоначальное иерархическое представление объектов на панели Objects and Timeline будет выглядеть так, как показано на рисунке:

В объекте типа Grid каждого элемента сводного представления (объекта типа PivotItem) отображаются жестко закодированные данные, как и в рассматривавшемся ранее примере проекта приложения панорамного типа. Таким образом, исходный монтажный стол, соответствующий разметке главной страницы в файле MainPage.xaml будет выглядеть так, как показано на рисунке:

Как и объект типа PanoramaItem, каждый объект типа PivotItem может быть настроен на панели Properties. В частности, настраивая свойство Header этого объекта, вы можете изменить заглавие на вкладке каждой страницы сводного представления. Для этого достаточно выбрать каждый объект типа PivotItem по очереди на панели Objects and Timeline и соответственно установить его свойство Properties. Кроме того, в каждом из объектов подчиненной сетки типа Grid можете удалить элементы управления типа ListBox, чтобы скомпоновать пользовательский интерфейс приложения по своему желанию любыми способами и средствами.

А для того чтобы добавить новый объект типа PivotItem, щелкните правой кнопкой мыши на узле Pivot в иерархическом представлении на панели Objects and Timeline и выберите команду Add PivotItem из всплывающего контекстного меню:

На данной стадии работы над рассматриваемым здесь проектом вы вольны скомпоновать пользовательский интерфейс приложения сводного типа так, как вам заблагорассудится. В качестве примера на рисунке ниже показано простое графическое изображение улыбающегося лица, нарисованное для нового объекта типа pivot инструментами Ellipse и Pen. Отдельные графические элементы были сгруппированы в новый диспетчер компоновки типа Grid, для чего достаточно нажать клавишу <Shift>, щелкнуть кнопкой мыши на каждом графическом элементе непосредственно на монтажном и выбрать команду Group Info из всплывающего контекстного меню:

Сгруппировав графические элементы в диспетчер компоновки типа Grid, присвойте этому объекту имя mrHappyGrid на панели Properties. Вам придется далее организовать взаимодеиствие с этим диспетчером компоновки, используя объект поведения типа ControlStoryboardAction. Как показано на предшествующем рисунке, в родительский объект типа Grid добавлен также элемент управления типа TextBlock, в котором отображается текст, выполняющий элементарную информативную функцию.

А теперь воспользуйтесь интегрированным в Expression Blend редактором анимации, чтобы создать новый объект раскадровки для анимации преобразования как самого диспетчера компоновки, так и содержащейся в нем графики. Ниже приводится краткая процедура анимации преобразования сетки для целей рассматриваемого здесь примера, но вы вольны, конечно, сделать это по-своему:

• Перейдите к панели Objects and Timeline, щелкните на кнопке New Storyboard и присвойте новой раскадровке имя FlipHappyDude (переворачивание изображения счастливца).

• Выберите диспетчер компоновки mrHappyGrid на панели Objects and Timeline.

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

• Перейдите к области Transform панели Properties и измените на 360 значения свойств X и Y преобразования вращением, как показано на первом рисунке ниже.

• Выберите последний ключевой кадр анимации и примените эффект инерционности движения на панели Properties. (Второй рисунок)

В редакторе анимации щелкните на кнопке Play панели Objects and Timeline, чтобы проверить анимацию преобразования сетки и находящихся на ней графических элементов.

Для управления анимацией по созданной ранее раскадровке можно было бы написать исходный код на C# или VB, но для этой цели в рассматриваемом здесь примере проекта будет использован один из встроенных в Expression Blend объектов поведения. Итак, найдите объект поведения ControlStoryboardAction1 на панели Assets и перетащите его на объект mrHappyGrid, находящийся на панели Objects and Timeline.

Выберите новый узел ControlStoryboardAction на панели Objects and Timeline, перейдите к панели Properties и щелкните на пиктограмме инструмента Artboard element picker (Селектор элементов на рабочем столе) справа от поля свойства SourceName (Имя источника):

Далее щелкните на одном из графических элементов (например, на левом глазе улыбающегося лица) и выберите инициирующее событие в свойстве EventName (Имя события), установив подходящие значения свойств ControlStoryboardOption (Режим управления анимацией по раскадровке) и Storyboard (Раскадровка).

Вот, собственно, и все! Если вы запустите свое приложение на выполнение и щелкнете сначала на заглавии новой вкладки (или пролистаете страницы сводного представления мышью), а затем на левом глазу графического изображения счастливца (в данном примере проекта), то увидите воспроизводящуюся в итоге анимацию переворачивания этого изображения.