Customize Windows CE user interface

For the original msdn text, refer to link:
Http://msdn.microsoft.com/library/default.asp? Url =/library/en-US/dnembedded/html/embedded04022002.asp 

 

Windows CE. NET provides the ability to customize user interfaces for your embedded design. Such as POS terminals, ATM machines, or other 'fixed function' devices. You can also use Internet browsers and applications.ProgramThe user interface can also be customized in the previous version of wince, but it has a clear windows appearance and feeling. Now, wince. Net has changed this.

Here are some options for customizing the interface for a Windows CE. Net device:

·                   Use Microsoft Internet Explorer as the device's shell. This is a very flexible choice. Using HTML (and DHTML) to compile highly customized user interfaces is fast, simple, and elastic. You can make full use of bitmap, animation, and dynamics. (This method does not understand how to use it. Please answer it)

·                   Create an Independent Application to replace the standard shell. In concept, this is similar to using IE. Is a good choice on a single function device, such as point-of-sale terminal. Currently, most of the wince application devices use this method. The advantage is that you can create your own interface based on the author's interface idea. You only need to support related components of BSP, the disadvantage is that the general application interface of Ms cannot be modified, such as Word and Excel.

·                   Change the appearance of some user interface components in the operating system. You can change the bitmap andCode.

Microsoft provides two types of skins in Windows CE. Net: Windows 95 and Windows XP. These are universal controls, Windows controls, and non-customer zones. The "skin" file is in the following folder:

\ Wince420 \ public \ common \ oak \ drivers \ skinnableui.

 The path contains four folders: GWe/commctrl (Windows 95 interface, which is used by default) and gwexp/commctrlxp (windlows XP interface)

The Code provided in the skinnableui folder can be modified (because it is under the public tree) and can be used by your device.

L              Therefore, in our application, we adopt the method of combining the second and third points, and use the third method to compensate for the disadvantages of the second method.

How to select the interface we need:

1.   Compile a new project. The default Interface is Windows 95.

2.   Select Windows XP skin from the catalog. In core o/s/display based devices/Shell and user interface/User Interface/customizable UI/Windows XP-like sample skin. add this component to the platform or set the sysgen_xpskin environment variable.

The following is a difference between the two interfaces:

 

 Pic 1.Use standard Windows 95 interface skin

 

 PIC 2.Use the XP interfaceXP style skin

 

 

 

Here are a few examples to show you how to customize some interfaces.

·                   Modify the UI color.

·                   Modification of images related to the system Toolbar Control.

·                   Modify various controls of the application.

·                  Modify the system dialog box (for example, a pop-up warning or a dialog box with insufficient memory ).

·                   Using Internet Explorer as the shell of our device. (I have never used this example. If you are interested, please try it and I will not try it here. I hope someone will try it later and send the translation and the heart to me. Thank you)

 

L             Modify the user interface color (Changing the user interface colors)

 

This problem has plagued me for a long time. I can choose my own option on the desktop control panel, but I don't know how to use the code to implement it. Later I accidentally saw that msdn has dedicated this function, you only need to modify the registry. As follows:

If you select XP skin, you cannot change the color of some windows in the "show" option of the control panel. however, you can change $ (_ winceroot) \ public \ common \ oak \ files \ common. the XP color parameter in the reg file is used to change the window color.

The color parameters of the original XP style are as follows:

[HKEY_LOCAL_MACHINE \ SYSTEM \ GWe]

 "Syscolor" = HEX :\

  ,\

  3A, 6e, A5, 00 ,\

  ,\

  ,\

  EF, EB, de, 00 ,\

  FF, 00 ,\

  ,\

  ,\

  ,\

  FF, 00 ,\

  C0, C0, C0, 00 ,\

  C0, C0, C0, 00 ,\

  80, 80, 80, 00 ,\

  31,69, C6, 00 ,\

  FF, 00 ,\

  EF, EB, de, 00 ,\

  AD, AA, 9C, 00 ,\

  80, 80, 80, 00 ,\

  ,\

  ,\

  FF, 00 ,\

  73, 6d, 63,00 ,\

  FF, 00 ,\

  ,\

  FF, FF, E1, 00 ,\

  EF, EB, de, 00 ,\

   

  

 It means:

0Color_scrollbar      Color of the gray area of a scroll bar.

1Color_background     Background Color of the desktop window.

2Color_activecaption    Color of the title bar of an active window.

3Color_inactivecaption   Color of the title bar of an inactive window.

4Color_menu        Background color of a menu.

5Color_window       Background color of a window.

6Color_windowframe     Color of a window frame.

7Color_menutext      Color of the text in a menu.

8Color_windowtext     Color of the text in a window.

9Color_captiontext     Color of the text in a title bar and of the size box and scroll bar arrow box.

10 color_activeborder    Color of the border of an active window.

11 color_inactiveborder  Color of the border of an inactive window.

12 color_appworkspace    Background Color of Multiple Document Interface (MDI) applications.

