Главная » Разработка для Windows Phone 7 » Сводное представление и панорама Windows Phone 7

0

Приложения на Silverlight, которые должны представлять пользователю большие объемы информации, традиционно используют структуру постраничной навигации. Однако для приложения, выполняющегося на телефоне, разделение на страницы не самое лучшее решение. Портретная ориентация, простота мультисенсорного ввода и приобретающие все большую популярность пользовательские интерфейсы «fluid1» – все эти факторы предлагают другие типы компоновки. Такие альтернативы представлены в Windows Phone 7 двумя новыми элементами управления: Pivot (Сводное представление) и Panorama (Панорама).

И Pivot, и Panorama располагаются в библиотеке Microsoft.Phone.Controls, поэтому любое приложение, использующее эти элементы управления, должно ссылаться на эту DLL. Описаны Pivot и Panorama в пространстве имен Microsoft.Phone.Controls, вспомогательные компоненты – в пространстве именMicrosoft.Phone.Controls.Primitives, но эти классы пригодятся лишь для настройки данных элементов управления.

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

Сходства и отличия

И Pivot, и Panorama наследуются от ItemsControl в виде класса с обобщенным параметром:

public class TemplatedItemsControl<T> : ItemsControl where T : new(), FrameworkElement

Здесь описывается ItemsControl, который предполагается заполнять объектами типа T. Pivot и Panorama наследуются от TemplatedItemsControl с заданием в качестве параметра типа PivotItem (Элемент сводного представления) или PanoramaItem (Элементы панорамы), соответственно:

public class Pivot : TemplatedItemsControl<PivotItem> public class Panorama : TemplatedItemsControl<PanoramaItem>

Предполагается, что элемент управления Pivot будет содержать элементы типа PivotItem, тогда как элемент управления Panorama будет включать элементы типа PanoramaItem. И PivotItem, и PanoramaItem наследуются от ContentControl. Если коллекция Items объекта Pivot или Panorama заполняется явно в XAML и коде, вы захотите заполнить ее элементами PivotItem или PanoramaItem; у этих элементов управления есть такое важное свойство, как Header (Верхний колонтитул), которое необходимо задать. Если же применяется привязка к свойству ItemsSource, определенному ItemsControl, эти объекты PivotItem и PanoramaItem создаются автоматически, а свойство Header задается через шаблон. (Не волнуйтесь, я приведу примеры.)

«Fluid» в переводе с английского означает «подвижный», «изменчивый». Интерфейсы такого типа предполагают плавное перетекание одного экрана или страницы в другую (прим. переводчика).

Для создания экземпляров этих элементов управления в XAML-файле необходимо объявить пространство имен XML для библиотеки и пространства имен Microsoft.Phone.Controls:

xmlns:controls="clr-

namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"

Вероятно, самый лучший способ познакомиться с этими классами – это

поэкспериментировать с конкретным примером. Диалоговое окно New Project в Visual Studio предоставляет опции для создания проекта типа Windows Phone Pivot Application или Windows Phone Panorama Application. Безусловно, их можно использовать для своих экспериментов, но для демонстрационного приложения данной главы я выбрал другой подход.

Рассмотрим файл MainPage.xaml проекта PivotDemonstration (Демонстрация сводного представления). Я создал это приложение обычным путем, т.е. выбрав Windows Phone Application в диалоговом окне New Project. Но после этого я удалил большую часть содержимого MainPage.xaml, оставив только теги PhoneApplicationPage. Добавил объявление пространства имен XML для «controls» (самая длинная строка) и заменил содержимое страницы элементом управления Pivot с четырьмя дочерними PivotItem:

Проект Silverlight: PivotDemonstration Файл: MainPage.xaml (фрагмент)

<phone:PhoneApplicationPage

x:Class="PivotDemonstration.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2 0 0 6/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2 0 0 6/xaml"

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" xmlns:controls="clr- namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls" xmlns:system="clr-namespace:System;assembly=mscorlib" xmlns:d="http://schemas.microsoft.com/expression/blend/2 0 0 8" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2 0 0 6" mc:Ignorable="d" d:DesignWidth="4 8 0" d:DesignHeight="7 68" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}"

SupportedOrientations="PortraitOrLandscape" Orientation="Portrait" shell:SystemTray.IsVisible="True">

<controls:Pivot Title="PIVOT DEMONSTRATIONS <controls:PivotItem Header="ListBox">

</controls:PivotItem>

<controls:PivotItem Header="Ellipse"> </controls:PivotItem>

<controls:PivotItem Header="TextBlock"> </controls:PivotItem>

<controls:PivotItem Header="Animation">

</controls:PivotItem> </controls:Pivot> </phone:PhoneApplicationPage>

Свойству Title элемента управления Pivot задано «PIVOT DEMONSTRATION» (Демонстрация сводного представления). По умолчанию этот заголовок будет того же размера и располагаться там же, где и текст, который отображается вверху страницы Windows Phone.

(Обычно этот текст отображается элементом TextBlock под именем ApplicationTitle.) Для всех четырех элементов управления PivotItem задано свойство Header. Местоположение и размер этого текста аналогичны тексту, выводимому обычным TextBlock под именем PageTitle.

