Знакомство с элементом управления 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);
}
}
}




