День семнадцатый. Элемент Pivot

Вступление

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

Что представляет собой Pivot?

Pivot - очень интересный и полезный элемент, который удобен в использовании для пользователя, работающего с большим количеством данных. Образовано от сокращения слов Пиво вот! (Шутка). На устройствах под управлением Windows Phone 7 уже есть встроенные программы, использующе Pivot - например, Calendar, где вы можете переключаться между режимами agenda и day. Еще один пример - раздел Settings. Ниже представлены иллюстрации к описываемым примерам:

Что использовать: Panorama или Pivot?

Оба элемента в чем-то схожи по свой функциональности. Поэтому разработчику непросто определиться с выбором. Tim Heuer написал статью на этот счет. Также имеется видео на Channel 9 на эту же тему.

Мои рекомедации:

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

Используем элемент Pivot

Вчера, когда мы знакомились с элементом Panorama, я упомянул, как подключить элемент Pivot к вашему проекту. Повторите эти шаги заново и добавьте Pivot на вашу страницу (Windows Phone controls→Choose Items…→Pivot). Также вы можете выбрать готовый шаблон Windows Phone Pivot Applications. Теперь рассмотрим, как работать с ним.

Структура наполнения данными очень похожа на Panorama, но на этот раз вместо статического содержания, попробуем связать список данных с элементом ListBox, используя DataTemplates. Перед добавлением данных элемент Pivot выглядит следующим (в этом простом примере мы просто выводим список имен котов):


<controls:Pivot Height="595" HorizontalAlignment="Left" Margin="12,6,0,0" 
            Name="pivot1" Title="Мир кошек" VerticalAlignment="Top" Width="438">
    <controls:PivotItem Header="Коты">
    </controls:PivotItem>
    
    <controls:PivotItem Header="Кошки">
    </controls:PivotItem>

    <controls:PivotItem Header="Все">
    </controls:PivotItem>

</controls:Pivot>

Пока проект выглядит скучным. Оживим его при помощи данных.

Используем ListBox с DataTemplates

Для каждого PivotItems добавим элемент ListBox и внутри него определим шаблон ItemTemplate, который определяет, какие данные должны содержаться для отображения:


 <controls:Pivot Height="595" HorizontalAlignment="Left" Margin="12,6,0,0" 
             Name="pivot1" Title="Мир кошек" VerticalAlignment="Top" Width="438">
			 
     <controls:PivotItem Header="Коты">
         <ListBox x:Name="boyList" Margin="0,0,-12,0">
             <ListBox.ItemTemplate>
                 <DataTemplate>
                     <StackPanel Margin="0,0,0,17" >
                         <TextBlock Text="{Binding Path=Name}" TextWrapping="Wrap" 
						 Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                     </StackPanel>
                 </DataTemplate>
             </ListBox.ItemTemplate>
         </ListBox>
     </controls:PivotItem>
     
     <controls:PivotItem Header="Кошки">
         <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="Все">
         <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>

Поговорим о DataBinding. Вы заметили, что для каждого TextBlock значение Text определено как {Binding Name}. Создадим новый файл с классом CatsName. Чтобы элемент мог извлечь данные в список, мы пишем небольшой кусок кода (файл MainPage.xaml.cs):


public partial class MainPage : PhoneApplicationPage
{
    CatsName[] names = new CatsName[10] {
        new CatsName("Рыжик", 1, 0),
		new CatsName("Мурка", 2, 0),
		new CatsName("Васька", 1, 0),
		new CatsName("Барсик", 1, 0),
		new CatsName("Кристина", 2, 0),
		new CatsName("Мурзик", 1, 0),
		new CatsName("Томасина", 2, 0),
		new CatsName("Бегемот", 1, 0),
		new CatsName("Лиза", 2, 0),
		new CatsName("Баюн", 1, 0)};
	
	// Constructor
	public MainPage()
	{
		InitializeComponent();
        boyList.ItemsSource = from n in names
                              where (n.Gender1 == 1)
                              orderby n.Name
                              select new CatsName(n.Name, n.Gender1, n.Gender2);

        girlList.ItemsSource = from n in names
                               where (n.Gender1 == 2)
                               orderby n.Name
                               select new CatsName(n.Name, n.Gender1, n.Gender2);

        allList.ItemsSource = from n in names
                              orderby n.Name
                              select new CatsName(n.Name, n.Gender1, n.Gender2);
	}
}

Для каждого элемента ListBox мы задали ItemsSource при помощи синтаксиса LINQ, используя данные из массива CatsName. Если вы не знакомы с технологией LINQ, то вам необходимо восполнить данный пробел.

С помощью запросов мы можем сортировать коллекцию имен по своему желанию и выводить разные результаты запросов в разные секции PivotItem. Например, в первой секции мы выводим только имена котов, во второй - имена кошек, а в третьей - общий список.

Pivot

Не рекомендуется создавать слишком много секций (семи вполне достаточно), так как пользователя раздражают слишком большие списки.

Заключение

Сегодня вы познакомились с элементом Pivit, который широко применяется во многих проектах. Используйте его.

Использованные материалы

Реклама