Today i am releasing the first preview of the Pivot Control for Windows Phone 7.
Like the Panorama Control, this is intended to be a sample code you can re-use in your own Windows Phone app, or as a learning experience for Silverlight (that’s my case).

So, what is a Pivot control ?

I guess you’re all familiar with the Tab Control concept. If not, here’s a quote from the MSDN documentation of the Win32 Tab Control:

“A tab control is analogous to the dividers in a notebook or the labels in a file cabinet. By using a tab control, an application can define multiple pages for the same area of a window or dialog box. Each page consists of a certain type of information or a group of controls that the application displays when the user selects the corresponding tab.”

Well, a Pivot Control is very similar to that, except for navigation. There are two ways to navigate from one page to another : you can either click the page’s Header, or simply flick through the pages.

pivot-ctrl

The control

The PivotControl was built using the exact same paradigm as the PanoramaControl. It derives from the ItemsControl class, provides it’s own UI and navigation system. You can assign it a Title, although this is completely optional if each page also specifies a Title.

Each section of the control is called the PivotItem. The PivotItem has a Header and a Title. When a PivotItem is selected, its Title will replace the main control’s Title (on the top) and also animate the Headers list. The selected PivotItem’s Header will then move to the left of the screen, and it’s template will change to highlight the selected PivotItem.

pivot-ctrl-layout

Using the control

Each PivotItem has a (implicit) Content property. This is where you integrate your own group of controls.

Just like the PanoramaControl, the design-time experience here is far from perfect. You’ll probably be better off populating the control in XAML directly.

pivot-ctrl-xaml

Contrary to the PanoramaControl, i believe that there are many scenarios where the PivotControl will be populated dynamically by code.
This is the case for applications that need to show a variable number of pages that share the same layout (but not only). A good example for this is a Weather forecasting application : you can choose to show forecast data for a variable number of cities, but each page will be built using the same structure.

The way to achieve this is by creating a empty PivotControl using XAML, and then create and populate the PivotItems by code as shown below.

pivot-ctrl-code

Navigation

As i described above, the Header portion of the PivotItem is sensitive to clicks so one way to navigate from one page to another is to click the Header.
Now, depending on the number of PivotItems or the size of the header’s text, you may not see your target Header : you need another way to switch pages.

You probably expect the PivotControl to support flicking directly inside the PivotItem. Well, that’s what it does ! Flick left, flick right, flick through the end and cycle back to where you started.

I am aware of at least one animation bug in the current implementation. I’m still tracking it down, and will follow through every bug report you file here.

Sample WeatherForecast application

The screen captures in this blog post are from a sample application i’m building called WeatherForecast. As its name suggests this is a weather forecasting application (what a surprise !).

weather_app

I chose to build a weather forecasting app as a sample, because it is a concept that everyone understands and it allows me to create PivotItems dynamically. Right now, the application is incomplete and only shows fake data. But i do plan to complete it shortly, and will write a series of blog posts as a tutorial for writing a Windows Phone 7 app using the PivotControl.

On a side note, the weather web services i’m using are from World Weather Online, weather forecast and weather content provider. I think that their weather icons blend quite smoothly with the Metro design language.
Go to their web site to request a API Key, if you want to call their services.

What’s next ?

  • I haven’t had much time to debug the PivotControl yet. As a consequence, i do expect a number of UI or reliability bugs to pop-up. If you find a bug, please make sure you file it here. If you find a workaround or manage to fix it somehow, also make sure that you share the information in your bug report as well.
  • I’ve had lots of fun writing these controls, and will continue the effort. If you find them useful, please let me know by sending me an email or dropping a comment below. Also send me a link to your project, i’m really excited to see what type of apps you guys will be building with these controls.
  • Again, these controls aren’t the official Microsoft Panorama and Pivot controls.

In case you’ve missed it, here’s the link to the Windows Phone 7 Panorama & Pivot controls sample projects.

Cheers
-stephane