Using the Pivot Control - Page 1

by kirupa  |  22 November 2010

  Have questions? Discuss this Windows Phone tutorial with others on the forums.

Do you know what is awesome? The Pivot control...and possibly Bono! On Windows Phone 7 applications, navigating through content is something you will spend a fair amount of time doing. To help with navigating through content in a touch-friendly fashion on a small-sized screen, one of the controls you have at your disposal is the Pivot control.

Before going further, let's take a look at the following video where the Pivot Control is being used to navigate between sections of my application:

The Pivot control is awesome because it takes something you are probably familiar with and enhances it in an appropriate way. At a certain level, as you could tell from the video, the Pivot control is nothing more than the equivalent of a Tab control. Just like a Tab control, you have headers that correspond to some content. The content you see depends entirely on which header is actually selected. The notable difference, besides looking very stylish, is that the Pivot control goes beyond the simple gestures of the Tab control with pan/flick support.

In this tutorial, you will learn how to use the Pivot control in your own applications using Expression Blend.

Getting Started
Make sure you have everything needed to get up and running with building Windows Phone applications.

Launch Expression Blend and create a new Windows Phone application. Click on the New Project button or go to File | New Project to bring up the New Project dialog. Make sure to select the Windows Phone node under Project Types:

You will see a list of project templates that you can choose from. Select the one that says Windows Phone Pivot Application:

Once you have selected the pivot application template, give your application a custom name (if you want) and press OK to close this dialog and to create your new project.

Because you selected the Windows Phone Pivot Application template, your project starts of with a pivot control and some pivot items already there for you. Here is what your artboard looks like:

You can view the individual pivot items by expanding your object tree until you see them:

Ok, now seems like a good time to take a short break. In the next page, you will learn how to customize your Pivot control to suit your own needs.

Onwards to the next page!


 1 | 2




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.