How to Customize the Appearance of Common Controls (Windows Embedded CE 6.0)


One way you can increase the uniqueness and functionality of your run-time image is by customizing the appearance of its user interface (UI) elements. As an operating system (OS) developer, you have more control over the appearance of your run-time image's UI than simply changing the color scheme. You can also customize the way controls on your system are drawn.

In a Windows Embedded CE-based OS, the functional implementations of common controls are separated from their presentational implementations. You can only change the appearance of your common controls, but not their basic behavior. This is referred to as creating a skin for the common controls. For more information, see Creating a Skin.

The source code for common control skins on a Windows Embedded CE-based OS design is located in the %_WINCEROOT%\Public\Common\Oak\Drivers\Skinnableui\Commctrl directory.

The following steps show how to customize the appearance of common controls by using the progress bar as an example. These steps work on any display-based device.

Step Topic

1. Use the Windows Embedded CE OS Design Wizard to select the Enterprise Web Pad design template and the initial components for the OS design.

  • From the Available BSPs list in the Windows Embedded CE OS Design Wizard, choose CEPC: x86.
  • From the Design Templates list in the Windows Embedded CE OS Design Wizard, choose PDA Device, and then choose Enterprise Web Pad.

Creating an OS Design with the Windows Embedded CE OS Design Wizard

2. Choose a Debug or Release configuration to target when Platform Builder builds the OS design into a run-time image.

To use the kernel debugger, make sure that support for the kernel debugger is enabled.

Levels of Debugging Support

Building a Run-Time Image From a Debug Configuration

Building a Run-Time Image From a Release Configuration

3. If you expect the size of either the debug or the release run-time image to exceed 32 MB, enable support for a large run-time image in the settings for the OS design.

Debug run-time images are typically larger than release run-time images. If you choose a debug configuration and the OS design contains many features, it is likely that the size of the run-time image will exceed 32 MB.

Enabling a Run-Time Image Size Larger Than 32 MB

4. Create an application named ProgBarDemo.exe that demonstrates the behavior of a progress bar on your run-time image.

Creating an Application that Demonstrates the Progress Bar

5. (Optional) Check the standard behavior of the progress bar prior to any of your customizations.

To do this, skip ahead to step 7 and build your run-time image, load it onto your target device, and run ProgBarDemo.

Continue to the next step when you are done.

Not applicable

6. Clone the commctrl module.

At the end of this step you will duplicate the public directory for the commctrl module in your workspace directory. This will enable you to make changes necessary to customize the common controls in your workspace and not the public folders.

For more information about cloning, see Cloning a Catalog Item.

Cloning the Commctrl Module

7. Change the skin code for the progress bar to cause horizontal progress bars to advance from right to left rather than from left to right.

Changing the Skin Code for the Progress Bar

8. Build the OS design into a run-time image.

Building a Run-Time Image

9. In the Output window, on the Output tab, verify that the build contains no errors.

Build Error Debugging Process

10. Choose a download service appropriate for the connection hardware. The download service will download a run-time image to the target device.

Download Service Selection

11. Set up and configure the connection hardware required for the download service. That hardware connects the target device to the development workstation, on which Platform Builder is installed. Examples of connection hardware include cables, a hub, or Ethernet network adapters.

Hardware Configuration

12. If you selected Serial Download Service in step 10, configure the HyperTerminal terminal emulation application to display the serial debug output from the serial port on the target device.

This configuration requires a null-modem cable connected to a serial port, such as COM1.

Configuring HyperTerminal for BSPs

13. Turn on the target device so that it becomes active on the Ethernet network or over the serial connection, and Platform Builder can discover it.

Not applicable

14. Configure the connection to the target device.

Choose the appropriate topic based on whether the development workstation and the target device are connected by an Ethernet network or a serial port connection.

Configuring an Ethernet Remote Connection

Configuring a Serial Remote Connection

15. Download the run-time image to the target device through the configured connection.

Downloading a Run-Time Image

16. Verify that the progress bar in ProgBarDemo.exe advances from right to left as follows:

  • After your run-time image is loaded onto your device, on the Start menu on your device, choose Run.
    The Run dialog box appears.
  • In the Open box, type ProgBarDemo and choose OK.

Not applicable

If you plan to make more extensive changes to the progress bar or other common controls, consider creating a project for your common control skin code. Your code can then be exposed in, and accessible from, the Platform Builder IDE. To do this, you can adapt the techniques discussed in Creating Excluded Projects to Host Shell Source Code in the IDE.

Community Additions