Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

Guidelines for flip view controls

Applies to Windows and Windows Phone

A sample of what a standard flip view control looks like

Description

The flip view control lets people flip through views in an app or through a collection of items, like photos in a photo album, one at a time. It offers people a way to look at each individual item while navigating through the collection.

Example

A screenshot illustrating the standard flip view control

Is this the right control?

The flip view control lets people flip through views or items one at a time. Flip buttons appear on mouse hover and let people flip to the next or previous item.

Image of a FlipView control

You can also add a context indicator control so users can jump directly to a particular item.

Image of a context indicator with a FlipView control

Dos and don'ts

  • Use a flip view control to:
    • Flip between items in a small collection ( < 10) of related items. For example, in a shopping app, you might want to show several images of a product in a product details page. You can use the context indicator control for a small collection, but this is often not necessary.

    • Flip between items in a medium-sized list (10 to 25 ) of related items. For example, in a real estate app, you might want to show a number of images of each house, showcasing the rooms and views. For these medium-sized lists, include a context indicator control, like a filmstrip of thumbnails, that lets users to jump to specific photos.

    • Flip between views of an application. For example, an app launcher can have one view that shows a user's favorites in a grid and another that shows the favorites in a list. You can add a flip view control to let users navigate from one view to another.

  • Use a context indicator when the items in the collection don't provide enough contextual information to help users know where they are in the collection. A flip view for days of the week would not need a context indicator, whereas a flip view for product images would.

  • Give users an indication of where the current item is in the collection. Use a context indicator to help users know how large the collection is and where the current item is in relation to the others in the collection.

  • Tailor the indicator for the number of items and the specific scenario. For small collections, you can show the entire collection in the context indicator. For medium-sized collections, you might want to show only 5 at a time, for example. For purely visual collections, you might display thumbnails; for text-based collections, you might prefer to display the alphabet so users can jump to the right letter.

  • Allow users to jump to specific items. Make sure you always help users feel in control of where they are and where they want to go.

  • Don't use a flip view control for large collections. The repetitive motion of flipping through each item becomes tedious for users. Instead, use one of the following:

Related topics

For designers
Guidelines for ListView controls
For developers (HTML)
Adding FlipView controls
Quickstart: Adding a FlipView
WinJS.UI.FlipView object
For developers (XAML)
Adding FlipView controls
Quickstart: Adding a FlipView
FlipView class

 

 

Show:
© 2014 Microsoft