定製WINDOWS CE使用者介面

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

 

Windows CE .NET 提供為你的嵌入式設計定製使用者介面的能力。如 POS terminals, 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-sale terminal）上。目前大部份的WINCE應用裝置都採用這個方法，優點是可以完全按照作者的介面思路來做自己的介面，只需要BSP有相關組件的支援，缺點是對於MS的跨平台 app程式介面無法修改，比如WORD和EXCEL.

·                     在作業系統裡改變某些使用者介面組件的外觀。可以通過改變位元影像和代碼來實現。

Microsoft在Windows CE .NET中提供了2種皮膚: Windows 95 外觀和Windows XP 外觀. 這些分別為通用控制項，windows控制項，和非客戶區提供windows外觀。“皮膚”檔案在下面檔案夾處：

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

 我們可以看到這個路徑中有四個檔案夾，GWE/COMMCTRL（Windows 95介面，預設使用此介面）,GWEXP/COMMCTRLXP(Windlows XP介面)

在skinnableui 檔案夾下提供的代碼可以改動（因為是在public樹下），可以被你的裝置所採用。

l                所以在我們應用程式中，採用了第二和第三點相結合的方法，通過第三種方法來彌補第二種方法的缺點。

如何選擇我們所需要的介面：

1.     編譯一個新的項目，預設為Windows 95介面。

2.     從catalog裡選擇Windows XP skin。在 Core O/S/Display Based Devices/Shell and User Interface/User Interface/Customizable UI/Windows XP-like sample 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 Interface Colors）

 

這個問題困擾我很久了，在案頭的控制台可以自己選擇，但不知道怎麼用代碼去實現，後來不小心看到MSDN有專門講這一功能的，只需要改註冊表就可以了。如下：

如果選擇了XP SKIN,則在控制台的"顯示"選項中是無法更改一些視窗的顏色的.不過,我們倒是可以通過更改$(_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 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-dimensional display elements.

22 COLOR_3DLIGHT         Highlight color of three-dimensional 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_GRADIENTACTIVECAPTION  Color of the title bar of an active window that is filled with a color gradient.

28 COLOR_GRADIENTINACTIVECAPTION

 

這下改變的地方很多了吧，哈哈. 下面看第二個例子

改變TOOLBAR等相關表徵圖(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.(這裡意思比較簡單，就不翻譯了)

·                     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 called CacheView_t. The initialization function is called Init( ). The CacheView_t::Init( ) function is located in SKINNABLEUI\GWEXP\GCACHEVIEWXP\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 looking for in the following folder: SKINNABLEUI\GWEXP\NCLIENTVIEWXP. Let's take a look at nclientviewxp.cpp.

Below is part of the DrawClose( ) function. We can clearly see the call to DrawCaptionButton( ) 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 calls to SelectObject_I(hdc, hNewBrush), which selects a white brush into the device context. We then call DrawDiagonalLine( ) 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…

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

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

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