Common Controls

The Microsoft® Windows® common controls include: balloons, check boxes, command buttons, drop-down lists, group boxes, network address controls, links, list boxes, list views, progress bars, radio buttons, sliders, static text, tabs, text boxes, tooltips, and tree views.

New in Windows Vista

Windows Vista® common controls have these new features:

  • A new look provided through the Aero theme.
  • Hover states, which allow for rest states that are simpler and less visually distracting.
  • Cross-fading between states for a subtle, smooth feeling during interaction.

Also, the list view control has new capabilities to present files in rich, flexible ways, including thumbnails. List views also allow for editing items in place.

Why are these changes important?

The common controls are the building blocks for the Windows user interface (UI).

Summary of control changes

The Windows Vista common controls have many changes to improve their usability and flexibility.

Static text

Updated look.

For guidelines, see Control labels.

Aa511292.CommonControls01(en-us,MSDN.10).png

Command buttons

Updated look and cross-fade support.

For guidelines, see Command Buttons.

Aa511292.CommonControls02(en-us,MSDN.10).png

Check boxes

Updated look and cross-fade support.

For guidelines, see Check Boxes.

Aa511292.CommonControls03(en-us,MSDN.10).png

Radio buttons

Updated look and cross-fade support.

For guidelines, see Radio Buttons.

Aa511292.CommonControls04(en-us,MSDN.10).png

Links

Updated look. Also, not underlined by default, but hover has a solid background color.

For guidelines, see Links.

Aa511292.CommonControls06(en-us,MSDN.10).png

Command links

Command links are a new control that present options to the user with links instead of command buttons or radio buttons. They are the preferred approach when longer labels are needed to help users make informed choices. They also reduce the number of clicks required to make choices.

Aa511292.CommonControls07(en-us,MSDN.10).png

Some details:

  • Has a button-like appearance on hover.
  • Can specify the default icon or a custom icon.
  • Can specify optional note text to provide additional information about the option.

For guidelines, see Command Links.

Drop-down lists

Updated look, gradients in read-only state, and cross-fade. Non-editable drop-down lists are visually distinct from editable ones. Also, text highlight and drop-down arrow are flush against border.

For guidelines, see Drop-Down Lists and Combo Boxes.

Aa511292.CommonControls08(en-us,MSDN.10).png

List boxes

Updated look and cross-fade support.

For guidelines, see List Boxes.

Aa511292.CommonControls09(en-us,MSDN.10).png

List views

List views have been significantly enhanced for Windows Vista.

Details view with small icons.

Aa511292.CommonControls10(en-us,MSDN.10).png

Tiles view with medium icons.

Aa511292.CommonControls11(en-us,MSDN.10).png

List view with small icons.

Aa511292.CommonControls12(en-us,MSDN.10).png

Icons view with large icons.

Aa511292.CommonControls13(en-us,MSDN.10).png

Enhancements:

  • Updated look.
  • Properties may be represented with rich metadata controls.
  • Users can change properties directly within control.
  • Enables users to see more properties for a smaller set of items at a time, without requiring awkward horizontal scrolling.
  • Supports scaling icons/thumbnails between a small size appropriate for viewing a long list, and a large size that makes it easy to recognize files visually or look at visual content in an efficient way.
  • Supported views are Details, Tiles, Extended Tiles, and Icons. "Thumbnails" view is deprecated because every view can now show thumbnails. "List" view is also deprecated: at small icon sizes, Icons View shows small icons with labels adjacent to them.
  • Extended Tiles View is an extension of Tiles View, optimized for showing detailed information about a small set of items.
  • There is a hover state when hovering over items, with cross-fade animation.
  • There is a new view control for switching between view modes.
  • Other details include rollover and hover states that provide a view that looks interactive and responsive, and the themed transparent selection rectangles.

For guidelines, see List Views.

Tree views

Updated look, glyph fade in/out on mouse hover, expand/collapse node transition animation.

For guidelines, see Tree Views.

Aa511292.CommonControls14(en-us,MSDN.10).png

Tabs

Updated look and smaller size.

For guidelines, see Tabs.

Aa511292.CommonControls15(en-us,MSDN.10).png

Sliders

Updated look.

For guidelines, see Sliders.

Aa511292.CommonControls16(en-us,MSDN.10).png

Progress bars

Updated look, sub-states (complete, paused, stopped/error to give users additional feedback on an operation), animated during progress, round corners, and cross-fade.

For guidelines, see Progress Bars.

Aa511292.CommonControls17(en-us,MSDN.10).png

Group boxes

Updated to support themes.

For guidelines, see Group Boxes.

Aa511292.CommonControls18(en-us,MSDN.10).png

Text boxes

Updated look and cross-fade support.

For guidelines, see Text Boxes.

Aa511292.CommonControls19(en-us,MSDN.10).png

Tooltips

Updated look, support for icons.

For guidelines, see Tooltips.

Aa511292.CommonControls20(en-us,MSDN.10).png

Balloons

Updated look.

For guidelines, see Balloons.

Aa511292.CommonControls21(en-us,MSDN.10).png

Network address controls

The new Network address control can be used to input and validate IPv6 and IPv4 addresses. It also supports:

  • IP address copy and paste. Any address, including shorthand IPv6, can be entered directly in the box.
  • Users without any awareness of protocols. Users don't have to understand address types (IPv4 vs. IPv6) or formats.
  • Input of friendlier DNS names in place of IP addresses.
  • Input modes that require specific address types (example: IPv6 only)
  • Address "business logic" that is separate from the control to keep maintenance to a minimum.

The control looks like a normal text box to allow simple copy and paste, except empty controls have an "IPv4, IPv6, or DNS name" prompt:

Aa511292.CommonControls22(en-us,MSDN.10).png

When users enter incorrect addresses, however, the difference between the network address control and a text box becomes clear:

Aa511292.CommonControls23(en-us,MSDN.10).png

For more information

Guidelines feedback

Page view tracker