Working with Command Bars

One of the challenges you may encounter when creating a Windows CE-based application is having to design for a small screen. To maximize the screen real estate available for applications in the client area, the operating system supports a new type of control, the command bar. Command bars are unique to Windows CE because they combine a menu bar, toolbar, and address bar. Windows CE supports multiple command bars, each containing gripper controls which enable users to hide buttons and menus. Command bars can contain combo boxes, edit boxes and buttons, as well as other types of controls. They also can include the Close (X) button, the Help (?) button, and the OK button, usually found on the title bar of Windows-based desktop applications.

Command bars vary from 480 pixels to 640 pixels in length depending on the screen resolution. Microsoft recommends that you always display a command bar in Windows CE-based applications when using the desktop metaphor. Because Windows CE does not allow you to place an application's title or icon on the command bar, users identify an application by the label and icon on its taskbar button.

Command bars are composed of bands, separated by gripper controls. Each band can contain up to one child window, which can be a toolbar or any other control. The default is to display a toolbar. Additionally, 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 by tapping the label with the stylus. For more information, see Foundation Controls.

A command bar menu is a list of commands that drops down when a user taps the menu's caption on the command bar with the stylus. Menu titles on a command bar appear in bold text. If you include a menu bar, always position it as the first (leftmost) element on the command bar. If you provide File, Edit, View, Insert, Format, Tools, and Window menus, always place them in this order, from left to right. The menu titles appear as bold text surrounded by a rectangular frame.

Windows CE supports ToolTips for command bar and toolbar buttons, but not for menus or combo boxes on a command bar. ToolTips usually display only the title of a button command, but they can also display the shortcut key for the command. If you include a shortcut key, follow these guidelines:

You can place check boxes or radio buttons on the command bar to enable users to toggle between different views. Moving between views can make windows more readable by eliminating unnecessary scrolling. A command bar button can display both text and images. This allows you to include text as part of a button label to provide descriptions, which eliminates the need for ToolTips.

If you choose to place a label next to your edit control on a command bar, you have two choices. You can insert a static text field above or to the left of the control. Alternatively, you can include an edit control label inside the text field as the default text. In this case, you would enclose the label between angle brackets, for example, <name>. Because the user can no longer see the control's label when he or she types text in the field, using a static text field is preferable. The default system font for applications based on Windows CE version 2.0 is Tahoma, 9 point. Windows CE version 1.0 used MS Sans Serif, 8 point, which is a smaller raster font. If your device has a small screen size and a low contrast LCD, you should use a non-bold typeface when displaying control labels unless the labels appear on a light gray background.

If you provide individual New, Open, Save, and Print buttons on a command bar, you must position them in this order, from left to right. If you provide individual Bold, Italic, and Underline buttons, you must also place them in this order, from left to right. Always make buttons at least 23 pixels high and 23 pixels wide. Leave at least 2 pixels between adjacent controls and at least 4 pixels between a control and the edge of the screen. If you plan to support touch interaction in which users can use a finger rather than a stylus, make all buttons at least 38 by 38 pixels. However, to conserve space, you may want to consider creating a combo box button instead of three or four separate buttons. You can also create a tab and arrow key navigation order for command bar buttons. When a command bar button has the input focus, the button activates if the user presses the spacebar or ENTER key. The user must be able to select either option.