How to Customize the Appearance of Common Controls (Windows Embedded CE 6.0)
1/6/2010
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.
Steps
| 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.
|
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. |
|
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. .gif "Ee504129.note(en-US,WinEmbedded.60).gif") Note:
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.
|
|
4. Create an application named ProgBarDemo.exe that demonstrates the behavior of a progress bar on your run-time image. |
|
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. |
|
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. |
|
8. Build the OS design into a run-time image. |
|
9. In the Output window, on the Output tab, verify that the build contains no errors. |
|
10. Choose a download service appropriate for the connection hardware. The download service will download a run-time image to the target device. |
|
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. |
|
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. |
|
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. |
|
15. Download the run-time image to the target device through the configured connection. |
|
16. 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
Reference
Progress Bar Controls Reference