DevExpress控件使用詳細(xì)說明

1、界面規(guī)范界面規(guī)范 V1.0V1.0 擬擬 制制 人人_ 審審 核核 人人_ 批批 準(zhǔn)準(zhǔn) 人人_ 二零零七年二月二十六日二零零七年二月二十六日 日期作者版本備注 2007/04/05 范擁華 1.0.0 目目 錄錄 1規(guī)范性.4 2系統(tǒng)顏色、字體、圖標(biāo).4 2.1設(shè)計(jì)參考.4 3FORM 控件布局與間距.5 3.1設(shè)計(jì)參考.5 4對齊設(shè)置.6 4.1設(shè)計(jì)參考.6 5BARMANAGER 控件.6 5.1實(shí)現(xiàn)效果.6 6菜單.8 6.1設(shè)計(jì)參考.8 6.2實(shí)現(xiàn)效果.8 6.3操作步驟.8 6.4實(shí)現(xiàn)代碼.9 7工具欄.10 7.1設(shè)計(jì)參考.10 7.2實(shí)現(xiàn)效果.10 7.3操作步驟.10 8STA

2、TUSBARS 控件.11 8.1設(shè)計(jì)參考.11 8.2實(shí)現(xiàn)效果.11 8.3操作步驟.11 9控件.11 9.1網(wǎng)格控件.11 9.1.1GridControl.11 9.1.1.1GridControl 描述.11 9.1.1.2GridControl 特殊屬性.16 9.1.2GridView.21 9.1.2.1實(shí)現(xiàn)效果.22 9.1.2.2操作步驟.22 9.1.2.3屬性設(shè)置.22 9.1.3CardView.22 9.1.3.1實(shí)現(xiàn)效果.23 9.1.3.2操作步驟.23 9.1.3.3CarView 屬性設(shè)置.23 9.1.4BandedGridView .24 9.1.4.1

3、實(shí)現(xiàn)效果.24 9.1.4.2操作步驟.24 9.1.4.3實(shí)現(xiàn)代碼.25 9.1.4.4屬性設(shè)置.25 9.1.4.5ColumnEdit 列.25 9.1.5AdvBandedGridView .26 9.1.5.1實(shí)現(xiàn)效果.27 9.1.5.2操作步驟.27 9.1.5.3實(shí)現(xiàn)代碼.27 9.1.5.4屬性設(shè)置.28 9.2XTRALAYOUT控件.28 9.2.1特性 .28 9.2.2實(shí)現(xiàn)效果 .28 9.2.3操作步驟 .28 9.3XTRATAB控件.29 9.3.1設(shè)計(jì)參考 .29 9.3.2效果及代碼 .29 9.4PIVOTGRID控件.29 9.4.1實(shí)現(xiàn)效果 .30 9

4、.4.2操作步驟 .30 9.5XTRATREELIST控件.31 9.5.1實(shí)現(xiàn)效果 .31 9.5.2操作步驟 .32 9.5.3實(shí)現(xiàn)代碼 .33 9.5.4屬性設(shè)置 .34 9.6LOOKUPEDIT控件.34 9.6.1實(shí)現(xiàn)效果 .34 9.6.2操作步驟 .34 9.7GRIDLOOKUPEDIT控件.35 9.7.1設(shè)計(jì)參考 .35 9.7.2實(shí)現(xiàn)效果 .35 9.7.3操作步驟 .36 9.8GRIDPRINT控件.37 9.8.1實(shí)現(xiàn)效果 .37 9.9BUTTON控件 .40 9.9.1設(shè)計(jì)參考 .40 9.10CHECKBOX控件.40 9.10.1設(shè)計(jì)參考 .40 9.1

5、1GROUPBOX控件.40 9.11.1設(shè)計(jì)參考 .40 9.12LABEL控件.41 9.12.1設(shè)計(jì)參考 .41 9.13LISTBOX控件.41 9.13.1設(shè)計(jì)參考 .41 9.14LISTVIEW控件.41 9.14.1設(shè)計(jì)參考 .41 10界面輸入控制.41 10.1設(shè)計(jì)參考.41 11彈出子窗體.42 11.1設(shè)計(jì)參考.42 12消息框設(shè)置.42 12.1設(shè)計(jì)參考.42 13向?qū)褂迷瓌t.43 13.1設(shè)計(jì)參考.43 14TAB 鍵和快捷鍵設(shè)置.43 14.1設(shè)計(jì)參考.43 15系統(tǒng)響應(yīng)時(shí)間.44 15.1設(shè)計(jì)參考.44 16登陸窗體與主界面.44 16.1設(shè)計(jì)參考.44 17

6、系統(tǒng)幫助設(shè)置.44 17.1設(shè)計(jì)參考.44 18附錄.44 1 1規(guī)范性規(guī)范性 通常界面設(shè)計(jì)都按 Windows 界面的規(guī)范來設(shè)計(jì)，即包含“菜單條、工具欄、工具箱、狀態(tài)欄、滾動條、 右鍵快捷菜單”的標(biāo)準(zhǔn)格式，可以說：界面遵循規(guī)范化的程度越高，則易用性相應(yīng)的就越好。 2 2系統(tǒng)顏色、字體、圖標(biāo)系統(tǒng)顏色、字體、圖標(biāo) 2.1 設(shè)計(jì)參考設(shè)計(jì)參考 Form 背景顏色缺省為#EFEFEF，大型系統(tǒng)常用的主色有#E1E1E1、#EFEFEF、#C0C0C0等。 前景與背景色搭配合理協(xié)調(diào)，反差不宜太大，最好少用深色，如大紅、大綠等。 如果使用其他顏色，主色要柔和，具有親和力與磁力，堅(jiān)決杜絕刺目的顏色。 中文采

