Приложения Pivot для Windows Phone 7

После создания проекта вы увидите, что он не сильно отличается от любого другого приложения для Windows Phone 7 — у вас та же структура проекта, та же схема XAML — но с одним существенным отличием. Теперь вместо вторичного элемента управления Grid у вас есть элемент управления Pivot:

Теперь на странице, где вы хотите использовать элемент управления Pivot, вы должны объявить для него пространство имен XML, поэтому в заголовке страницы обязательно добавьте эту ссылку xmlns:

xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"

Теперь на своей странице вы можете создать экземпляр элемента управления Pivot:

<controls:Pivot>

</controls:Pivot>

Само по себе это не очень полезно — вам нужен фактический контент, который отображается в различных разделах. Элемент управления Pivot в основном зависит от его потомков (дочерних элементов) — экземпляров PivotItem . PivotItem является членом того же пространства имен, что и сам элемент управления Pivot , поэтому уже внутри элемента управления Pivot вы можете создать несколько экземпляров PivotItem :

<controls:Pivot>
    <controls:PivotItem></controls:PivotItem>
    <controls:PivotItem></controls:PivotItem>
    <controls:PivotItem></controls:PivotItem>
    <controls:PivotItem></controls:PivotItem>
    <controls:PivotItem></controls:PivotItem>
</controls:Pivot>

Экземпляры PivotItem также бессмысленны сами по себе, поэтому вам придется установить некоторые дополнительные свойства, чтобы они работали. Если вы посмотрели видео, упомянутое выше, вы заметили, что к каждой переключаемой панели привязаны определенные заголовки. Они определяются свойством Header для каждого экземпляра PivotItem. Я установил свойство Header для каждого экземпляра PivotItem (упомянутого выше), и мое представление XAML не претерпело много изменений:

<controls:Pivot>
    <controls:PivotItem  Header="red"></controls:PivotItem>
    <controls:PivotItem Header="green"></controls:PivotItem>
    <controls:PivotItem Header="blue"></controls:PivotItem>
    <controls:PivotItem Header="purple"></controls:PivotItem>
    <controls:PivotItem Header="white"></controls:PivotItem>
</controls:Pivot>

Однако теперь я вижу, что в моем элементе управления Pivot есть отдельные панели, предназначенные для определенного содержимого:

Конечно, каждый PivotItem может иметь содержимое, присутствующее в нем. Это можно установить либо через свойство Content, либо просто вставив компонент между тегами PivotItem. Здесь важно помнить: вы можете установить свойство Content только один раз, поэтому этот код будет недействительным:

<controls:PivotItem  Header="red">
    <TextBlock></TextBlock>
    <Image></Image>
</controls:PivotItem>

Контент устанавливается на TextBlock, а затем еще раз на изображение. В случае, если вы хотите иметь несколько элементов управления, вам придется поместить их в контейнер, такой как Grid. При этом, этот код действителен:

<controls:PivotItem  Header="red">
    <Grid>
        <TextBlock></TextBlock>
        <Image></Image>
    </Grid>
</controls:PivotItem>

В целях экспериментирования я вставил сетку в каждый присутствующий элемент PivotItem, для фона был задан цвет, соответствующий имени (просто чтобы показать, как он работает). XAML для этого довольно прост:

<controls:Pivot>
    <controls:PivotItem  Header="red">
        <Grid Height="630" Background="Red" />
    </controls:PivotItem>
    <controls:PivotItem Header="green">
        <Grid Height="630" Background="Green" />
    </controls:PivotItem>
    <controls:PivotItem Header="blue">
        <Grid Height="630" Background="Blue" />
    </controls:PivotItem>
    <controls:PivotItem Header="purple">
        <Grid Height="630" Background="Purple" />
    </controls:PivotItem>
    <controls:PivotItem Header="white">
        <Grid Height="630" Background="White" />
    </controls:PivotItem>
</controls:Pivot>

Результат выглядит следующим образом (очевидно, я не мог показать анимацию скольжения здесь): 

Переключение между экземплярами PivotItem также может быть выполнено в коде позади. Для этого вам нужно установить x: Name как для основного элемента управления Pivot, так и для любого последующего PivotItem, к которому будет обращаться из кода кода. Как только каждый элемент управления имеет уникальный идентификатор, вы можете установить для свойства Pivot.SelectedItem экземпляр PivotItem.

PivotControl.SelectedItem = PivotItemInstance; 

Как видно из этой статьи, элемент управления Pivot можно использовать, когда пользователь сталкивается с несколькими блоками контента, сгруппированными по схожим критериям. Итак, каковы могут быть реальные примеры ситуаций, когда можно использовать элемент управления Pivot? Вот только несколько из них: