定制WINDOWS CE用户界面

作者：太阳下的泪

转自：http://blog.sina.com.cn/s/blog_5be1061c0100bgy8.html

MSDN原文参考LINK：
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnembedded/html/embedded04022002.asp  

 

Windows CE .NET 提供为你的嵌入式设计定制用户界面的能力。如 POSterminals, ATM machines, or other 'fixed function'devices。也可以用Internet浏览器和应用程序.以前版本的WINCE也可以定制用户界面，但带有明显的WINDOWS外观和感觉。现在WINCE。NET改变了这个。

这里有一些选择，在为一个Windows CE .NET 设备定制界面时：

·                    使用 Microsoft Internet Explorer 作为设备的shell.这是一个非常弹性的选择。使用HTML（和DHTML）编制高度定制化的用户界面是快速的，简单的和弹性的。可以充分利用位图，动画，动态。(此方法不理解如何用，请高手解答)

·                    创建一个独立的应用程序来取代标准shell。在概念上，这个和使用IE是类似的。是一个很好的选择在一个功能单一的设备上，如点销售终端（point-of-saleterminal）上。目前大部份的WINCE应用设备都采用这个方法，优点是可以完全按照作者的界面思路来做自己的界面，只需要BSP有相关组件的支持，缺点是对于MS的通用应用程序界面无法修改，比如WORD和EXCEL.

·                    在操作系统里改变某些用户界面组件的外观。可以通过改变位图和代码来实现。

Microsoft在Windows CE .NET中提供了2种皮肤: Windows 95外观和Windows XP 外观. 这些分别为通用控件，windows控件，和非客户区提供windows外观。“皮肤”文件在下面文件夹处：

\WINCE420\PUBLIC\COMMON\OAK\DRIVERS\SKINNABLEUI.

 我们可以看到这个路径中有四个文件夹，GWE/COMMCTRL（Windows95界面，默认使用此界面）,GWEXP/COMMCTRLXP(Windlows XP界面)

在skinnableui 文件夹下提供的代码可以改动（因为是在public树下），可以被你的设备所采用。

l               所以在我们应用程序中，采用了第二和第三点相结合的方法，通过第三种方法来弥补第二种方法的缺点。

如何选择我们所需要的界面：

1.    编译一个新的项目，默认为Windows 95界面。

2.    从catalog里选择Windows XP skin。在 Core O/S/Display Based Devices/Shelland User Interface/User Interface/Customizable UI/Windows XP-likesample skin. 加这个组件到平台里，或者设置the SYSGEN_XPSKIN 环境变量.

下面是两种界面的一个区别:

 

  PIC 1.  使用WINDOWS95界面外观标准皮肤

 

  PIC 2. 使用XP界面  XP风格皮肤

 

 

 

下面我们来举几个例子来告诉大家如何做一些界面的定制，有如下几个例子.

·                    修改用户界面颜色。

·                    系统TOOLBAR控件相关图片的修改.

·                    修改应用程序各种控件.

·                   修改系统对话框（比如弹出的警告，内存不足之类的对话框）.

·                    Using Internet Explorer as the shell of our device.(这个例子我没用过，有兴趣可以试一下，在此也不翻，希望有人用过后把翻译好的和心得发上来，谢谢)

 

l              修改用户界面颜色（Changing the User InterfaceColors）

 

这个问题困扰我很久了，在桌面的控制面板可以自己选择，但不知道怎么用代码去实现，后来不小心看到MSDN有专门讲这一功能的，只需要改注册表就可以了。如下：

如果选择了XPSKIN,则在控制面板的"显示"选项中是无法更改一些窗口的颜色的.不过,我们倒是可以通过更改$(_WINCEROOT)\PUBLIC\COMMON\OAK\FILES\common.reg文件中的XP颜色参数来达到更改窗口颜色的目的.

原XP样式的颜色参数如下:

[HKEY_LOCAL_MACHINE\SYSTEM\GWE]

  "SysColor"=hex:\

   00,00,00,00,\

   3A,6E,A5,00,\

   00,00,00,00,\

   00,00,00,00,\

   EF,EB,DE,00,\

   FF,FF,FF,00,\

   00,00,00,00,\

   00,00,00,00,\

   00,00,00,00,\

   FF,FF,FF,00,\

   C0,C0,C0,00,\

   C0,C0,C0,00,\

   80,80,80,00,\

   31,69,C6,00,\

   FF,FF,FF,00,\

   EF,EB,DE,00,\

   AD,AA,9C,00,\

   80,80,80,00,\

   00,00,00,00,\

   00,00,00,00,\

   FF,FF,FF,00,\

   73,6D,63,00,\

   FF,FF,FF,00,\

   00,00,00,00,\

   FF,FF,E1,00,\

   EF,EB,DE,00,\

  00,00,00,00  

  

  代表的意思是:

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

1 COLOR_BACKGROUND      Background color of the desktop window.

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

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

4 COLOR_MENU         Background color of a menu.

5 COLOR_WINDOW        Background color of a window.

6 COLOR_WINDOWFRAME      Color of a window frame.

7 COLOR_MENUTEXT       Color of the text in a menu.

8 COLOR_WINDOWTEXT      Color of the text in a window.

9 COLOR_CAPTIONTEXT      Color of the text in a title bar and of the size box and scroll bararrow box.

10COLOR_ACTIVEBORDER     Color of the border of an active window.

11 COLOR_INACTIVEBORDER    Color of the border of aninactive window.

12COLOR_APPWORKSPACE     Background color of multiple document interface (MDI)applications.

13COLOR_HIGHLIGHT       Color of an item selected in a control.

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

15COLOR_BTNFACE        Color of the face of a button.

16COLOR_BTNSHADOW       Shadow color of buttons for edges that face away from the lightsource.

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

18COLOR_BTNTEXT        Color of the text for push buttons.

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

20COLOR_BTNHIGHLIGHT     Highlight color of buttons for edges that face the lightsource.

21COLOR_3DDKSHADOW      Color of the dark shadow for three-dimensional displayelements.

22COLOR_3DLIGHT        Highlight color of three-dimensional display elements for edgesthat face the light source.

23COLOR_INFOTEXT       Color of the text for ToolTip controls.

24COLOR_INFOBK        Background color for ToolTip controls.

25COLOR_STATIC        Background color for static controls and dialog boxes. Supported inWindows CE 2.0 and later.

26COLOR_STATICTEXT      Color of the text for static controls. Supported in Windows CE 2.0and later.

27 COLOR_GRADIENTACTIVECAPTION  Color of thetitle bar of an active window that is filled with a colorgradient.

28 COLOR_GRADIENTINACTIVECAPTION

 

这下改变的地方很多了吧，哈哈. 下面看第二个例子

改变TOOLBAR等相关图标(Modifying User InterfaceBitmaps)

Another way to get a UI facelift is to alter some of thestandard UI bitmaps.The bitmaps contain the toolbar button imagesused in standard Windows CE .NET applications, such as Microsoft®Windows Explorer. The toolbar bitmaps can be found in the followingfolder: \WINCE400\public\common\OAK\FILES.(这里意思比较简单，就不翻译了)

·                    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 applicationscaption 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 aretwo parts to the Close button. The first is the background bitmap,which can be found inC:\wince400\public\common\OAK\DRIVERS\SKINNABLEUI\GWEXP\GCACHEVIEWXP\RES—thefile is Closebutton.bmp. This contains the button background in up,down, selected, and disabled form. So how does the white "X" getadded to the button?

Right, lets roll up them sleeves and dig into someof the skinnableui source code… Perhaps the first stop on thetour of the code is the initialization function for the XP skincode. The code is wrapped into a class calledCacheView_t.The initialization function is called Init( ). TheCacheView_t::Init( ) function is located inSKINNABLEUI\GWEXP\GCACHEVIEWXP\gcacheviewxp.cpp. Let's take a lookat some of the code. This is where the GDI object cache issetup.

// 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 bitmapresource "GWES_CLOSEBUTTON" and selecting this into a cached devicecontext g_cacheview.hdcCloseButton, so that this is ready to uselater. GWES_CLOSEBUTTON is defined in gcacheviewxp.res asfollows:

GWES_CLOSEBUTTON BITMAP res\\CloseButton.bmp

The bitmap is getting loaded fromSKINABLEUI\GWEXP\GCACHEVIEWXP\RES.

So, we've loaded the background bitmap. We now needto figure out where g_cacheview.hdcCloseButton is getting used.Since the caption bar is part of the non-client area, it's a safebet that we will find the code we're looking for in the followingfolder: SKINNABLEUI\GWEXP\NCLIENTVIEWXP. Let's take a look atnclientviewxp.cpp.

Below is part of the DrawClose( ) function.We can clearly see the call toDrawCaptionButton( ) passingin the cached hdcCloseButton. (I've skipped some lines that aren'tinteresting for this part of the article.) We can then see thecalls to SelectObject_I(hdc, hNewBrush), which selects a whitebrush into the device context. We then call DrawDiagonalLine() twice to place the cross onto the close button. This can, ofcourse, be easily replaced with whatever background bitmap andforeground text/figure you want.

DrawCaptionButton(hdc, lprc, wControlState,g_cacheview.hdcCloseButton);

// … skip some lines…

hOldBrush = (HBRUSH)Gdi::SelectObject_I(hdc,hNewBrush);

DrawDiagonalLine(hdc, lprc, 1, 2, 0);

DrawDiagonalLine(hdc, lprc, -1, 2, 0);