7、用標(biāo)準(zhǔn)字體，“宋體”、 宋體的小五號字(9 磅)、黑色。 菜單和狀態(tài)條中通常使用 10 號字。 字體的大小要與界面的大小比例協(xié)調(diào), 通常使用的字體為宋體 9-12 較為美觀，很少使用超過 12 號的字體。 避免使用粗體和斜體用粗體來吸引人的注意，用斜體表示著重，但還是要少使用。 避免混合字體任何不包含文檔的窗口最多包含兩種不同的字體。 不要用字母全為大寫的單詞，這樣看起來像在沖用戶大喊大叫一樣。 界面風(fēng)格要保持一致，字的大小、顏色、字體要相同，除非是需要藝術(shù)處理或有特殊要求的地方。 不同界面中的同一功能應(yīng)該使用同樣的圖標(biāo)和圖片。 圖標(biāo)、圖片的色調(diào)、風(fēng)格盡量保持一致，隱喻應(yīng)能確切表示功能的含義。

8、 有標(biāo)準(zhǔn)的圖標(biāo)風(fēng)格設(shè)計(jì)，有統(tǒng)一的構(gòu)圖布局，有統(tǒng)一的色調(diào)、對比度、色階，以及圖片風(fēng)格。 3 3FormForm 控件布局與間距控件布局與間距 3.1 設(shè)計(jì)參考設(shè)計(jì)參考 應(yīng)該將重要信息放在上面和左邊。左上角最容易吸引起人們的注意力。 用戶首先要看到或操作的控件設(shè)置焦點(diǎn)。 屏幕不能擁擠, 擁擠的屏幕讓人難以理解，因而難以使用。讓人看上去，不能太擁擠，也不能太 松散。 布局要合理,不宜過于密集，也不能過于空曠，如果沒有其他內(nèi)容，那么應(yīng)盡量使窗口小一些。 按功能將界面劃分局域塊，完成相同或相近功能的按鈕用 Frame 框起來,并要有功能說明或標(biāo)題。 控件與窗體的上、下、左、右邊距保持 10pix,Lab

9、el 與文本框間距保持 10pix。 整個(gè)項(xiàng)目，采用統(tǒng)一的控件間距,通過調(diào)整窗體大小達(dá)到一致，即使在窗體大小不變的情況下，寧 可留空部分區(qū)域，也不要破壞控件間的行間距。 同一界面上的控件數(shù)最好不要太多，太擠時(shí)可以考慮使用分頁界面顯示, 分頁界面要支持在頁面 間的快捷切換，常用組合快捷鍵 Ctrl+Tab. DevExpress 中 LayoutControl 布局網(wǎng)格有助于您在不同的窗口之間實(shí)現(xiàn)一致性，控件 size 隨 Form 縮放。 控件長寬接近黃金點(diǎn)比例，切忌長寬比例失調(diào)、或?qū)挾瘸^長度。 按鈕的大小要與界面的大小和空間要協(xié)調(diào)，按鈕大小基本相近，忌用太長的名稱，免得占用過多 的界面位置

10、，避免空曠的界面上放置很大的按鈕。 界面空間較小時(shí)使用下拉框而不用選項(xiàng)框。 選項(xiàng)數(shù)較少時(shí)使用選項(xiàng)框，相反使用下拉列表框。 使用縮進(jìn)和文本來輔助理解； 避免水平滾動條，與垂直滾動條不同，水平滾動條并不受歡迎，因?yàn)樗鼤鬼?xiàng)目閱讀起來比較困 難。 應(yīng)用程序應(yīng)該保持為最大化當(dāng)應(yīng)用程序占用整個(gè)屏幕時(shí)，常常能夠提高用戶的工作效率。 窗體最小化和最大化時(shí)，窗體上的控件也要隨著窗體而縮放。 FORM 要保持一至的界面風(fēng)格、如背景色、字體、字的大小。 4 4對齊設(shè)置對齊設(shè)置 4.1 設(shè)計(jì)參考設(shè)計(jì)參考 左對齊:一般文字、單個(gè)數(shù)字、日期等。 右對齊:數(shù)字、時(shí)間、日期加時(shí)間。 通常，使用左對齊來使用戶界面控件更易于瀏

11、覽。對于數(shù)值文本，應(yīng)該使用小數(shù)點(diǎn)對齊或右對齊。對 于非數(shù)值文本，應(yīng)該避免使用右對齊或居中對齊。不必對什么都使用中間對齊，或者使它們保持對稱 形式。在右邊或底部保留空白區(qū)域更適合習(xí)慣。 5 5BarManagerBarManager 控件控件 BarManager 控件，一改 Visual Studio 2005 MenuStrip ,ToolStrip,StatusStrip 三分天下局面，而 把三個(gè)控件揉合在 BarManager 中統(tǒng)一管理。 5.1 實(shí)現(xiàn)效果實(shí)現(xiàn)效果 BarManager 菜單新增時(shí)的項(xiàng)： 菜單，工具，狀態(tài)欄中的分隔符不再是 Visual Studio 2005 中添加來實(shí)現(xiàn)，而是勾選 Begin a Group 時(shí)出現(xiàn)分隔符。 菜單，工具，狀態(tài)欄要用到圖標(biāo)，必須在 BarManager 的 Images 中設(shè)置 imageList 對象，在要用到處 的 ImageIndex 指定索引。 6 6菜單菜單 6.1 設(shè)計(jì)參考設(shè)計(jì)參考 菜單通常采用“常用-主要-次要-工具-幫助”的位置排列，符合流行的 Windows 風(fēng)格。 常用的有“文件”、