Пивот и панорама. Разработка простейших приложений для Windows Phone 7

Теперь, когда кнопки выполняют свою функцию, добавим информации, вот код для пивота:

Проект Silverlight: PanoramaPivotControls Файл: PivotPage1.xaml

<phone:PhoneApplicationPage 
    x:Class="PanoramaPivotControls.PivotPage1"
    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" 
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <!--Pivot Control-->
        <controls:Pivot Title="PIVOT CONTROL">
            <!--Pivot item one-->
            <controls:PivotItem Header="item1">
                <Grid>
                    <!--Added textbox control with formatted text-->
                    <TextBlock
       TextWrapping="Wrap"
       Style="{StaticResource PhoneTextLargeStyle}">
       <Run>Здесь вы можете добавить любой текст в ваш пивот, в любом количестве.</Run>
       <LineBreak/>
       <LineBreak/>
       <Run>С переносами строк и красивыми рисунками...</Run>
                    </TextBlock>
                </Grid>

            </controls:PivotItem>

            <!--Pivot item two-->
            <controls:PivotItem Header="item2">
                <!--Added background image and text content-->
                <Border
        BorderBrush="{StaticResource PhoneForegroundBrush}"
        BorderThickness="{StaticResource PhoneBorderThickness}">
                    <Grid>
                        <Image
                    Source="samplePhoto.jpg"
                    Stretch="UniformToFill"/>
                        <TextBlock
                    Text="Также вы можете размещать текст на выбранном вами фоне."
                    TextWrapping="Wrap"
                    Style="{StaticResource PhoneTextExtraLargeStyle}" />
                    </Grid>
                </Border>

            </controls:PivotItem>

            <!--Pivot item three-->
            <controls:PivotItem Header="item3">
                <!--This code is a series of string text values-->
                <Grid>
                    <ListBox FontSize="{StaticResource PhoneFontSizeLarge}">
                        <sys:String>Эта</sys:String>
                        <sys:String>часть</sys:String>
                        <sys:String>пивота</sys:String>
                        <sys:String>содержит</sys:String>
                        <sys:String>некоторое</sys:String>
                        <sys:String>количество</sys:String>
                        <sys:String>строк</sys:String>
                        <sys:String>которые</sys:String>
                        <sys:String>вы</sys:String>
                        <sys:String>можете</sys:String>
                        <sys:String>прокручивать</sys:String>
                        <sys:String>вверх</sys:String>
                        <sys:String>и</sys:String>
                        <sys:String>вниз</sys:String>
                        <sys:String>снова</sys:String>
                        <sys:String>и</sys:String>
                        <sys:String>снова</sys:String>
                        <sys:String>!!!!</sys:String>
                    </ListBox>
                </Grid>

            </controls:PivotItem>


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

Обратите внимание, что пивот состоит из частей, эти части, по сути своей – отдельные экраны. Внутри каждой из частей располагается любой контент, который вы в нём разместите. Для открытия и закрытия части пивота используются теги:

<controls:PivotItem Header="item1">
…
 </controls:PivotItem>

Теперь перейдём к панораме и файлу PanoramaPage1.xaml:

Проект Silverlight: PanoramaPivotControls Файл: PanoramaPage1.xaml

<phone:PhoneApplicationPage 
    x:Class="PanoramaPivotControls.PanoramaPage1"
    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" 
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="False">

    <!--LayoutRoot contains the root grid where all other page content is placed-->
    <Grid x:Name="LayoutRoot">
        <controls:Panorama Title="my pano">

            <!--Assigns a background image to the Panorama control-->
            <controls:Panorama.Background>
                <ImageBrush ImageSource="samplePhoto.jpg"/>
            </controls:Panorama.Background>


            <!--Panorama item one-->
            <controls:PanoramaItem Header="item1">
                <Grid>
                    <!--This code creates two TextBlock controls and places them in a StackPanel control-->
                    <StackPanel>
                        <TextBlock
                    Text="Здесь вы можете добавить любой текст в вашу панораму, в любом количестве."
                    Style="{StaticResource PhoneTextLargeStyle}"
                    TextWrapping="Wrap"/>
                        <TextBlock Text=" "/>
                        <TextBlock
                    Text="Здесь может быть любой контент..."
                    Style="{StaticResource PhoneTextLargeStyle}"
                    TextWrapping="Wrap"/>
                    </StackPanel>
                </Grid>

            </controls:PanoramaItem>

            <!--Panorama item two-->
            <controls:PanoramaItem Header="item2" Orientation="Horizontal">
                <!-- Assigns a border to the PanoramaItem control and background for the content section. -->
                <Grid>
                    <Border
                BorderBrush="{StaticResource PhoneForegroundBrush}"
                BorderThickness="{StaticResource PhoneBorderThickness}"
                Background="#80808080">
                        <TextBlock
                    Text="Здесь располагается достаточно широкое содержимое вашей панорамы."
                    Style="{StaticResource PhoneTextExtraLargeStyle}"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center" >
                        </TextBlock>

                    </Border>
                </Grid>
            </controls:PanoramaItem>

            <!--Panorama item three-->
            <controls:PanoramaItem Header="item3">
                <Grid>
                    <ListBox FontSize="{StaticResource PhoneFontSizeLarge}">
                        <sys:String>Эта</sys:String>
                        <sys:String>часть</sys:String>
                        <sys:String>панорамы</sys:String>
                        <sys:String>содержит</sys:String>
                        <sys:String>некоторое</sys:String>
                        <sys:String>количество</sys:String>
                        <sys:String>строк</sys:String>
                        <sys:String>которые</sys:String>
                        <sys:String>вы</sys:String>
                        <sys:String>можете</sys:String>
                        <sys:String>прокручивать</sys:String>
                        <sys:String>вверх</sys:String>
                        <sys:String>и</sys:String>
                        <sys:String>вниз</sys:String>
                        <sys:String>снова</sys:String>
                        <sys:String>и</sys:String>
                        <sys:String>снова</sys:String>
                        <sys:String>!!!!</sys:String>
                    </ListBox>
               
                </Grid>
            </controls:PanoramaItem>
        </controls:Panorama>
    </Grid>
</phone:PhoneApplicationPage>

Как вы заметили, фон нашей панорамы задаётся следующим образом:

            <controls:Panorama.Background>
                <ImageBrush ImageSource="samplePhoto.jpg"/>
            </controls:Panorama.Background>

Теперь запустим наше приложение и тщательно обследуем. Я нахожу эти элементы достаточно красочными, осталось дело за контентом, дерзайте.

Ключевые термины

Panorama– элемент управления приложения Silverlight на платформе Windows Phone 7, представляющий собой прокручиваемое окно, содержащее информацию, разбитую на группы.

Pivot– элемент управления приложения Silverlight на платформе Windows Phone 7, для создания своеобразных табов. Как правило состоит из нескольких частей.

Краткие итоги

В данной лекции мы:

Набор для практики

Упражнения

Создайте панораму, содержащую ссылки на обычные страницы Silverlight приложения.