Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Pivot Applications for Windows Phone 7

DZone's Guide to

Pivot Applications for Windows Phone 7

· Mobile Zone
Free Resource

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

If you used the Zune player from Microsoft or Windows Media Center, then I am pretty sure that you've seen the Pivot control in action more than a couple of times. If not, just follow me through this article.

With the latest release of Windows Phone 7 SDK (which is now in its final build) developers are able to create applications that are defined by two new application types – Pivot and Panorama, bot based on controls named the same as the application type. In this article, I am going to cover some of the aspects of developing Pivot-based applications, trying to show what it’s about and in what situations it might be useful.

You will need the final build of Windows Phone 7 Developer Tools installed in order to follow my examples. If you already have it installed, then simply launch Visual Studio 2010 and create a new Pivot application for Windows Phone 7:

Once the project is created, you will see that it is not much different compared to any other Windows Phone 7 application – you’ve got the same project structure, the same XAML layout – but with one significant difference. Now, instead of a secondary Grid control, you’ve got a Pivot control:

The Pivot control allows you to have multiple Pivot items, that in fact are separate panels, that are switched on swipe or pivot item selection. To give you an idea of how it works, I created this short video showing the Pivot control in action on a Windows Phone 7 emulator.

A Pivot control doesn't necessarily have to be used in the context of a Pivot application. You can use it in any Windows Phone 7 application, as long as you have the proper control namespace referenced. So let's look closer at the structure of the control by trying to use it in a non-Pivot application.

First of all, add a reference to Microsoft.Phone.Controls:

Now, on the page where you want to use the Pivot control, you have to declare the XML namespace for it, therefore in the page header, make sure you add this xmlns reference:

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

Now on yor page, you can create an instance of the Pivot control:

<controls:Pivot>

</controls:Pivot>

By itself, it isn't really useful - you need actual content that is displayed in various sections. The Pivot control is basically dependent on its descendants (child elements) - PivotItem instances. PivotItem is a member of the same namespace as the Pivot control itself, therefore already inside the Pivot control you can create multiple PivotItem instances:

<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 instances also are meaningless on their own, so you will have to set some additional properties to make them work. If you looked through the video mentioned above, you've seen that there are specific headers tied to each switcheable panel. Those are defined by the Header property for each PivotItem instance. I set the Header property for each PivotItem instance (mentioned above) and my XAML representation didn't suffer many changes:

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

However, now I can see that there are separated panels dedicated for specific content in my Pivot control:

Of course, every PivotItem can have content present inside it. This can either be set via the Content property or by simply inserting a component in between PivotItem tags. Here is an important thing to remember - you can only set the Content property once, therefore this code will be invalid:

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

The Content is set to the TextBlock and then once again to Image. In case you want to have multiple controls, you will have to put them inside a container, like Grid. That being said, this code is valid:

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

For experimentation purposes, I inserted a Grid in each PivotItem present, the Background being set to the color that corresponds to the name (just to show how it works). The XAML for this is pretty basic:

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

The outcome looks like this (obviously, I could not show sliding animations here): 

Switching between PivotItem instances can also be done in the code-behind. In order to do this, you would need to set x:Name both for the main Pivot control and for any subsequent PivotItem that will be accessed from code-behind. Once every control has a unique identifier, you can set the Pivot.SelectedItem property to a PivotItem instance.

PivotControl.SelectedItem = PivotItemInstance; 

As you can see from this article, the Pivot control can be used when the user faces several content blocks grouped by a similar criteria. So what would be some real-world examples of situations where the Pivot control can be used? Here is just a couple of them:

  • Settings - the user is able to change different settings that apply to different parameter groups (e.g. music playback, album art size etc.)
  • Search results - a pretty interesting example is shown by Kirupa Chinnathambi here
  • Radio streams - if you develop a streaming application, the user could switch between stations by simply sliding the panels.
There could be hundreds of similar examples and I am pretty sure that developers can use the Pivot control pretty much in any application - it makes the navigation easy and fast (rather then switching between pages in some cases).

Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.

Topics:

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}