• Статья
45 дней с Windows Phone 7. День #17. Элемент управления Pivot.

Вчера мы говорили о том, для чего служит и как используется элемент управления «Panorama». Сегодня мы рассмотрим похожий, но всё-таки другой элемент управления, который часто путают с «Panorama» и который называется «Pivot».

Элемент управления «Pivot».

Pivot представляет собой элемент управления для создания своеобразных табов. Данный сценарий применяется в окне настроек телефона для переключения между настройками самого телефона и настройками приложений. Рассмотрим другое приложение на телефоне. Например, в календаре можно переключиться из режима «day» в режим «agenda». Данные режимы позволяют посмотреть на одни и те же данные как бы с различных сторон. Это также частый сценарий применения элемента управления «Pivot». Можно сказать даже основной сценарий. Далее приведены иллюстрации того, как всё это выглядит.

Когда следует использовать элемент управления «Panorama», а когда «Pivot».

Tim Heuer написал прекрасную статью о том, когда что стоит использовать. Вы также можете посмотреть видео на Channel 9.

Мои советы достаточно просты:

  • Используйте элемент управления Panorama для Вашего приложения, кода оно представляется хабом (некой длинной лентой, которую пользователю будет интересно прокучивать), и нет необходимости в панели приложения.
  • Используйте элемент управления Pivot, когда Вам надо показать одни и те же или связанные данные с различных сторон. Как бы расплывчато это не звучало.

Использование элемента управления «Pivot».

Если Вы не читали вчерашнюю статью про элемент управления Panorama, прочтите её. Там описывалось, как добавить Panorama и Pivot на Toolbox в Visual Studio. Вообще, использование Pivot очень похоже на использование Panorama и далее мы рассмотрим использование Pivot на конкретных примерах. В сегодняшнем примере мы будем применять связывание данных (Data Binding) и шаблоны данных (Data Templates) для отображения списка имён в приложении, используемом для подбора имени ребёнка. В трёх вкладках элемента управления Pivot можно будет посмотреть на имена (данные) с различных сторон: имена для мальчиков и девочек, мужские и женские имена по отдельности соответственно. Создадим три вкладки:

<controls:Pivot Title="BABY NAMES">

    <controls:PivotItem Header="boys">

    </controls:PivotItem>

    <controls:PivotItem Header="girls">

    </controls:PivotItem>

    <controls:PivotItem Header="either">

    </controls:PivotItem>

</controls:Pivot>

Но пустые вкладки мало чем могут помочь, давайте двигаться дальше.

Добавляем данные.

На каждую вкладку мы добавим элемент управления ListBox, у которого будет задан шаблон элемента (ItemTemplate). Далее приведён полный получившийся XAML код:

<controls:Pivot Title="BABY NAMES">

    <controls:PivotItem Header="boys">

        <ListBox x:Name="boyList" Margin="0,0,-12,0">

            <ListBox.ItemTemplate>

                <DataTemplate>

                    <StackPanel Margin="0,0,0,17" >

                        <TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>

                    </StackPanel>

                </DataTemplate>

            </ListBox.ItemTemplate>

        </ListBox>

    </controls:PivotItem>

    <controls:PivotItem Header="girls">

        <ListBox x:Name="girlList" Margin="0,0,-12,0">

            <ListBox.ItemTemplate>

                <DataTemplate>

                    <StackPanel Margin="0,0,0,17" >

                        <TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>

                    </StackPanel>

                </DataTemplate>

            </ListBox.ItemTemplate>

        </ListBox>

    </controls:PivotItem>

    <controls:PivotItem Header="either">

        <ListBox x:Name="allList" Margin="0,0,-12,0">

            <ListBox.ItemTemplate>

                <DataTemplate>

                    <StackPanel Margin="0,0,0,17" >

                        <TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>

                    </StackPanel>

                </DataTemplate>

            </ListBox.ItemTemplate>

        </ListBox>

    </controls:PivotItem>

</controls:Pivot>

Теперь воспользуемся связыванием данных и определим то, что будет отображаться. Сделаем это в C# коде. Сейчас я не буду подробно рассказывать про связывание данных, так как на эту тему уже написано достаточно. Знание данной темы необходимо любому Silverlight/WPF разработчику, поэтому я предполагаю, что со связыванием данных Вы знакомы.

>

namespace Day17_PivotControl

{

    public partial class MainPage : PhoneApplicationPage

    {

        BabyName[] names = new BabyName[10] {new BabyName("Steve", 1, 0),

                                      new BabyName("Jennifer", 2, 0),

                                      new BabyName("Alex", 1, 2),

                                      new BabyName("Casey", 1, 2),

                                      new BabyName("Quinn", 1, 2),

                                      new BabyName("Anthony", 1, 0),

                                      new BabyName("Sarah", 2, 0),

                                      new BabyName("Parker", 2, 1),

                                      new BabyName("Jessica", 2, 0),

                                      new BabyName("Jeff", 1, 0)};

 

        // Constructor

        public MainPage()

        {

            InitializeComponent();

            boyList.ItemsSource = from n in names

                                  where (n.Gender1 == 1 || n.Gender2 == 1)

                                  orderby n.Name

                                  select new BabyName(n.Name, n.Gender1, n.Gender2);

 

            girlList.ItemsSource = from n in names

                                   where (n.Gender1 == 2 || n.Gender2 == 2)

                                   orderby n.Name

                                   select new BabyName(n.Name, n.Gender1, n.Gender2);

 

            allList.ItemsSource = from n in names

                                  orderby n.Name

                                  select new BabyName(n.Name, n.Gender1, n.Gender2);

        }

    }

}

Скачать исходный код класса «BabyName» можно в разделе «Пример кода».

В данном примере для каждой вкладки мы определяем своё представление начальных данных. В этом конкретном случае посредством фильтрации.

Хочется отметить, что в 99.99% не стоит использовать в приложении больше семи (7) вкладок/секций для элементов управления Pivot и Panorama. В первую очередь, потому, что пользователи больше просто не запомнят. А если они это не запомнят, как они будут это использовать? Семь плюс-минус два – это хорошо известный предел кратковременной памяти человека. В основном, поэтому телефонные номера редко бывают длиннее семи цифр. Вообще говоря, для большинства приложений не стоит делать даже больше пяти вкладок/секций.

Пример кода.

В данной статье приведён простой пример использования элемента управления Pivot в Silverlight приложениях для Windows Phone 7. Скачайте пример и попробуйте элемент управления в действии.

Автор Jeff Blankenburg
Перевод и доработка Сергей Пугачёв