Export (0) Print
Expand All

SurfaceListBox Control



With a SurfaceListBox control, users can select from a set of values that are presented in a list that is always visible. With a single-selection SurfaceListBox, users select one item from a list of mutually exclusive values.

A SurfaceListBox control provides a convenient way for users to browse and select from among a list of items.

SurfaceListBox - Example

An example of a SurfaceListBox control

Proper Usage

To decide whether to use a SurfaceListBox control, consider these questions:

  • Is there a lot of content (for example, up to hundreds of items)? Is the content typographic in nature? If so, use a vertical SurfaceListBox control.

    383d0930-b1dd-48e4-be79-c95f0b17f423

    A SurfaceListBox control is a good choice for a long list of items

  • Does the list present only a few program options? SurfaceRadioButton and SurfaceCheckBox are more suitable for a small number of program options.

    SurfaceRadioButton - Example

    A group of SurfaceRadioButton controls are a good choice for a small number of items

  • Is the content a continuous item, such as a map or large graphic? If it is, use a SurfaceScrollViewer Control.

  • Is a two-dimensional grid of content required? If it is, use a SurfaceScrollViewer Control.

Detailed Description

A user can use list boxes to select from among multiple items. A SurfaceListBox control has multiple states, to which you can easily assign different visual designs. The following table describes each state and shows the default visual design in the Microsoft Surface SDK. The table also describes the varying states of the SurfaceScrollBar portion of the SurfaceListBox control (if present).

Scrolling in SurfaceListBox can include inertia. Fast-scrolling gestures move past the release of the contact, with the view eventually stopping because of apparent friction.

The constraints of SurfaceListBox are conveyed to users through elasticity. The control eventually stops when it scrolls past the bounds of the list area. When the user lifts his or her finger off of the display surface, the view bounces back so that only the list is shown.

The following table describes the states of SurfaceListBox and shows the default visual design in the Surface SDK.

 

State Description Default visual design

Enabled

The default state for a SurfaceListBox control. A user is not in contact with the list, but it is available for input.

The visual design for this state includes:

  • A small thumb that is within the bar.

SurfaceListBox - Enabled state

Disabled

The SurfaceListBox control is not available for input. If a user contacts the SurfaceListBox control, no action is taken. You can also disable individual items in the control.

The visual design for this state includes:

A SurfaceListBox control that has been disabled

Captured

A user touched the SurfaceListBox control and then dragged his or her finger away from it. The list scrolls with a change that is equal to the movement of the finger projected onto the track. Unlike with many other controls, the user can continue to adjust the SurfaceListBox control in this state.

SurfaceListBox - Captured state

Item Pressed

When a user touches any item in the list, the item under the point of contact immediately enters its pressed state. If the contact moves up or down, the list immediately starts scrolling.

The visual design for this state includes:

  • Item under contact becomes "pressed."

SurfaceListBox - Pressed state

Item Selected

When a user presses an item and removes a finger, that item is "selected."

The visual design for this state includes:

  • The item's background color is adjusted to signify selection.

SurfaceListBox - Selected state

Scrolling

After a list enters scroll mode, the list tracks as closely as possible to the movement of the dragged touch.

Do not add physics that add lag to the interaction. If the contact moves fewer than 15 pixels and then releases, the content under the contact becomes selected. When all the contacts are released and there is still vertical movement, the list should continue at the speed that it was moving when the contacts were released. Then, the list should slow at a constant rate until it halts. Adjust the amount of friction to make the list feel natural and intuitive.

SurfaceListBox - Scrolling state

Multitouch Behavior

When users are interacting with a SurfaceListBox control, multiple inputs are accepted. SurfaceListBox consists of two separate controls: a list of items and a SurfaceScrollBar control. For more information about multitouch behavior for SurfaceScrollBar, see SurfaceScrollBar Control.

When a single contact is added to SurfaceListBox, the view starts tracking 1:1 with any movement of the contact. In SurfaceListBox, the movement is constrained to one axis so the SurfaceScrollViewer control inside the SurfaceListBox control tracks 1:1 with the contact within that constraint. When another contact is added to it, the average movement of the two contacts is transferred to the list. The same situation applies to more than two contacts. The overall movement is averaged and sent to SurfaceListBox.

Customization

If you want to change the colors of the SurfaceListBox control, you can use the methods described in Overwrite SurfaceColor Resources.

If you change the background of SurfaceListBox, keep the divider lines and Selected state. If you change the background color, try to select a color of similar value to the original so that you can ensure that the color will be visible in all color schemes.

The SurfaceListBox control, which inherits from the ListBox control, contains many nested template and default behaviors. If you modify the templates without preserving the parts and part names defined in the original templates, you might break the functionality of the control. For more guidance on modifying the look and behavior of a ListBox control, see ListBox Styles and Templates.

Design Recommendations

If you use SurfaceListBox, we recommend that you adhere to the following guidelines:

  • Make sure that text labels are legible. Follow appropriate typography guidelines when you are typesetting list box content, especially if users can freely scale or rotate the object that contains the list box. Use strong sans-serif typefaces, make list item text at least 12 pixels in height, and make sure that the text is legible from all angles and sizes. Use flat or minimally shaded backgrounds behind each SurfaceListBoxItem control to help with legibility.

  • Enable passive learning through animation to show how users can use list boxes. Animate the contents of a list box into place when it instantiates to draw users' eyes to it, and give them strong clues about how they can interact with it. If users see some content scroll out of view, flicking the SurfaceListBox control to view that content is easy to understand.

  • If you enable the scrollbar in the SurfaceListBox control, let the list of items take prominence and lead the interaction. Manipulating the list of items can provide all of the required interactivity, and the scrollbar can show the user's current position within the total list of options.

  • Design for the grow-on-touch paradigm. If you have many SurfaceListBox controls in your application, consider increasing the size of the ones being interacted with.

  • Reserve illumination, effects, animations, or other ornamentation for touch feedback or selected states. SurfaceListBox contents should have a strong visual reaction when users touch them. You can also use a somewhat accentuated state for the selected state of a SurfaceListBox control. To modify a SurfaceListBox quickly, you can use Microsoft Expression Blend 4 to quickly change properties for the states and triggers that are already established for the control.

Alternate Designs

Many of the same design patterns that are described in the SurfaceCheckBox Control and SurfaceRadioButton Control topics also apply to list boxes.

Examples

In a SurfaceListBox that is hiding the scrollbar, a single touch will select a list item, but a drag gesture will scroll the list without selecting the item under the point of contact. This prevents inadvertent selection while scrolling.

For example, in a music application, you might have a ScatterViewItem that corresponds to an album. The ScatterViewItem might have to be a square in order to display album art. When the ScatterViewItem is touched, it could flip over to display the song list in a SurfaceListBox control. If the user touches one of the songs, the song starts playing. However, if the user wanted to scroll through the list, he or she could drag any item without causing that new song to play.

SurfaceListBox scrolls on drag, selects on tap

SurfaceListBox controls scrolling when dragged and selecting an item when tapped

Did you find this information useful? Please send us your suggestions and comments.

© Microsoft Corporation. All rights reserved.
Show:
© 2014 Microsoft