Элемент управления PivotItem наследуется от ContentControl, так что его возможности практически неограниченны. Для первого PivotItem я задал ListBox, включающий все доступные для приложений Windows Phone 7 шрифты, а также простой DataTemplate:

Проект Silverlight: PivotDemonstration Файл: MainPage.xaml (фрагмент)

<controls:PivotItem Header="ListBox">

<ListBox FontSize="{StaticResource PhoneFontSizeLarge}"> <ListBox.ItemTemplate> <DataTemplate>

<TextBlock Text="{Binding}"

FontFamily="{Binding}" />

</DataTemplate> </ListBox.ItemTemplate>

<system:String>Arial</system:String> <system:String>Arial Black</system:String> <system:String>Calibri</system:String> <system:String>Comic Sans MS</system:String> <system:String>Courier New</system:String> <system:String>Georgia</system:String> <system:String>Lucida Sans Unicode</system:String> <system:String>Portable User Interface</system:String> <system:String>Segoe WP</system:String> <system:String>Segoe WP Black</system:String> <system:String>Segoe WP Bold</system:String> <system:String>Segoe WP Light</system:String> <system:String>Segoe WP Semibold</system:String> <system:String>Segoe WP SemiLight</system:String> <system:String>Tahoma</system:String> <system:String>Times New Roman</system:String> <system:String>Trebuchet MS</system:String> <system:String>Verdana</system:String> <system:String>Webdings</system:String> </ListBox> </controls:PivotItem>

PivotItem предоставляет ListBox пространство, равное размеру страницы за вычетом области, занимаемой текстом Title и Header:

Конечно, есть возможность прокрутки ListBox в вертикальном направлении. Обратите внимание, что текст Header второго PivotItem рядом с заголовком первого затенен. В этом втором PivotItem отображается только Ellipse:

Проект Silverlight: PivotDemonstration Файл: MainPage.xaml (фрагмент)

<controls:PivotItem Header="Ellipse"> <Ellipse>

<Ellipse.Fill>

<LinearGradientBrush>

<GradientStop Offset="0" Color="{StaticResource PhoneAccentColor}

/>

<GradientStop Offset="0.5" Color="{StaticResource PhoneBackgroundColor}" />

<GradientStop Offset="1" Color="{StaticResource PhoneForegroundColor}" />

</LinearGradientBrush> </Ellipse.Fill> </Ellipse> </controls:PivotItem>

Здесь мы можем ясно видеть размер области, которую PivotItem предлагает своему содержимому:

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

Проект Silverlight: PivotDemonstration Файл: MainPage.xaml (фрагмент)

<controls:PivotItem Header="TextBlock"> <ScrollViewer>

<!– from http://www.gutenberg.org/files/717 8/717 8-8.txt –>

<TextBlock TextWrapping="Wrap">

For a long time I used to go to bed early. Sometimes, when I had put out my candle, my eyes would close so quickly that I had not even time to say "I’m going to sleep." And half an hour later the thought that it was time to go to sleep would awaken me; I would try to put away the book which, I imagined, was still in my hands, and to blow out the light; I had been thinking all the time, while I was asleep, of what I had just been reading, but my thoughts had run into a channel of their own, until I myself seemed actually to have become the subject of my book: a church, a quartet, the rivalry between Frangois I and Charles V. This impression would persist for some moments after I was awake; it did not disturb my mind, but it lay like scales upon my eyes and prevented them from registering the fact that the candle was no longer burning. Then it would begin to seem unintelligible, as the thoughts of a former existence must be to a reincarnate spirit; the subject of my book would separate itself from me, leaving me free to choose whether I would form part of it or no; and at the same time my sight would return and I would be astonished to find myself in a state of darkness, pleasant and restful enough for the eyes, and even more, perhaps, for my mind, to which it appeared incomprehensible, without a cause, a matter dark indeed.

</TextBlock> </ScrollViewer> </controls:PivotItem>

И здесь тоже никаких проблем с прокруткой:

Последний PivotItem включает TextBlock, к которому применяются несколько анимаций: Проект Silverlight: PivotDemonstration Файл: MainPage.xaml (фрагмент)

<controls:PivotItem Header="Animation">

<TextBlock Text="Hello, Windows Phone 7!"

HorizontalAlignment="Left" VerticalAlignment="Top" RenderTransformOrigin="0.5 0.5"> <TextBlock.RenderTransform>

<CompositeTransform x:Name="xform" /> </TextBlock.RenderTransform> </TextBlock>

<controls:PivotItem.Triggers> <EventTrigger>

<BeginStoryboard> <Storyboard>

<DoubleAnimation Storyboard.TargetName="xform"

Storyboard.TargetProperty="Rotation" From="0" To="3 60" Duration="0:0:3" RepeatBehavior="Forever" />

<DoubleAnimation Storyboard.TargetName="xform"

Storyboard.TargetProperty="TranslateX" From="0" To="3 0 0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />

<DoubleAnimation Storyboard.TargetName="xform"

Storyboard.TargetProperty="TranslateY" From="0" To="60 0" Duration="0:0:7" AutoReverse="True" RepeatBehavior="Forever" />