13 color_highlight      Color of an item selected in a control.

14 color_highlighttext    Color of the text of an item selected in a control.

15 color_btnface       Color of the face of a button.

16 color_btnshadow      Shadow color of buttons for edges that face away from the light source.

17 color_graytext      Color of shaded text. This color is set to 0 if the current display driver does not support a solid gray color.

18 color_btntext       Color of the text for push buttons.

19 color_inactivecaptiontext Color of the text in the title bar of an inactive window.

20 color_btnhighlight    Highlight color of buttons for edges that face the light source.

21 color_3ddkshadow     Color of the dark shadow for three-dimen1_display elements.

22 color_3dlight       Highlight color of Three-dimen1_display elements for edges that face the light source.

23 color_infotext      Color of the text for tooltip controls.

24 color_infobk       Background Color for tooltip controls.

25 color_static       Background Color for static controls and dialog boxes. supported in Windows CE 2.0 and later.

26 color_statictext     Color of the text for static controls. supported in Windows CE 2.0 and later.

27 color_gradientactivecaptionColor of the title bar of an active window that is filled with a color gradient.

28 color_gradientinactivecaption

 

There are a lot of changes here, haha. Let's look at the second example below.

ChangeToolbarAnd other related icons(Modifying user interface bitmaps)

Another way to get a UI facelift is to alter some of the standard UI bitmaps. the bitmaps contain the toolbar button images used in standard Windows CE. NET applications, such as Microsoft Windows Explorer. the toolbar bitmaps can be found in the following folder: \ wince400 \ public \ common \ oak \ files. (The meaning here is relatively simple and will not be translated)

·                   Stdsm.bmp: Windows 95-like toolbar bitmaps.
 

·                   Stdsmxp.bmp: Windows XP-like toolbar bitmaps.
 

·                   Viewsm.bmp: Windows 95 'file' toolbar bitmaps.
 

·                   Viewsmxp.bmp: Windows XP 'file' toolbar bitmaps.
 

 

So how about the 'close' button on an applications caption bar? Can we also modify how this looks? Yes, absolutely. Let's look at how to change the Windows XP look.

This isn' t as simple as it first seems. there are two parts to the close button. the first is the background bitmap, which can be found in c: \ wince400 \ public \ common \ oak \ drivers \ skinnableui \ gwexp \ gcacheviewxp \ res-the file is closebutton.bmp. this contains the button background in Up, down, selected, and disabled form. so how does the White "X" get added to the button?

Right, lets roll up them sleeves and dig into some of the skinnableui source code ~~â... Perhaps the first stop on the tour of the Code is the initialization function for the XP skin code. The code is wrapped into a class calledCacheview_t. The initialization function is calledInit ().Cacheview_t: Init ()Function is located in skinnableui \ gwexp \ gcacheviewxp. cpp. Let's take a look at some of the Code. This is where the GDI object cache is setup.

// Close button

Hbitmap hbmclosebutton = NULL;

Hbmclosebutton = loadbitmapw_ I (hinstance ,\

Makeintresource (gwes_closebutton ));

Assert (hbmclosebutton );

G_cacheview.hdcclosebutton = GDI: createcompatibledc_ I (null );

Assert (g_cacheview.hdcclosebutton );

GDI: selectobject_ I (g_cacheview.hdcclosebutton ,\

(Hgdiobj) hbmclosebutton );

Here's what's happening: We're loading a bitmap resource "gwes_closebutton" and selecting this into a cached device context g_cacheview.hdcclosebutton, so that this is ready to use later. gwes_closebutton is defined in gcacheviewxp. res as follows:

Gwes_closebutton bitmap res \ closebutton.bmp

The bitmap is getting loaded from skinableui \ gwexp \ gcacheviewxp \ res.

So, we 've loaded the background bitmap. we now need to figure out where g_cacheview.hdcclosebutton is getting used. since the caption bar is part of the non-client area, it's a safe bet that we will find the code we're re looking for in the following folder: skinnableui \ gwexp \ nclientviewxp. let's take a look at nclientviewxp. CPP.

Below is part ofDrawclose ()Function. We can clearly see the callDrawcaptionbutton ()Passing in the cached hdcclosebutton. (I 've skipped some lines that Aren't interesting for this part of the article .) we can then see the callto selectobject_ I (HDC, hnewbrush), which selects a white brush into the device context. we then callDrawdiagonalline ()Twice to place the cross onto the close button. This can, of course, be easily replaced with whatever background bitmap and foreground text/figure you want.

Drawcaptionbutton (HDC, LPRC, wcontrolstate, g_cacheview.hdcclosebutton );

// Ã ‚ â... Skip some lines have existed â...

Holdbrush = (hbrush) GDI: selectobject_ I (HDC, hnewbrush );

Drawdiagonalline (HDC, LPRC, 1, 2, 0 );

Drawdiagonalline (HDC, LPRC,-1, 2, 0 );