Flip view

Guidelines for flip view controls

Use a flip view for browsing images in a collection, such as photos in an album or items in a product details page, one image at a time. For touch devices, swiping across an item moves through the collection. For a mouse, navigation buttons appear on mouse hover. For a keyboard, arrow keys move through the collection.

Is this the right control?

Flip view is best for perusing images in small to medium collections (up to 25 or so items). Examples of such collections include items in a product details page or photos in a photo album. Although we don't recommend flip view for most large collections, the control is common for viewing individual images in a photo album.

Examples

Horizontal browsing, starting at the left-most item and flipping right, is the typical layout for a flip view. This layout works well in either portrait or landscape orientation on all devices:

Example of horizontal flip view layout

A flip view can also be browsed vertically:

Example of vertical flip view

Adding a context indicator

A context indicator in a flip view provides a useful point of reference. The dots in a standard context indicator aren't interactive. As seen in this example, the best placement is usually centered and below the gallery:

Example of a page indicator

For larger collections (10-25 items), consider using an indicator that provides more context, such as a film strip of thumbnails. Unlike a context indicator that uses simple dots, each thumbnail in the film strip shows a small version of the corresponding image and should be selectable:

Example of context indicator

Recommendations

  • Flip views work best for collections of up to 25 or so items.
  • Avoid using a flip view control for larger collections, as the repetitive motion of flipping through each item can be tedious. An exception would be for photo albums, which often have hundreds or thousands of images. Photo albums almost always switch to a flip view once a photo has been selected in the grid view layout. For other large collections, consider a List view or grid view.
  • For context indicators:
    • The order of dots (or whichever visual marker you choose) works best when centered and below a horizontally-panning gallery.
    • If you want a context indicator in a vertically-panning gallery, it works best centered and to the right of the images.
    • The highlighted dot indicates the current item. Usually the highlighted dot is white and the other dots are gray.
    • The number of dots can vary, but don't have so many that the user might struggle to find his or her place--10 dots is usually the maximum number to show.

[This article contains information that is specific to Universal Windows Platform (UWP) apps and Windows 10. For Windows 8.1 guidance, please download the Windows 8.1 guidelines PDF .]

Related topics

Guidelines for lists
FlipView class (XAML)
CarouselPanel class (XAML)

 

 

Show:
© 2016 Microsoft