</Storyboard> </BeginStoryboard> </EventTrigger> </controls:PivotItem.Triggers> </controls:PivotItem>

Анимации обеспечивают перемещение TextBlock по экрану и вращение:

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

Приложение PanoramaDemonstration очень похоже на PivotDemonstration, просто в файле MainPage.xaml проекта PivotDemonstration слово «Pivot» везде заменяем на «Panorama». Единственное отличие – текст, являющийся значением свойства Title, написан строчными буквами:

Проект Silverlight: PanoramaDemostration Файл: MainPage.xaml (фрагмент)

<controls:Panorama Title="panorama demonstration"> <controls:PanoramaItem Header="ListBox">

</controls:PanoramaItem>

<controls:PanoramaItem Header="Ellipse"> </controls:PanoramaItem>

<controls:PanoramaItem Header="TextBlock"> </controls:PanoramaItem>

<controls:PanoramaItem Header="Animation">

</controls:PanoramaItem> </controls:Panorama>

Несмотря на всю концептуальную схожесть Pivot и Panorama, эти элементы управления имеют совершенно разную эстетику. Следующие несколько снимков экрана позволяют сравнить эти два элемента управления: Pivot располагается слева, и Panorama – справа. Обратите внимание на то, как обрабатывается Title в Panorama: он намного большего размера и охватывает все остальные элементы:

Я не сделал этого в данном приложении, но обычно свойству Background элемента управления Panorama задается ImageBrush с протяженной в горизонтальном направлении растровой матрицей, которая выходит за границы экрана, охватывая весь элемент управления. (Это можно увидеть в приложениях Games (Игры), Marketplace (Магазин) и Pictures (Изображения) телефона.)

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

Перемещаться вперед и назад по Pivot и Panorama, можно просто проводя пальцем по экрану слева направо или справа налево. В Panorama вполне естественным будет провести пальцем по тексту Title, чтобы «перелистнуть» элемент управления. В Pivot (но не в Panorama) перейти к одному из элементов, можно коснувшись текста его Header:

Обратите внимание также на смещение Title элемента управления Panorama, которое позволяет визуально определить текущее местонахождение относительно виртуальной ширины всего содержимого.

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

Panorama обеспечивает намного более реальное ощущение широкого виртуального экрана с ограниченным окном просмотра, особенно при использовании протяженного фонового изображения. В случае с Pivot кажется, что он занимает только область экрана и просто переносит отдельные элементы в и из области видимости.

Элемент управления Pivot определяет несколько событий, которых нет в Panorama. Это LoadingPivotItem (Загрузка элемента сводного представления), LoadedPivotItem (Элемент сводного представления загружен), UnloadingPivotItem (Выгрузка элемента сводного представления), UnloadedPivotItem (Элемент сводного представления выгружен). Данные события сигнализируют о выходе одного элемента из области просмотра и помещении в нее другого элемента; они неуместны в более неразрывной схеме смены элементов в Panorama.

И Pivot, и Panorama определяют событияSelectionChanged, а также свойства SelectedIndex и SelectedItem. Выбирается весь элемент PivotItem или PanoramaItem целиком, и событие формируется, только лишь когда элемент полностью занимает окно просмотра.

И Pivot, и Panorama определяют свойства TitleTemplate (Шаблон заголовка) и HeaderTemplate (Шаблон верхнего колонтитула) типа DataTemplate. Когда для задания содержимого элемента управления используются привязки, это позволяет определять дерево визуальных элементов для обозначения того, как свойства Title и Header применяют эти данные.

Особенно большое значение имеет свойство HeaderTemplate при связывании посредством привязки свойства ItemsSource элемента управления Pivot или Panorama с коллекцией. В этом случае объекты PivotItem или PanoramaItem не создаются явно. Этот HeaderTemplate понадобится в привязке для задания текста Header, но шаблон может состоять из одного только TextBlock. Позже в этой главе будет рассмотрен соответствующий пример.

Те кто жаждет приключений, может описать абсолютно новый ControlTemplate для Pivot или Panorama. Для шаблона Pivot необходим PivotHeadersControl (Элемент управления верхние колонтитулы сводного представления) (который наследуется от TemplateItemsControl (Элемент управления элементы шаблона) типа PivotHeaderItem (Элемент верхнего

колонтитула сводного представления)), и для шаблона Panorama необходимы три объекта PanningLayer (Слой панорамирования). PanningLayer наследуется от ContentControl, и пространство имен Microsoft.Phone.Controls.Primitives включает классы PanningBackgroundLayer (Слой фона панорамирования) и PanningTitleLayer (Слой заголовка панорамирования), которые наследуются от PanningLayer.

В конце концов мы возвращаемся к исходному представлению. Однако Panorama позволяет одновременно видеть три дочерних элемента: ListBox полностью, небольшой фрагмент Ellipse справа и кусочек вращающегося текста, пересекающий элемент «Comic Sans MS» – это анимация элемента, располагающегося слева.

Источник: Чарльз Петзольд, Программируем Windows Phone 7, Microsoft Press, © 2011.

По теме:

  • Комментарии