List with details drilldown for Windows Phone

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

If your app needs to display a list of items from which users tap to view detailed info, you want to use this style. You would present a master list of items on a page from which the user selects one and drills in. This master list can display as much info as you want for each item. It may be everything from a simple text list to a list of images, or a combination of the two.

In this simple navigation model, there’s no need for a Pivot or Panorama control. The app simply presents a page at startup with the list on it. For example, an app that lists winners of the Nobel Peace Prize could follow this model. Each entry in the list could have the person’s picture, name, and country or region. A tap on any person’s info would bring up to the details page for that person.

Tip

Using a List with Details Drilldown style for apps that have a user-selectable set of items allows for a lot of info to be scrolled through.

The Messaging app that ships with the Windows Phone uses this navigation model. The app opens and shows you a list of the conversations you’ve been involved in. There are no other pages to pan to. From there, you can tap a conversation, and you navigate to a page that shows each individual message that went back and forth.

Messaging app

The following figure shows an app of this model type that has images and text in its list.

The World Factbook app

Mixing models

You will likely place this navigation style inside one of the other main navigation styles. A page with its list and drilldown capability could exist as one of the pages of a Pivot or Panorama control. This is the case with the Project Emporia app. When it opens, by default, there are two available pivots in its Pivot control—top stories and world events. Each of these pages uses the model of navigation where you have a list of items that the user can select from to drill down into to reveal the details.

Project Emporia app