Знакомство с элементом управления Panorama
Дополнительные материалы к занятию можно скачать здесь.
Вложенные папки: Panorama.app1
По сравнению с экранами "взрослых" компьютеров мониторы коммуникаторов и смартфонов имеют гораздо меньшее разрешение. Что делать, если мы не можем брать с собой огромную карту? Мы делаем небольшой атлас и перелистываем его. Microsoft, Google и Apple по-своему пытаются помочь пользователям "перелистывать" информацию. Современные мобильные устройства имеют сенсорные экраны, а операционные системы позволяют программистам разрабатывать приложения, распознающие жесты пользователей. Одним из таких жестов является прокрутка, с помощью которой можно, например, по частям просмотреть большую фотографию. В Microsoft Windows Phone 7 имеются два элемента управления, облегчающие пользователю доступ к информации - это Pivot и Panorama ( рис. 35.1). С элементом управления Pivot мы познакомимся в следующей работе, а пока изучим Панораму.
увеличить изображение
Рис. 35.1. Горизонтальная прокрутка реализуется с помощью элемента управления Panorama (http://www.ixbt.com/pda/images/windows-phone7/people.jpg)
С помощью элемента управления Panorama можно реализовывать вертикальные колонки, состоящие из плиток. Колонки можно прокручивать по горизонтали, а плитки - в вертикальном направлении.
В предлагаемой работе мы создадим две вертикальные колонки. В первой будут храниться сведения о лекарственных растениях, в то время как вторая колонка будет посвящена съедобным грибам.
Итак, запускаем Microsoft Visual Studio 2010 Express for Windows Phone. В пункте Target Windows Phone Version выбираем Windows Phone 7.1.
В закладке Online Templates выбираем тип приложения Windows Phone Panorama Application.
В процессе работы нам потребуется сменить фоновую картинку и разместить в приложении фотографии растений и грибов. Картинки мы разместим в папке Images. Создадим эту папку: Solution Explorer -> Add -> New Folder -> Images.
К учебному курсу прилагается архив Panorama.app1.rar. в нем вы найдете изображения. Скопируйте их в созданную папку Images и добавьте к проекту: Solution Explorer -> Images -> Add Existing Item -> Путь к файлам (1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg, 6.jpg и 7.jpg).
Откройте файл MainPage.xaml и заполните его следующим содержимым:
<phone:PhoneApplicationPage x:Class="PanoramaApp1.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/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:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800" d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}" SupportedOrientations="Portrait" Orientation="Portrait" shell:SystemTray.IsVisible="False"> <!--LayoutRoot is the root grid where all page content is placed--> <Grid x:Name="LayoutRoot" Background="Transparent"> <!--Panorama control--> <controls:Panorama Title="Панорама"> <controls:Panorama.Background> <ImageBrush ImageSource="Images/1.JPG" Opacity="0.5" /> </controls:Panorama.Background> <!--Panorama item one--> <controls:PanoramaItem Header="Растения"> <ListBox Margin="0,0,-12,0"> <StackPanel Orientation="Horizontal" Margin="0,0,0,17"> <Image Height="100" Width="100" Source="Images\2.jpg" Margin="12,0,9,0" Name="Image_1" MouseEnter="Image_1_MouseEnter"/> <StackPanel Width="311"> <TextBlock Text="Душица" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/> <RichTextBox Name="rtb1"/> </StackPanel> </StackPanel> <StackPanel Orientation="Horizontal" Margin="0,0,0,17"> <Image Height="100" Width="100" Source="Images\3.jpg" Margin="12,0,9,0" Name="Image_2" MouseEnter="Image_2_MouseEnter"/> <StackPanel Width="311"> <TextBlock Text="Зверобой" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/> <RichTextBox Name="rtb2"/> </StackPanel> </StackPanel> <StackPanel Orientation="Horizontal" Margin="0,0,0,17"> <Image Height="100" Width="100" Source="Images\4.jpeg" Margin="12,0,9,0" Name="Image_3" MouseEnter="Image_3_MouseEnter"/> <StackPanel Width="311"> <TextBlock Text="Мята" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/> <RichTextBox Name="rtb3"/> </StackPanel> </StackPanel> </ListBox> </controls:PanoramaItem> <!--Panorama item two--> <!--Use 'Orientation="Horizontal"' to enable a panel that lays out horizontally--> <controls:PanoramaItem Header="Грибы"> <ListBox Margin="0,0,-12,0"> <StackPanel Orientation="Horizontal" Margin="0,0,0,17"> <Image Height="100" Width="100" Source="Images\5.jpg" Margin="12,0,9,0" Name="Image_4" MouseEnter="Image_4_MouseEnter"/> <StackPanel Width="311"> <TextBlock Text="Белый гриб" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/> <RichTextBox Name="rtb4"/> </StackPanel> </StackPanel> <StackPanel Orientation="Horizontal" Margin="0,0,0,17"> <Image Height="100" Width="100" Source="Images\6.jpg" Margin="12,0,9,0" Name="Image_5" MouseEnter="Image_5_MouseEnter"/> <StackPanel Width="311"> <TextBlock Text="Вешенки" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/> <RichTextBox Name="rtb5"/> </StackPanel> </StackPanel> <StackPanel Orientation="Horizontal" Margin="0,0,0,17"> <Image Height="100" Width="100" Source="Images\7.jpg" Margin="12,0,9,0" Name="Image_6" MouseEnter="Image_6_MouseEnter"/> <StackPanel Width="311"> <TextBlock Text="Шампиньон" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/> <RichTextBox Name="rtb6"/> </StackPanel> </StackPanel> </ListBox> </controls:PanoramaItem> </controls:Panorama> </Grid> <!--Panorama-based applications should not show an ApplicationBar--> </phone:PhoneApplicationPage>
Перейдите в режим кода и введите в файл MainPage.xaml.cs:
using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using Microsoft.Phone.Controls; namespace PanoramaApp1 { public partial class MainPage : PhoneApplicationPage { // Constructor public MainPage() { InitializeComponent(); // Set the data context of the listbox control to the sample data DataContext = App.ViewModel; this.Loaded += new RoutedEventHandler(MainPage_Loaded); } // Load data for the ViewModel Items private void MainPage_Loaded(object sender, RoutedEventArgs e) { if (!App.ViewModel.IsDataLoaded) { App.ViewModel.LoadData(); } } private void Image_1_MouseEnter(object sender, MouseEventArgs e) { // create a paragraph Paragraph prgParagraph = new Paragraph(); // create some text, and add it to the paragraph Bold bldText = new Bold(); bldText.Inlines.Add(new Run() { Text = "Душица (лат. Orig?num) - род травянистых растений семейства Яснотковые (Lamiaceae), включает в себя 45-50 видов." }); Run plainText = new Run(); plainText.Text = "\n" + "Название встречается в трудах Диоскорида и Гиппократа и происходит от греческих слов oros - холм, гора и ganos - блеск, орнамент и может быть переведено как: блестящее растение, растущее на камнях, или украшение гор, так как в период цветения становится глянцевым, блестящим и покрывает склоны гор нарядным ковром."; prgParagraph.Inlines.Add(bldText); prgParagraph.Inlines.Add(plainText); rtb1.Blocks.Add(prgParagraph); } private void Image_2_MouseEnter(object sender, MouseEventArgs e) { // create a paragraph Paragraph prgParagraph = new Paragraph(); // create some text, and add it to the paragraph Bold bldText = new Bold(); bldText.Inlines.Add(new Run() { Text = "Зверобой продырявленный, или Зверобой обыкновенный (лат. Hypricum perfortum) - многолетнее травянистое растение; типовой вид рода Зверобой семейства Зверобойные (Hypericaceae)." }); Run plainText = new Run(); plainText.Text = "\n" + "Народные названия: заячья кровь, зверобой дырявый, зверобой жёлтый, зверобойник, красная травица, кровавец, кровца, хворобой"; prgParagraph.Inlines.Add(bldText); prgParagraph.Inlines.Add(plainText); rtb2.Blocks.Add(prgParagraph); } private void Image_3_MouseEnter(object sender, MouseEventArgs e) { // create a paragraph Paragraph prgParagraph = new Paragraph(); // create some text, and add it to the paragraph Bold bldText = new Bold(); bldText.Inlines.Add(new Run() { Text = "Мята перечная (лат. M?ntha piper?ta) - травянистое растение рода Мята семейства Яснотковые." }); Run plainText = new Run(); plainText.Text = "\n" + "Культурное растение было получено путём гибридизации дикорастущих видов мяты - мяты водной (Mentha aquatica) и мяты садовой (Mentha spicata)." + "\n" + "Культивируют повсеместно в садах и огородах. Иногда дичает"; prgParagraph.Inlines.Add(bldText); prgParagraph.Inlines.Add(plainText); rtb3.Blocks.Add(prgParagraph); } private void Image_4_MouseEnter(object sender, MouseEventArgs e) { // create a paragraph Paragraph prgParagraph = new Paragraph(); // create some text, and add it to the paragraph Bold bldText = new Bold(); bldText.Inlines.Add(new Run() { Text = "Белый гриб (лат. Boletus edulis), или боровик (сокращённо: белый) - гриб из рода Боровик" }); Run plainText = new Run(); plainText.Text = "\n" + "В старину "грибами" называли главным образом съедобные грибы, в наибольшей мере это слово относилось к белому грибу как к наиболее ценному."; prgParagraph.Inlines.Add(bldText); prgParagraph.Inlines.Add(plainText); rtb4.Blocks.Add(prgParagraph); } private void Image_5_MouseEnter(object sender, MouseEventArgs e) { // create a paragraph Paragraph prgParagraph = new Paragraph(); // create some text, and add it to the paragraph Bold bldText = new Bold(); bldText.Inlines.Add(new Run() { Text = "Вёшенка (лат. Pleurotus) - род грибов семейства Вёшенковые, или Плевротовые (Pleurotaceae)" }); Run plainText = new Run(); plainText.Text = "\n" + "Развивается на субстрате из неживых растительных остатков, из которого способен усваивать целлюлозу и лигнин. В природе растёт на стволах засохших деревьев" + "\n" + "Существуют технологии промышленного разведения вёшенки на древесных опилках, соломе злаков, известны любительские технологии разведения грибов на шелухе подсолнечника"; prgParagraph.Inlines.Add(bldText); prgParagraph.Inlines.Add(plainText); rtb5.Blocks.Add(prgParagraph); } private void Image_6_MouseEnter(object sender, MouseEventArgs e) { // create a paragraph Paragraph prgParagraph = new Paragraph(); // create some text, and add it to the paragraph Bold bldText = new Bold(); bldText.Inlines.Add(new Run() { Text = "Шампиньон (лат. Agaricus) - род пластинчатых грибов семейства Шампиньоновые (Агариковые) (лат. Agaricaceae). Русское название "шампиньон" происходит от фр. champignon, означающего просто гриб" }); Run plainText = new Run(); plainText.Text = "\n" + "В пищевых шампиньонах содержится более 20 аминокислот, в том числе все незаменимые для человека: метионин, цистеин, цистин, триптофан, треонин, валин, лизин, фенилаланин" + "\n" + "Из плодовых тел некоторых шампиньонов выделяют антибиотики"; prgParagraph.Inlines.Add(bldText); prgParagraph.Inlines.Add(plainText); rtb6.Blocks.Add(prgParagraph); } } }