Creating a Skin

Article
06/30/2006

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 feature 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, Microsoft® Windows® CE .NET 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 platform, you can either include a predefined skin or create your own skin. Windows 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 platforms include the Windows 95–style skin by default. To include a Windows XP–style skin, choose the Windows XP-like Sample Skin feature from the feature Catalog.

To include your own custom skin, set the __SYSGEN_REPLACESKIN environment variable when you build your platform. 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 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 platform that includes a full UI, such as one based on any standard configurations 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 Creating a Custom Shell.

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)));

Share via

Creating a Skin

See Also

Additional resources