Опубликован: 01.11.2011 | Доступ: свободный | Студентов: 1424 / 62 | Оценка: 3.84 / 3.44 | Длительность: 15:38:00
Специальности: Программист
Практическая работа 25:

Знакомство с элементом управления Panorama

Аннотация: По сравнению с экранами "взрослых" компьютеров мониторы коммуникаторов и смартфонов имеют гораздо меньшее разрешение. Современные мобильные устройства имеют сенсорные экраны, а операционные системы позволяют программистам разрабатывать приложения, распознающие жесты пользователей.
Ключевые слова: ПО, Windows, phone, доступ, visual, target, архив, файл

Дополнительные материалы к занятию можно скачать здесь.

Вложенные папки: Panorama.app1

По сравнению с экранами "взрослых" компьютеров мониторы коммуникаторов и смартфонов имеют гораздо меньшее разрешение. Что делать, если мы не можем брать с собой огромную карту? Мы делаем небольшой атлас и перелистываем его. Microsoft, Google и Apple по-своему пытаются помочь пользователям "перелистывать" информацию. Современные мобильные устройства имеют сенсорные экраны, а операционные системы позволяют программистам разрабатывать приложения, распознающие жесты пользователей. Одним из таких жестов является прокрутка, с помощью которой можно, например, по частям просмотреть большую фотографию. В Microsoft Windows Phone 7 имеются два элемента управления, облегчающие пользователю доступ к информации - это Pivot и Panorama ( рис. 35.1). С элементом управления Pivot мы познакомимся в следующей работе, а пока изучим Панораму.

Горизонтальная прокрутка реализуется с помощью элемента управления Panorama (http://www.ixbt.com/pda/images/windows-phone7/people.jpg)

увеличить изображение
Рис. 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);
        }
    }
}