Creating a Skin
Other versions of this page are also available for the following:
.gif "A hyphen indicates that the information in this topic is not relevant for this platform, or that the platform does not support the API that is listed.")
.gif "A checkmark indicates that the information in this topic is relevant for this platform, and that any API listed is also supported on this platform.")
8/28/2008
You can create a customized user interface (UI), also known as a skin. Skins allow you to customize the appearance of controls and other UI elements. For example, you can use this functionality to change the system-defined bitmaps displayed on toolbar buttons. By uniquely tailoring the UI to your form factor, you differentiate your products. You can also customize window controls, common controls, and the nonclient area of windows.
To support the creation of skins, Windows CE 5.0 separates the drawing code for controls and the nonclient area windows from the rest of the code that implements those UI elements. For example, two components implement the scroll bar: Sbcmn and Sbcmnview. The Sbcmnview component includes the drawing code for the scroll bar, and the Sbcmn component includes the functionality of the scroll bar.
When you build a run-time image, you can either include a predefined skin or create your own skin. Windows Embedded CE includes two predefined skins, one that is similar to the Windows 95 UI and one that is similar to the Windows XP UI. Display-based OS designs include the Windows 95–style skin by default. To include a Windows XP–style skin, add the Windows XP-like Sample Skin Catalog item to your OS design.
To include your own custom skin, set the __SYSGEN_REPLACESKIN environment variable in your OS design. You must also set the following variables to specify the libraries for your custom skin:
- GWES_REPLACE: Specifies the list of libraries to be replaced that have resource files associated with them, for example,
GWES_REPLACE = btnctrlview lbctrlview. - GWES_REPLACE_COMPONENTS: Specifies the list of libraries that you are replacing that do not have resource files associated with them.
You can also use the GWES_REPLACE and GWES_REPLACE_COMPONENTS variables to replace other UI components. For information on customizing a UI component using the GWES_REPLACE and GWES_REPLACE_COMPONENTS variables, see topic Customizing a UI Component.
You create your own custom skin by modifying the default drawing code for the controls and nonclient area of windows. This code is contained in the files located within the subdirectories of the %_WINCEROOT%\Public\Common\Oak\Drivers\Skinnableui directory. Each control that you can customize, as well as the nonclient area of windows, corresponds to a C++ class. You customize the UI by changing the implementation of the methods that these classes contain. When you build a run-time image that includes a full UI, such as one based on any design template except for Gateway and Digital Media Receiver, Microsoft Platform Builder automatically incorporates your modified implementations into the Gwe module.
Note
Because your modified code runs as part of the Gwe module, and therefore as part of the OS, you should be extremely careful to ensure that your code runs properly and does not destabilize the OS.
To identify the location of the replaced components for skin-enabled UI controls, use the REPLACE_ROOT environment variable, located within %_WINCEROOT%\Public\Common\Cesysgen\Makefile. If you have created custom skinning libraries, then you can set REPLACE_ROOT to specify the path that your custom libraries will be linked from. The build system will look at the path $(REPLACE_ROOT)\Oak\Lib\$(_CPUINDPATH) for your skinning libraries. If you do not explicitly set a value for REPLACE_ROOT, then $(_PROJECTROOT) is used by default.
When you modify the drawing code for the UI, you can perform one-time initializations in your implementation of the CacheView_t::Init and CommCtrlView_t::Init methods. The CacheView_t class also stores a cache of drawing objects necessary for the Graphics, Windowing, and Events Subsystem (GWES).
When you create a skin, consider coordinating your UI customizations with modifications to the shell. For more information, see Shell OS Design Development.
Note
When you develop and debug a custom skin, you can use the FillRect function to obtain visual feedback about the extent of the drawing area by filling the drawing rectangles with a brush of solid color. The following example shows how to call FillRect to provide such visual feedback.
FillRect(hdc, &rc, CreateSolidBrush(RGB(0xFF, 0x00, 0x00)));
See Also
Concepts
Customizing Common Controls
Customizing Window Controls
Customizing the Nonclient Area of Windows
Using Internal GDI Methods