Guidelines and checklist for FlipView controls (Windows Store apps)

The FlipView 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.

Roadmap: How does this topic relate to others? See:

Is this the right control?

The FlipView 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

Use a FlipView 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 FlipView control to let users navigate from one view to another.

Don't use a FlipView control for large collections. The repetitive motion of flipping through each item becomes tedious for users. A ListView or GridView control is a better choice

Dos and Don'ts

DoUse 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 FlipView for days of the week would not need a context indicator, whereas a FlipView 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'tDon't use a FlipView for large collections. Use a ListView or GridView instead.





Build date: 1/6/2014