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.
.png "Image of a FlipView control")
You can also add a context indicator control so users can jump directly to a particular item.
.png "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
| Do | 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 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't | Don't use a FlipView for large collections. Use a ListView or GridView instead. |
Related topics
Build date: 1/6/2014