Guidelines and checklist for combo box and list box controls (Windows Store apps)
This topic describes best practices for adding combo boxes and list boxes to your Windows Store app.
Roadmap: How does this topic relate to others? See:
Is this the right control?
Use a ComboBox or ListBox control to let users select one or more values from a set of items that can be adequately represented using single lines of text.
Don't use these controls to display items that contain multiple lines of text or images. Use a ListView instead.
When there are fewer than eight items, consider using radio buttons (if only one item can be selected) or check boxes (if multiple items can be selected) instead.
Choose the right control
When to use a combo box
A ComboBox control conserves on-screen space by showing only the currently-selected item. Users must tap a faceplate, which opens a flyout, to see other selectable items. Users can select only one item at a time.
Use a combo box when the selection items are of secondary importance in the flow of your app.
If the default option is recommended for most users in most situations, showing all the items by using a list box might draw more attention to the options than necessary. You can save space and minimize distraction by using a combo box.
Use a combo box when you need to save space.
Use the ComboBox control’s flyout list to conserve on-screen real estate. The flyout list lets you provide users with a variety of choices but uses a small footprint.
When to use a list box
A ListBox control is always open and displays all its items without any additional interaction. It supports both single selection and multiple selection.
When using a ListBox, set the control's size so that it is large enough to display all its items without the user having to pan or scroll.
Use a list box when there are fewer then 10 items and the items are important enough to display prominently.
Use a list box for multi-selection.
If there are fewer then 10 items and they should be prominently displayed, use a list box. If you have more than ten items and want to enable multi-selection, use a ListView.
Here's an example of an appropriate use of the ListBox control:
In this example, there are only a handful of different fruits to choose from. They are simple items, but they’re also an important aspect of the app itself. By using the inline mode, the selectable options are visible at all times.
.png "List box control.")
Do's and don'ts
| Do | Add padding of 27 pixels on the right side of your content to keep the scrollbars from overlapping the content. |