Using the Pivot Control - Page 2

by kirupa  |  22 November 2010

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

In the previous page, you received an introduction to the Pivot control and how to create a new project in Expression Blend with the Pivot Control already inserted for you. In this page, you will learn how to customize it with your own content.

Before we proceed, keep in mind that your Pivot control is simply an empty shell. What makes it actually interesting are the children it contains, and these are the individual PivotItems that make up the content and header of your Pivot control. In the following sections, you will learn how to modify your overall Pivot control by changing what your PivotItems are actually doing.

Adding a Pivot Item
To add more PivotItems, right click on your Pivot control and select Add PivotItem:

You can right click on the Pivot control on your Objects and Timeline panel or in an empty region of your Pivot control where a PivotItem isn't selected to get the context menu with the Add PivotItem command displayed.

When you select Add PivotItem, a blank Pivot item will be created for you with a Grid control already in place:

You can now start populate this PIvot item without having to do anything extra either!

Deleting a Pivot Item
This is pretty straightforward, so I am not going to dwell on it too much. To delete a Pivot item, select it in the Object Tree and press the Delete key or right-click and choose Delete from the right-click menu that appears:

Changing the Header Text
By default, your PivotItems will have awesome header text values like item1 and item2:

To make these values even more awesome, you probably want to change it. To change the header text displayed by a PivotItem, modify its Header property. You can find the Header property in the Common Properties category of your Properties Inspector when a PivotItem is selected:

Changing the Title
Your Pivot control has a title that floats above all of the PivotItems:

To change the title displayed, select your Pivot control and change the Title property:

Because of where your Pivot control's Title appears, users may associate it as your application's title, so be cognizant of that when you are specifying a title.

Adding a Pivot Control
In this article, I only showed how to use the Pivot control when it comes attached as part of the project template that sets everything up for you. If you have an existing application, you probably want to add a Pivot control without having to create a new project.

Fortunately, that is actually quite easy. Launch your Assets Library and search for Pivot:

You will see your Pivot control, and you can insert it just like you would any other control.

That is all there is to using the Pivot control. While the actual functionality of the control is quite elaborate, the things you need to do to use it in your own applications is quite minimal. And that's how it should be!

Got a question or just want to chat? Comment below or drop by our forums (they are actually the same thing!) where a bunch of the friendliest people you'll ever run into will be happy to help you out!

When Kirupa isn’t busy writing about himself in 3rd person, he is practicing social distancing…even on his Twitter, Facebook, and LinkedIn profiles.

Hit Subscribe to get cool tips, tricks, selfies, and more personally hand-delivered to your inbox.


 1 | 2

SUPPORTERS:'s fast and reliable hosting provided by Media Temple.