Windows CE supplies a set of controls that you can use to build an application. Controls commonly appear in dialog boxes, but they can also appear on toolbars and command bars. Windows CE supports many predefined controls, which can be divided into two categories: window controls and common controls. Window controls send the WM_COMMAND message and include buttons, check boxes, radio buttons, push buttons, group boxes, combo boxes, edit controls, list boxes, and static controls. Common controls send the WM_NOTIFY message and include all other controls. They are divided into the following sub-categories: foundation controls, file controls, scale controls, informational controls, and miscellaneous controls used for specific Windows CE–based platform features.
Due to the large number of controls available in Windows CE, determining which control to use in a specific situation can be difficult. When choosing a control, you must consider the type of input you are trying to capture, the abilities and limitations of the control, and the characteristics of your platform's screen. The following table shows all predefined Windows CE controls and their uses.
Control |
Description |
Use |
| Check box | A two-part control consisting of a square box and text options. Each option acts as a switch that can be turned on and selected or turned off and cleared. When an item is turned on, a check mark appears within the square box; otherwise, the square box is empty. A user can select more than one option in a group of check boxes. | When setting properties, attributes, or values.
When more than one choice can be selected. When ample screen space is available. When options do not change. |
| Radio button | A two-part control consisting of a small circle and text options. When an option is selected, the circle appears highlighted or filled. Only one option can be selected at one time in a group of radio buttons. | When setting properties, attributes, or values.
When only one choice can be selected. When ample screen space is available. When options do not change. |
| Push button (command button) | A square or rectangle with a text or graphic label inside. When chosen, an application immediately performs the associated action or command. | To perform an action.
To display a menu or window. To set a condition or property value. When ample screen space is available. |
| Group box | A rectangular frame that surrounds a group of controls. | To visually separate and relate groups of controls.
To visually relate elements within a window. |
| Combo box | A control possessing the characteristics of both an edit control and a list box or drop-down list box. Information can be either typed into the edit control field or selected from items displayed in the list box. | When options are large in number and not frequently selected.
When the list of options can change. When only one choice can be selected. To capture unlisted data. When users prefer to type information rather than select it in a list. When a form of input is available. |
| Drop-down list box | A rectangular box with an arrow button on the side. When the arrow button is selected, the box displays a hidden list of items that seems to drop down from a single item. If the list exceeds the box boundaries, scroll bars appear, enabling a user to view the remaining list. | When only one choice can be selected.
When screen space is limited. When options are many and not frequently selected. |
| Edit control | A rectangular box in which information can be entered by the user or in which information is displayed for read-only purposes. Edit controls typically contain captions and can be designated as either single-line or multiple-line. | When options are difficult to categorize and vary in length.
When an input method is available. When providing a list of options is not feasible. |
| List box | A rectangular box containing a list of items from which either a single selection or multiple selections are made. Lists can contain either text or graphics. If the list exceeds the boundaries of the box, scroll bars appear, enabling a user to view the remaining items. | When options are large in number and not frequently selected.
When screen space makes radio buttons or check boxes impractical. When the list of options might change. When ample screen space is available. |
| Scroll bar | A rectangular container consisting of a scroll area, a slider box, and arrows. Scroll bars are typically found on primary and secondary windows. | To view information that uses more than the available space. |
| Static control | A text field that displays read-only information. | To display a caption.
To provide instructional information. To display descriptive information. To display a keyboard hot key for another control. |
The following table shows foundation controls, which are used to contain or manage other controls.
Control |
Description |
Use |
| Command band | A special kind of rebar control. It has a fixed band at the top containing a toolbar with an optional Close (X) button, OK button, and Help (?) button, in the right corner. By default, each band in the command bands control contains a command bar. You can override this if you want a band to contain some other type of child window. | To provide easy access to frequently used commands or options.
When screen space is limited. |
| Command bar | A toolbar that combines a menu bar as well as the Close (X) button, an OK button, and optionally, the Help (?) button. A command bar can contain menus, combo boxes, buttons, and separators. A separator is a blank space that you can use to divide other elements into groups or to reserve space in a command bar. | To provide easy access to frequently used commands or options.
When screen space is limited. |
| Toolbar | A panel that contains a set of controls. | To provide easy access to frequently used commands or options. |
| Property sheet | A control to define property sheets. It accepts dialog box layout specifications and automatically creates tabbed property pages. | When creating property sheets. |
| Tab control | A tab control resembles a divider in a notebook and is used to define sections of information within the same window. | To present repetitive, related information.
To present options or settings that can be applied to one object. |
| Rebar | A control that acts as a container for a child window. It contains one or more bands; each band can contain one child window, which can be a toolbar or any other control. Each band can have its own bitmap, which is displayed as a background for the toolbar on that band. A user can resize or reposition a band by dragging its gripper bar. If a band has a text label next to its gripper bar, a user can maximize the band and restore it to its previous size. | When screen space is limited.
To hide and show portions of a command bar. |
The following table shows file controls, which are used to display files.
Control |
Description |
Use |
| Header control | A heading above a column of text or numbers that can be divided into two or more parts for multiple columns. Each part can operate like a command button to support a different function. | To display text and graphics.
To aid the user in sorting or sizing columns of information. |
| Image list | A list box that contains a collection of images that are all the same size, such as bitmaps or icons. Image lists manage images, but do not display them. They are designed to be used with toolbar buttons, list view controls, and tree view controls. | When the displaying of icons or images is appropriate.
When you implement a toolbar, treeview control, or list view control. |
| Tree view | A list box that displays a hierarchical set of labeled items as an indented outline. It includes buttons that enable the outline to be expanded and contracted. | To display a relationship between a set of containers.
When ample screen space is available. |
| List view | A list box that displays a collection of files or folders consisting of an icon and a label. Selection and navigation in this control work similarly to that in a folder window. | When the displaying of icons is appropriate.
When ample screen space is available. |
The following table shows scale controls, which are used to increment scaled values.
Control |
Description |
Use |
| Spin box | An edit control with an associated spin button control. A spin box enables the user to select an option by scrolling through a small list or by typing an item in the edit control field. | When options are infrequently selected and small in number.
When screen space is limited. When there are too many options to display in a combo box or list box.When only one choice can be selected. |
| Trackbar (slider) | A bar with tick marks on it and a slider or thumb. The tick marks represent a range of values. When a user drags the slider arm, it moves in the appropriate direction, tick by tick. | To set an attribute.
When only one choice can be selected. When a limited range of possible settings exists. When options are incremented. When ample screen space is available. |
The following table shows informational controls, which are used to provide information about tools, processes, or time.
Control |
Description |
Use |
| Progress bar | A display-only control that consists of a rectangular bar that fills from left to right. | To provide visual feedback concerning completion of a process.
When ample screen space is available. |
| Date and time picker | A control that provides users with an easy way to modify date and time information. Each field in the control displays a time element, such as month, day, hour, or minute. | To modify date and time information.
When screen space is limited. |
| Status bar | An area within a window, typically at the bottom, that displays information. It can contain display-only controls. | To provide information about the current state of what is being viewed in the window.
To provide a descriptive message about a selected menu or toolbar. |
| Month calendar | A child window that displays a monthly calendar. The calendar can display one or more months at a time. | To select date information.
When screen space is limited. |
| ToolTip | A small pop-up window containing information about a control. A ToolTip appears when a stylus is held on a control that supports ToolTips. | To supply information about a control.
To reduce screen clutter caused by control captions. |
The following table shows miscellaneous controls, which are used for specific Windows CE–based platform features.
Control |
Description |
Use |
| HTML viewer | A control that provides the features required to implement the Microsoft Pocket Internet Explorer Internet browser or Windows CE Help. | To view Hypertext Markup Lanugage (HTML) text and embedded images. |
| Rich Ink | A control that captures stylus motions in order to emulate the act of writing or drawing on paper. The control's document view, under the touch screen, serves as electronic paper. In addition to capturing images, Rich Ink also has editing and formatting capabilities. | To accept user input without using a keyboard. |
| Voice recorder | A control that provides recording and playback features. | To support voice recording and playback. |
In addition to predefined controls, Windows CE supports a new custom draw service. The custom draw service is not a predefined control; it is a service that makes it easy to customize a common control's appearance. You can use the custom draw service to change a common control's color or font or to partially or completely draw the control.
In addition to Windows CE controls, you can also create custom controls. When designing custom controls, avoid the following:
Make controls easy to use. For example, make controls larger, use colors that contrast with the screen background, and remove nearby controls and unnecessary images. Additionally, when you design a control, have a variety of people test its usability.
Controls should be spaced so that users do not accidentally select one control while intending to select another.
A control should represent its corresponding function. For example, place an image of a scissors on a button control used to "cut" text.
Controls should have easily recognizable differences. When you have several similar controls close together, users can confuse them. Distinguish controls by using a unique size, position, shape, and contrast for each.
Controls should be obvious. If you want to hide a control, place it where users expect to find it, such as in a menu. Controls that are occasionally unavailable should be disabled and dimmed, not hidden, unless screen space is severely limited.
Controls that have the same function should operate the same way regardless of where they are placed. If a control uses a different operating principle, design the control so that it will not be confused with controls that operate differently.