App tabs (Pivot control) for Windows Phone

Article
11/23/2015

[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]

The App Tab style is used for multiple pages of UI that users move between often. This style is particularly useful if your app is based around a single theme (for example, movies, baseball, and so on). Each page would show the user something related to the overall data that is being presented throughout the app. The App Tab style might be what makes up your complete app, or it might also be used in a subarea of your app. For example, you might have the Panorama control as the main first level of your app (as described in previous topics), and then from there have the user navigate into a subsection of your app that uses the App Tab style (using the Pivot control).

Imagine that you want an app that catalogs the movies you have in your home collection. You could use the App Tab style to provide several different filtered views of your movies. You might want one filtered view to show the movies marked as favorites of yours. Another filtered view might be just for action-type movies. Yet another filtering view could be those movies you’ve ranked in the order you’ill be watching them when you have the time. You would, of course, also want a page to view the complete list of movies with no filtering.

The following figure helps you visualize this app structure. When the app is started, you end up on one of the filtered pages. From there you can horizontally scroll through each of the pages that act like tabs in your UI.

Application Hub tabs for Outlook Inbox

Each tab could basically be a different way to filter and view data that you want presented to the user. If the hardware Back button is pressed while on any of these filtered view pages, you would exit the app.

Use an App Tab style for apps that have a central data type that you present different filtered views around.

This topic contains the following sections.

Using the pivot control as the application tab implementation

You can use the Pivot control to implement the App Tab UI style. This control allows the user to navigate right and left through each page (called a pivot page).

The Outlook Client app from Microsoft uses the App Tab style because it shows a single type of data: lists of emails with different filtering applied on each pivot page. When you look at your email Inbox with the Outlook app, you see three pivot pages—all, unread, and urgent. This makes it easy for you to see only the urgent emails if that’s what you want. That way, you don’t have to scroll through the emails in the all pivot page to find the ones that are marked urgent.

Outlook client app

Another existing app that uses the App Tab style is the Netflix app. Each pivot page shows lists of movies. The list on each pivot page is different because of the filtering that’s applied. You can compare and see how each one is unique and useful. The instant pivot page shows movies you placed in that queue to be able to watch through your streaming device when you want. The home pivot page shows movies that Netflix thinks you might be interested in. The search pivot page shows movies that match your search keywords.

Pivot pages are focused and efficient. Their primary focus is task-based action such as filtering, sorting, and showing related items. Panoramas are expansive, aggregating, and exploratory. They’re best used to promote and show recent relevant content. There are circumstances where one control is more appropriate than the other.

Netflix app

Tab-like functionality

Each pivot page is really a tab, and the tabs are listed across the top. As you can see from the Netflix app figure, the app is currently on the home pivot page and you can see that the genres pivot page is available to the right. To go to the genres pivot page, you just tap it, or pan to it.

The one difference between a tab-based app on Windows Phone and one that you might see in a desktop implementation is that with the Windows Phone tabs, you usually see the titles of only two or three of the tabs (pivot page titles) at a time instead of all of them.

Apps should minimize the number of pivot pages they have. Users can become lost if they jump from pivot page to pivot page. Try to keep the number of pivot pages to six or fewer. If you find you need more than that, then have one of the Pivot controls contain a list control with links to tap to go to other pages or another level of navigation that is itself a Pivot control. To understand if that’s what you need, see List with details drilldown for Windows Phone.

Tip

The Panorama control currently doesn’t support landscape mode, but the Pivot control does. This might be one reason to pick the Pivot control over the Panorama control. You also can move from pivot page to pivot page by tapping the pivot titles. This is something the Panorama control can’t do.

Data filtering considerations

At the beginning of this topic, we said that the best use of the Pivot control was to have each pivot page contain the same type of data, but just present a different filtering of that data. We also said that the Panorama control could be used to show pages with unrelated data on them. You could use the Pivot control in this way too if the data was essentially different, but was still all associated with one type of subject matter. For example, if you had some info to present about New York City in an app for tourists, you might have a Pivot control with a pivot page that contains interesting statistics such as location, population, and yearly tax revenue. Then you might have additional pivot pages for info such as attractions to see and another pivot page for hotels to stay at.

The ESPN ScoreCenter app is an example of the App Tab navigation model where each pivot page contains heterogeneous data that’s based around a central theme.

ESPN ScoreCenter app

Combining the pivot control within a panorama

From the home page of a Panorama control, such as that of the Facebook app, you can tap a navigation item in the list and navigate into a Pivot control. This is what happens with the profile selection from the Facebook home Panorama panel. When the user taps the profile selection, they are brought to a Pivot control that presents pivot pages such as wall, info, photos of me, and so on. In this way, you can navigate from one control to the other.

Going from the main Panorama to a Pivot control inside the Facebook app

You might be tempted to navigate from a Panoramahome panel selection to another Panorama. This isn’t a good idea—you might confuse users because it’s easy for them to forget what app they were actually in. The Panorama usually has a large stretched-out image on the background to keep users anchored as to when they’re at the top, and if they navigated to a subarea that itself was a Panorama with a new background, they would tend to get confused.

App bar in a pivot control

Since all of the data is of the same type, you can, in many cases, provide an App Bar along the bottom that has buttons that pertain to what is being shown. The Outlook app as shown in the following figure has an App Bar that’s always visible because it contains actions that users need that affect what’s being shown in some way.

Outlook client app

In the Outlook app, the App Bar can allow the same actions no matter which pivot page you’re on. You can see from the preceding figure that there are buttons to create a new email, reveal the selection boxes, switch folders, and re-sync your email. This, then, is another difference between the Pivot control and the Panorama control, because you would probably never put an App Bar along the bottom there.

Don’t assume you can keep the same buttons at the bottom all of the time unless you carefully consider what’s on each pivot page and it makes sense. Some uses of the Pivot control might not keep exactly the same type of data on each pivot page.

“Home” pivot page

You can use the initial pivot page that the user sees to present a list of all the rest of the pivot pages. This way, the user can tap one and jump directly to that pivot page instead of swiping to it. The list could also contain entries that start other apps.

You don’t need to have the user land on the home pivot page if you don’t want them to. In a movie-listing app, for example, instead of having the user land on the home pivot page, you could have them land on a pivot page that shows graphics from the latest, most popular movies. That way, the user opens to something a bit more eye catching.