Guidelines for Pivots (Windows Phone Store apps)

Applies to Windows Phone only

Windows Phone app: a pivot control with pivot items

Windows Phone app: a pivot control with pivot items

Description

The pivot control is a full-screen container and navigation model that also provides a quick way to move between different pivots (views or filters), typically in the same set of data. For example, an email app using a pivot control might list all emails in the first pivot item (or view), and then filter the same list into unread, flagged, and urgent emails in the other pivot items.

Dos and don'ts

  • Use themes to override the default appearance of a pivot control.
  • The pivot control wraps from the last pivot item to the first and vice versa. Use this effect to properly design the flow of your app.
  • Use no more than four or five pivot items in a pivot control for performance reasons and also to limit the chance of the user becoming lost. Use pivot controls sparingly and limit the use of pivot items to scenarios where it’s appropriate for the experience.
  • Use the pivot control to only display objects or data of similar type (for example, filtered views of the same data).
  • Limit pivot item header text to a maximum of two words, both to provide the user a visual clue about the existence of the next pivot pane and to help with localization.
  • Don't use the pivot control for task flow (exposing radically different tasks). Different pivot items should flow seamlessly (look and feel), and moving between them shouldn’t change the user’s activity drastically (for example, one page to filter mail and another to view pictures).
  • Don't remove an empty pivot item while user action could cause info to be added to it. For example, if there are currently no unread emails, don’t remove the Unread email pivot item, because synchronizing could cause some to appear. Instead, show placeholder content such as ‘No unread messages’.
  • Don’t use a pivot control inside a hub control or vice versa. And don’t place a pivot control inside another pivot control. You can, however, have an object inside a hub section link to a pivot control, and vice versa.
  • Don’t use controls that can pan or scroll inside a pivot control. For example, putting a map control inside a pivot item can make it difficult to use the pivot control. The gesture input gets confused. For example, if you have a slider and try to slide it left and you’re in an item of a pivot control, it’s unclear whether you want to move to the neighboring item or move the slider. The solution for a control that needs gesture input is to put it in its own page and navigate to that. You can place a gesture-disabled control in a pivot item—perhaps a map. You could overlay a button that activates the map. Pressing or tapping the button would navigate to a different page containing just the map. The user could then press the Back button to go back to the pivot item.
  • Never use a text input box within a pivot item. Doing this interferes with the left-to-right flick and pan gesture interactions.

Additional usage guidance

Use the pivot control for filtering large data sets, viewing multiple data sets, or switching app views. Your app can look and react like the integrated Windows Phone pivot experiences.

Appearance and action

The pivot control hosts a set of pivot items (or views) arranged horizontally next to each other. The control enables the user to slide or flick horizontally to advance to the next or previous pivot item.

The pivot has built-in support for the following touch interactions:

  • Horizontal slide (touch and drag left/right)
  • Horizontal flick (touch and flick quickly left/right)

Controls hosted in a pivot item continue to be interactive, as usual—for example, links can be tapped and lists can be scrolled vertically.

Navigating between pivot items

Control description

The pivot control is a host, or container, for pivot items. Each pivot item can in turn contain any content such as layout panels, controls, and links. For more info about pivot control architecture, see Pivot control architecture for Windows Phone.

Parts of the pivot control (pivot title, pivot item headers, and so on)

Parts of the pivot control (pivot title, pivot item headers, and so on)

Related topics

For designers
Pivot control for Windows Phone
For developers (XAML)
How to create a pivot app for Windows Phone
Pivot class
PivotItem class

 

 

Show:
© 2014 Microsoft