天天看點

圖文解說ChinaCock uniGUI界面元件-TCCUniGUIDBGrid

基于官方的uniDBGrid,TCCUniGUIDBGrid擴充了非常實用的功能,可以設計出下面的效果的Grid,并且不用一行CSS或者JS代碼,這對Delphi開發者是個福音。

圖文解說ChinaCock uniGUI界面元件-TCCUniGUIDBGrid

也許你已經發現,Grid是透明的,與地圖融為一體。透明是一項非常重要的功能,當你想在大屏上用Grid來顯示資料,透明效果是必須的。

接下來,我們看看如何通過設定這個控件的屬性,進一步定制自己需要的Grid顯示風格

1.GridConfig

在官方uniDBGrid基礎上,CCuniGUIDBGrid主要增加了GridConfig屬性,來定制官方沒有實作的功能,如Grid的透明,表頭的高度,定制工具按鈕,合計行的高度等等。

圖文解說ChinaCock uniGUI界面元件-TCCUniGUIDBGrid

1.1 BodyBackgroundColor

圖文解說ChinaCock uniGUI界面元件-TCCUniGUIDBGrid

設定Grid内容部分的背景色,通過RGBA設定,A是設定透明度,範圍是0-1.

Enabled:是否使用這裡的屬性值,如果為False,則采用原來的預設值。

下面關于Grid其他部分的背景色設定,與這裡一樣的用法,都可以透明度,最終實作整體Grid為透明效果。

1.2 ColumnHeight

設定列頭的高度,通過設定列頭的高度,可以輕松的實作表頭的行高與内容的行高一緻的效果。通過RowHeight可以設定内容區的行高,一般情況下,我是喜歡ColumnHeight與RowHeight設定成30,下面還會提到合計行的高度,我也是設定成30.

1.3 EnableTextSelection

設定是否允許選擇單元格内的文本内容。預設是不允許的。

1.4 EvenRowBackgroundColor與OddRowBackgroundColor:

設定偶數行與奇數行的背景色,為了使這兩個屬性生效,必須設定StripsRows為True,這是官方Grid自帶的屬性。

1.5 FooterBackgroundColor

設定Grid頁腳的背景色

1.6 Header BackgroundColor

設定Grid頁頭的背景色

1.7 HoverRowStyle

設定懸停行的顯示樣式,什麼是懸停行,即滑鼠移動到内容區具體一行上時,這行即稱為懸停行。

如下圖,可以設定他的背景色、邊框樣式、顔色及字型。

圖文解說ChinaCock uniGUI界面元件-TCCUniGUIDBGrid

1.8 PageingBarConfig

設定工具條,如下圖,可以設定工具條上預設顯示的第一個按鈕的顯示顔色,圖示。注意:RefreshVisible可以隐藏重新整理按鈕。作者采用了iconfont的字型圖示,比起原來uniGUI自帶的要精緻很多。

圖文解說ChinaCock uniGUI界面元件-TCCUniGUIDBGrid

1.9 SummaryConfig

圖文解說ChinaCock uniGUI界面元件-TCCUniGUIDBGrid

設定合計行的顯示樣式,具體可以設定合計行的背景顔色,内容的顔色及合計行的高度。這裡,我們可以設定合計與内容行一樣的顯示高度,這樣,整體上的表頭每行的行高與内容行高及合計行高都保持一緻,這才是該有的樣子。

2 RowNumberConfig

設定行号列,可以設定行号列的顯示标題及他的顯示寬度。看圖一,每行的行号是垂直居中的,官方的一直存在的問題是你改了RowHeight後,靠上顯示,這太影響顯示效果了! 

圖文解說ChinaCock uniGUI界面元件-TCCUniGUIDBGrid

寫到這裡,想必你也能輕松的Delphi IDE中設定出你需要的、完美的Grid。感謝作者辛勤的努力,做出如此完美的控件,造福Delphi uniGUI的開發者!對此感興趣,可以加入的QQ群:223717588,如果你想無嘗白嫖,那還是算了。