Pivot Control
In addition to the Panorama control, there is another phone-specific control called a Pivot control. The Pivot control is also used to show multiple sections, but the Pivot control can handle a larger number of items than the Panorama
control. The chief reason for this is that a pivot section takes the
entire width of the page instead of having overlapping sections. For
example, the phone’s Search page uses a Pivot control, as shown in Figure 4.
Figure 4. Pivot control
In the Pivot control, there are labels at the top of the page to show both the currently selected section (#1 in Figure 4)
and other pages that are not currently selected (#2). The currently
selected section is usually white with the other sections gray to
indicate a difference between the sections. The Pivot
control will show the currently selected section’s title always at the
top left and scroll the rest of the labels to the right (and off the
screen typically). The user switches between sections by swiping left or
right or by pressing on the section headers to go to that section
automatically. As the section is changed, the content area (#3) is
changed to reflect that change.
The Pivot control is in the same assembly and namespace as the Panorama control (Microsoft.Phone.Controls), so adding a reference to the assembly and XML namespace is required as you saw earlier for the Panorama control. Building a Pivot control in XAML is similar to building a Panorama control in that the Pivot control can take one or more PivotItem elements, like so:
<ctrls:Pivot>
<ctrls:PivotItem Header="first">
<ListBox />
</ctrls:PivotItem>
<ctrls:PivotItem Header="second">
<ListBox />
</ctrls:PivotItem>
<ctrls:PivotItem Header="third">
<ListBox />
</ctrls:PivotItem>
<ctrls:PivotItem Header="fourth">
<ListBox />
</ctrls:PivotItem>
</ctrls:Pivot>
Like the PanoramaItem element, the PivotItem uses the Header property to specify the label on top of the Pivot control. Note that the Pivot control does not support a Title attribute as the Pivot usually does not have a title above the entire page. The preceding XAML results in the page shown in Figure 5.
Figure 5. Pivot control in action
As the user clicks on the headers or swipes, she can go to the other sections. As with the Panorama
control, the sections loop, so when the user is on the last section,
the first section is to the right of the last page, as shown in Figure 6.
Figure 6. Looping pivot sections
