31 Days of Windows Phone | Day #17: The Pivot Control

This post is Day #17 in a series called the 31 Days of Windows Phone.

Yesterday, we talked about the Panorama control, how to use it, and what it’s purpose is.  Today, I’m going to cover a similar, but different control called the Pivot.

What is a Pivot Control?

I view Pivot controls as a great control for giving your user different “slices” of the same data.  For example, in the Calendar on Windows Phone, you can flip between the “agenda” and “day” views.  They present the same data, but in two completely different views.  Another great way to use the Pivot control is to use it to categorize items into different buckets.  The Settings are a great example of that on the phone as well. You have settings for the system, and settings for specific applications. Here’s a quick glance at those examples:

calendar   systemsettingsscreenshot

Are there specific times I should use Panorama vs. Pivot controls?

Yes, there absolutely are.  And there are two great places you can read/watch more about this.  Tim Heuer wrote a great article specifically about when you should use each control, and there’s also a great video on Channel 9 from the Windows Phone Design Days Series.

My guidelines are pretty simple:

  • Use a Panorama as an introduction to everything that is interesting about your application.
  • Use a Pivot when you want to show the same data in different ways to your user.

Using The Pivot Control

If you didn’t read yesterday’s post on the Panorama control, check it out.  I walk you through exactly how to get the Panorama and Pivot controls into Visual Studio 2010’s Toolbox.  For now, we’re going to dive directly into the structure of a Pivot control, and how to use it.

The structure is very similar to the Panorama, but in today’s example, instead of static content, I’m also going to bind a list of data to our ListBox control, using DataTemplates to do it.  Here’s my base Pivot control before I add any content to it (this sample application displays lists of baby names, based on gender):

<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>

Obviously, this doesn’t get us much without some data.  Let’s do that next,

Using ListBoxes with DataTemplates

For each of my PivotItems, I am going to add a ListBox control, and inside it, I’m going to define an ItemTemplate that defines what each data entry should look like.  Here’s the XAML I’ve added:

<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>

One thing we haven’t talked about much in this series is DataBinding.  You’ll notice that for each TextBlock, the Text value is defined as “{Binding Name}.”  What this means is that for whatever object I pass into this ListBox, the TextBlock will use the object’s Name property to populate it’s Text value.  To get this data into the ListBox, we have to write a little code in our code-behind file (this is the entire contents of 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 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);
		}
	}
}

You’ll see that for each ListBox, I’m defining the .ItemsSource using some simple LINQ syntax against my array of BabyName objects.  If you’re not familiar with LINQ, you’ve been missing out on Language Intergrated Query.  There’s a great list of resources on LINQ here.

By defining these queries, I’m able to simply sort and parse my collection of data, and assign different collections of the same data to each of the PivotItem sections.

So that’s about it!  You shouldn’t generally use more than 7 sections in a Panorama or Pivot control (if you are, you might want to think about doing it differently…), primarily because that’s the most that your users will be able to remember.  If they don’t remember it’s there, it’s unlikely they’ll use it, right?  (7 has been a well-known memory limit for humans, which is why phone numbers are the same length.)

Download the Code

This was a simple example of how to implement a Pivot control in Windows Phone 7, using actual data to populate ListBoxes.  Please download it and learn by playing with it.

download

6 thoughts on “31 Days of Windows Phone | Day #17: The Pivot Control

  1. Is it possible to DataBind the PivotItem itself? I've got data that is grouped by time (8:00AM, 9:15AM, 10:30AM, etc) and would like a PivotItem for each time and then a ListBox on each PivotItem that contains the items in the time group.

    Workable? Or should I be looking at another option?

    The timing of your series for me has been perfect.

  2. Check out the training kit on msdn. It has a lab that shows how to data bind the pivot control.

  3. Really i appreciate the effort you made to share the knowledge.The topic here i found was really effective to the topic which i was researching for a long time.

  4. Above all, I would teach him to tell the truth … Truth-telling, I have found, is the key to responsible citizenship. The thousands of criminals I have seen in 40 years of law enforcement have had one thing in common Every single one was a liar.

  5. We rarely think that people have good sense unless they agree with us.

  6. Forty is the old age of youth fifty is the youth of old age.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s