美化Windows Mobile上的自訂資料表

轉自：http://www.winbile.net/bbs/forums/threads/1038963.aspx

    前段時間做實驗室項目，需要以報表的形式將資料展示給使用者。首先想到的是visualstudio內建的listview，用起來是比較方便，可是看著不美觀，說白了，就是吸引力不夠。於是，我想到了使用AlphaBlend來做一個半透明效果的表格。因為在今年2月份的時候，Alex Yakhnin做了一次名為《24 Hours of Windows Mobile Application Development: Creating Compelling and Attractive UIs for Windows Mobile Applications》的Webcast，給我留下的印象比較深刻，覺得對於UI部分，Alpha Blend的用處還是挺大的。

    對於圖片，想要獲得透明的效果，可以有兩種途徑。第一種，使用.NET CF中System.Drawing.Imaging命名空間下的ImageAttributes.SetColorKey(Color, Color)這個方法。第二種，我們可以利用平台叫用來做Alpha Blending，有關Alpha Blending的一些原理，在之前的《Alpha Blending and Alpha Channel on Windows Mobile》這個文章中做了一些說明，這裡就不再贅述。

    另外，我們可以利用色彩的漸層效果，從一種顏色逐漸過渡到另一種顏色，同樣，這也可以應用到windows mobile的介面設計上去。《How to: Display a Gradient Fill》這篇文章具體講述了如何在.NET Framework下，實現漸層的填充效果，可以作為參考。

   那麼，我們如何將上面的Alpha Blending和GradientFill應用到自己的工程裡面去呢？首先，封裝win32的AlphaBlend、BitBlt和GradientFill函數，做Platforminvoke。然後，擴充這些方法，在方便調用的同時，也增加了使用者的可讀性。Alex Yakhnin已經幫我們做了這些工作，我們可以在“ListViewDemo.zip”這個連結中下載到原始碼。解壓以後，其PlatformAPI檔案夾下的5個檔案，就是我們需要的，如1所示：

圖1：所需的相關P/Invoke檔案

   為了突出表頭和使用者選定文本所在行的資料，加入了HeaderControl.cs和CustomSelectionColumn.cs這兩個檔案，主要作用是重載了Paint、OnPaint、OnMouseDown和OnMouseUp函數，在其中調用PlatformAPI封裝好的AlphaBlending和Gradient Fill函數，實現預期的透明以及漸層的效果。

    在我們自己的工程中，可以聲明一個DataGrid以及HeaderControl。

 

   在初始化控制項之後，建一個DataSet，向DataSet中添加一個DataTable。然後，我們就可以設定DataTable中每一行的漸層風格了，即使用LinearGradient（color，color）函數對customColumn.SelectedGradient進行設定，自訂每一行的漸層顏色。

    同時，為了突出表頭，我們也可以單獨設定表頭的漸層風格，即利用LinearGradient(color，color)對headerControl. BackroundGradient進行設定。

    在使用的時候，我們會發現，使用者選定的行與其他行的顏色是不一樣的，這是因為，在CustomSelectionColumn.cs檔案的Paint重載函數中，對使用者選擇的行與其他行做了分類處理。

    這個表格最終的顯示效果如2所示：

圖2：

    對於RGB顏色，除了紅白藍等顯著的顏色，一般我們很難記住其數值，這裡推薦一個網頁：RGB.txt decoded.3給出了部分。

圖3：RGB數值及其顏色效果

    希望這裡講的這種方法對大家在Windows Mobile上做UI時有用。

 

參考連結：

1.24 Hours of Windows Mobile Application Development: Creating Compelling and Attractive UIs for Windows Mobile Applications

2.Alpha Blending and Alpha Channel on Windows Mobile

3.How to: Display a Gradient Fill

4.RGB.txt decoded