How to Customize the Appearance of Common Controls (Windows CE 5.0)
One way you can increase the uniqueness and functionality of your run-time image is by customizing the appearance of its user interface elements. As an 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 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 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. You can select the check box next to each step to track your progress.
| Step | Topic | |
|---|---|---|
1. Create an OS design based on the Enterprise Web Pad design template.
|
Creating an OS Design | |
| 2. Familiarize yourself with the configurations that Platform Builder provides by default with an OS design, and then choose a configuration. | Levels of Debugging Support | |
| 3. 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 | |
| 4. (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 | |
| 5. 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 | |
| 6. 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 | |
| 7. Build the run-time image.
From the Build OS menu, verify that Make Run-Time Image After Build and Copy Files to Release Directory after Build are selected. Then, from the Build OS menu, choose Build and Sysgen. |
Building a Run-Time Image | |
| 8. Configure your download and debugging connections. | Configuring a Connection for Downloading and Debugging | |
| 9. Download the run-time image to your device. | Downloading a Run-Time Image | |
10. Verify that the progress bar in ProgBarDemo.exe advances from right to left as follows:
|
Not applicable |
**Note **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.
See Also
How-to Topics | Creating a Progress Bar | Progress Bar Control Reference
Send Feedback on this topic to the authors