Проекты панорамного (panoram) типа
88Expression Blend --- Windows Phone 7 --- Проекты панорамного (panoram) типа
В предыдущем примере проекта был использован самый простой из всех доступных на платформе Windows Phone 7 шаблон проекта Windows Phone Application. По умолчанию приложение, разрабатываемое по этому шаблону проекта, состоит из единственной страницы отображаемого пользовательского интерфейса, которую можно скомпоновать как угодно. Разумеется, эта единственная страница может состоять из диспетчера компоновки, отображающего динамическое содержимое с помощью специальных объектов типа UserControl, но, вообще говоря, все содержимое пользовательского интерфейса в таком приложении не выходит за рамки экрана мобильного устройства.
В качестве альтернативы на платформе Windows Phone 7 предоставляется шаблон проекта Windows Phone Panorama Application. Приложения панорамного типа предоставляют уникальную возможность для просмотра содержимого пользовательского интерфейса на длинном прокручиваемом по горизонтали виртуальном полотне, выходящем за рамки экрана мобильного устройства.
Когда пользователь проводит пальцем по экрану мобильного устройства (в эмуляторе аналогичный эффект достигается мышью), изображение плавно прокручивается к следующей укрупненной части графического представления с помощью многослойной анимации, в ходе которой осуществляется плавное панорамирование с разной скоростью, подобно эффектам параллакса.
Для того чтобы стали более понятными особенности разработки приложений панорамного типа на платформе Windows Phone 7, достаточно видоизменить немного первоначальный код, автоматически сформированный в среде Expression Blend. С этой целью создайте новый проект, выбрав сначала команду меню File --> New Рroject, а затем шаблон проекта Windows Phone Panorama.
Проанализируйте содержимое панели Objects and Timeline, обратив внимание на то что у объекта LayoutRoot типа Grid имеется порожденный объект типа Panorama. Именно этот объект и отвечает за плавные переходы от одного элемента панорамного представления типа PanoramaItem к другому. В данный момент имеются два таких элемента, причем каждый из них содержит единственный элемент управления типа ListBox:
А теперь запустите свое риложение на выполнение, нажав функциональную клавишу F5. После загрузки эмулятора воспользуйтесь мышью, чтобы сымитировать проводку пальцем влево или вправо по экрану мобильного устройства для плавного прокручивания содержимого экрана и просмотра данных в каждом элементе типа PanoramaItem. По завершении экспериментов с панорамным представлением закроите эмулятор на некоторое время.
Вернитесь в Expression Blend и откройте файл разметки главной страницы MainPage.xaml в редакторе XAML на монтажном столе. Обратите внимание на то, что каждый объект типа PanoramaItem настроен на извлечение данных из связанного с ним шаблона данных, как показано в приведенном ниже фрагменте разметки:
<!--Panorama item one-->
<controls:PanoramaItem Header="first item">
<!--Double line list with text wrapping-->
<ListBox ItemsSource="{Binding Items}" Margin="0,0,-12,0">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17" Width="432">
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" />
<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</controls:PanoramaItem>Подобные шаблоны данных настроены на извлечение жестко запрограммированных данных из класса ViewModel текущего приложения. Убедитесь в этом сами, проанализировав исходный код из файла MainViewModel.cs, находящегося в папке ViewModels вашего проекта.
Все объекты типа PanoramaItem содержатся в одном элементе управления типа Panorama, который отвечает за прокрутку анимации и правильное отображение содержимого пользовательского интерфейса на экране мобильного устройства. Помимо того что элемент управления типа Panorama содержит объекты типа PanoramaItem, он определяет также файл изображения, используемого в качестве фона.
По умолчанию в новых проектах, разрабатываемых по шаблону Windows Phone Panorama, используется файл образцового изображения PanoramaBackground.png, автоматически добавляемый в проект. Как показано в приведенном ниже фрагменте разметки, объект типа ImageBrush используется для раскраски кистью фона поверхности виртуального полотна:
<controls:Panorama.Background>
<ImageBrush ImageSource="PanoramaBackground.png"/>
</controls:Panorama.Background>А теперь необходимо заменить используемое по умолчанию фоновое изображение специально подобранным изображением. С этой целью выберите объект типа Panorama на панели Objects and Timeline и найдите свойство Background. На рисунке приведено текущее значение этого свойства:
Прежде чем изменять исходный фон, необходимо создать для него специальную графику. С этой целью откройте избранный вами файл цифрового изображения в приложении Paint, запускаемом на выполнение в Windows по команде Пуск --> Все программыо --> Стандартные --> Paint. После этого измените размеры изображения до величины 1024x768 пикселей, т.е. до размеров исходного фонового изображения, щелкнув на кнопке Resize and Skew (Растяжение и наклон) или нажав комбинацию клавиш <Ctrl+W>.
Сохраните видоизмененное изображение по стандартной команде сохранения в файле формата PNG, выбрав для него подходящее место на жестком диске компьютера. Вернитесь в Expression Blend и внесите изменения в свойство Background элемента управления типа Panorama, чтобы заменить исходный фон на специальную графику.
С этой целью щелкните на кнопке с изображением эллипса рядом с текстовым полем свойства ImageSource:
В среде Expression Blend IDE рекомендуется вводить данные изображения в текущий проект приложения в виде двоичного источника. Но для целей рассматриваемого здесь примера это не имеет никакого значения.
Еще раз запустите приложение на выполнение, чтобы посмотреть, как графика прокручивается на новом фоне благодаря объекту типа Panorama:
В качестве последнего изменения в рассматриваемом здесь проекте коллекция, хранящаяся в узле Panorama, будет дополнена третьим объектом типа PanoramItem. Сделать это проще всего щелкнув правой кнопкой мыши на узле Panorama в иерархическом представлении панели Objects and Timeline и выбрав команду Add PanoramaItem из всплывающего контекстного меню:
Как только вы выберете указанную выше команду меню, на монтажном столе появится новый объект типа PanoramaItem, к которому можно затем добавить любое количество элементов управления, графики и пр.
В рассматриваемом здесь простом примере проекта достаточно лишь изменить свойство Header объекта типа PanoramaItem на панели Properties или добавить новый элемент управления либо графику в диспетчер компоновки типа Grid просто для того, чтобы проверить панорамное представление пользовательского интерфейса в действии.
В частности, можете добавить один элемент управления типа Button и организовать обработку события типа Click, чтобы вывести на экран сообщение из метода MessageBox.Show(), когда на кнопке производится щелчок. Внеся эти изменения в свой проект, еще раз запустите его на выполнение, чтобы проверить, прокручиваются ли объекты типа PanoramaItem в панорамном представлении, в то время как на заднем плане отображается графика, специально подобранная для фона.
