[畢業生的商業軟件開發之路]Windows窗體設計概念及原則
近期開始接觸到在校學生、高校實習生和畢業生,在此說一下筆者對這些徘徊在職場門口的學生一些建議,希望能給這些初學者進入軟件開發行業帶來一些幫助,使得畢業生能更順利的進入軟件開發公司開始職場生涯,人生來一個完美的轉彎。
---------------------------------------------------------------------------
---------------------------------------------------------------------------
Windows窗體設計概念及原則
本節介紹一下Windows窗體設計中的一些概念和原則。
控件的名稱
當開發人員在窗體中新增一個控件時,系統會給這個控件設置默認名稱,比如對于Label控件,其默認名稱可能為lable1、label2等,對于TextBox控件其默認名稱可能為textBox1、textBox2等等。
如下圖所示,筆者設計了一個“用戶信息”窗體,在默認情況下,各個控件的名稱如下圖所示。
這是一種非常糟糕的窗體設計結果。在編寫該窗體的C#代碼時,由于無法同時看到窗體設計界面,因此很難記下各種控件的名稱及其功能。當窗體控件比較多時,此時的程序代碼的編寫和維護時相當困難的。[袁永福版權所有]
因此開發人員應當養成在窗體上新建控件就立即修改控件名稱的習慣。這樣能有效的改進軟件的用戶界面的設計質量,也是窗體后臺代碼高質量的基礎。對于Label控件,由于基本上不參與編程,只是在用戶界面上顯示一段不可改變的靜態文本,因此可以不設置Label控件的名稱,但當在少數情況下,當窗體后臺代碼需要操作Label控件的文本等屬性值時,為了提高代碼的質量也應當修改Label控件的名稱。比如對于下面這個窗體,各個數據輸入控件的名稱設置如下。
跟代碼變量命名規則類型,窗體控件也有命名規則,業界主流的控件命名規則可能有多種,各種規則之間差別不大,筆者采用的命名規則大致如下[袁永福版權所有]
控件名稱一般為表示控件類型的前綴加上表示控件作用的字符組成。常用控件類型和前綴對應關系如下表所示
|
控件類型 |
前綴 |
|
Button 按鈕 |
btn |
|
CheckBox 復選框 |
chk |
|
ColumnHeader 視圖列表頭 |
col |
|
ComboBox 組合框 |
cbo |
|
ContextMenu 快捷菜單 |
ctm |
|
DataGrid 數據網格控件 |
dg |
|
DataGridView 數據網格視圖控件 |
dgv |
|
DateTimePicker 時間輸入框 |
dtp |
|
DomainUpDown 數值框 |
dud |
|
Form 窗體 |
frm |
|
GroupBox 組合框 |
grp |
|
HscrollBar 水平滾動條 |
hsb |
|
ImageList 圖標列表 |
img |
|
Label 文本標簽 |
lbl |
|
LinkLabel 帶鏈接的文本標簽 |
lbl |
|
ListBox 列表框 |
lst |
|
ListView 視圖列表 |
lvw |
|
Menu 菜單 |
menu |
|
MenuItem 菜單項 |
menu |
|
NumericUpDown 數值框 |
nud |
|
Panel 面板 |
pnl |
|
PictureBox 圖片框 |
pic |
|
ProgressBar 進度條 |
prg |
|
RadioButton 單選框按鈕 |
rdo |
|
Spliter 拆分條 |
spl |
|
StatusBar 狀態欄 |
stu |
|
StatusBarPanel 狀態欄區域 |
pnl |
|
StatusStrip 狀態欄 |
stu |
|
TabControl 分頁控件 |
tab |
|
TabPage 分頁標簽頁面 |
page |
|
TextBox 文本框 |
txt |
|
Timer 定時器 |
tmr |
|
ToolBar 工具條 |
tbr |
|
ToolStrip 工具欄 |
tsp |
|
ToolStripButton 工具欄按鈕 |
btn |
|
ToolStripComboBox 工具欄下拉組合框 |
cbo |
|
ToolStripDropDownButton 工具欄下拉列表 |
btn |
|
ToolStripDropDownMenu 工具欄菜單項目 |
menu |
|
ToolStripLabel 工具欄靜態文本 |
lbl |
|
ToolStripProgressBar 工具欄進度條 |
prg |
|
ToolStripTextBox 工具欄文本框 |
txt |
|
TreeView 樹狀視圖列表 |
tvw |
|
VScrollBar 垂直滾動條 |
vsb |
|
WebBrowser 瀏覽器控件 |
wb |
對于其他非常用的控件類型的前綴讀者可以自己琢磨或者請教他人,控件名稱前綴只是一個比較小的細節問題,即使有誤也無傷大雅。[袁永福版權所有]
筆者一般使用英文或者縮寫來表示控件的作用,若沒有合適的英文則采用漢語全拼音或者干脆用中文漢字,但絕不會用中文漢語拼音首字母,因為漢語拼音首字母很難僅僅從字母上猜出其表示的漢字,而猜測英文縮寫相對容易得多。
如下圖所示,可能有些人使用漢語拼音首字母來設置控件的名稱,比如“姓名”文本框取名“txtXM”,這是一種不好的控件命名方式,因為很多時候是實在是難于從拼音首字母中猜測控件的作用,控件名稱的低可讀性降低了程序代碼的可讀性。
因此按照比較合理的命名方式,“姓名”文本框的名稱就采用TextBox控件的前綴“txt”和表示姓名的英文“Name”組合而成為“txtName”。
一般來說商業軟件不是“一次開發,長期使用”,而是“一次開發,長期修改,長期使用”,因此開發商業軟件需要考慮到未來的修改和升級換代,此時程序代碼不但要耐用,還需要耐看耐改,程序代碼需要具備良好的可讀性,而給控件設置合適的名稱就是一個基礎工作。其實除了控件的名稱,其他的諸如數據庫表名字段名,窗體名稱,程序模塊名稱等等都需要遵守一定的命名規范。[袁永福版權所有]
TabIndex屬性
首先的設置好控件的TabIndex屬性值。在程序運行顯示窗體時,用戶可以按下Tab鍵來切換輸入焦點,而切換順序就依照各個控件的TabIndex屬性。一般的輸入焦點切換順序按照從左到右,從上到下。因此需要設置左上方位的控件的TabIndex屬性值為小,右下方為的控件的TabIndex屬性值為大。但實際開發中還是按照具體功能需求來安排輸入焦點切換順序。
在設置各個控件的TabIndex屬性值時不應設置為連續的值,比如設置第一個控件的TabIndex屬性值為1,第二個控件為2,第三個控件為3,等等等。采用這種設置時,當未來在輸入焦點順序中插入新的控件,則會需要修改大量的控件的TabIndex屬性值。為此筆者建議輸入的各個控件的TabIndex屬性值不聯系,比如有10的間隔,此時可以設置第一個控件的TabIndex屬性值為10,第二個控件為20,第三個控件為30,等等等。這樣就為未來插入新的控件留下TabIndex順序的空間。如下圖所示
在這個“用戶信息”窗體設計的例[袁永福版權所有]子中,當該窗體運行顯示后,用戶可以按下Tab鍵從左到右從上到下的切換焦點。
有些控件并不能接受輸入焦點,比如Label控件,但仍然需要為這類控件設置合適的TabIndex屬性值。因為Label控件雖然不能接受輸入焦點,但仍然能接受快捷鍵,比如在“用戶信息”的窗體設計中,筆者設置第一個Label控件的文本為“姓名 (&N):”,則程序運行后顯示該窗體時,用戶按下“Alt+N”組合鍵時,Label控件就感應到快捷鍵并試圖設置輸入焦點到自己,由于Label控件不能接受輸入焦點,因此系統就會將輸入焦點自動切換到Label控件的下一個焦點順序的控件上。也就是TabIndex值為20的文本框上。這樣用戶就使用快捷鍵“Alt+U”就能快速切換焦點到“姓名”文本框了。
當用戶界面上數據輸入域很多時,這種快速切換輸入焦點的功能是很人性化的,方便用戶使用純鍵盤操作來高速輸入和修改數據,顯得用戶界面做的很專業。若沒有這種功能,則用戶需要頻繁的切換鼠標和鍵盤來輸入數據,大大拖累的操作速度。
商業程序的用戶界面要求比較高,因為使用者可能好幾年天天面對相同的用戶界面,累計下來會重復進行幾萬次操作,此時用戶界面需要耐看耐用,這需要在很多細節上做好功夫,其中設置各[袁永福版權所有]個控件的TabIndex屬性值就是一個基礎工作,必須花點心思做好。
Z-Index
在WinForm窗體設計中有一個Z-Index的概念。窗體布局是采用絕對坐標方式的,每一個控件都有Left和Right屬性用于確定控件的左上角在窗體中的X-Y坐標。
當窗體有多個控件時,控件之間可能存在相互重疊的現象,這類似圖像處理中層的概念。也就是說一個控件單獨的占有一個控件布局層,多個控件就會有多個布局層的疊加,而越靠近窗體的控件就越容易被覆蓋,于是從窗體開始計算,每個控件布局層都有一個從0開始計算的序號,這個序號就是Z-Index。
從另外一種方式理解,窗體上的控件布局是不僅僅是X-Y坐標系那種二維的,而是三維的,第三維就是Z坐標軸,它是從窗體向用戶延伸的,控件是分布在窗體和用戶之間。此時可以說用戶是俯看用戶界面,若不注意是不會感覺到第三維的存在。而且控件在第三維中的坐標值就是Z-Index,這個值是從0開始的,不會重復;Z-Index值大的控件可以覆蓋掉值小的控件。
我們還可以從第三種方式看Z-Index值,窗體對象有一個Controls的屬性,該屬性值可以看做一個控件數組,窗體上所有的控件都在這個數組中。系統創建窗體時,是從這個數組逆向遍歷獲得控件對象,然后依次放置在窗體上,很顯然在數組中靠前的控件可以覆蓋掉靠后的控件,于是控件在這個數組中的逆向序號也可以看做Z-Index值。
實際上其他軟件開發技術中也有Z-Index屬性,比如VB,還有Web開發中才CSS樣式也支持Z-Index屬性值。
Z-Index與其他控件相關,因此控件本身不會有Z-Index屬性,而且根據控件在窗體中的布局動態的計算出來的。
在VS.NET的窗體設計器中,不能直接設置控件的Z-Index值,但可以使用布局工具條上的“置于頂層”和“置于低層”按鈕來將控件沿著Z坐標軸置于最大值或最小值,也就是沿著Z坐標軸移動控件,使其最靠近用戶或者最靠近窗體。
在窗體設計中,設置控件在Z軸上的先后順序也是有一些原則的,那就是重要的控件需要置前,不能被不重要的控件覆蓋掉。如下圖所示
文本標簽的Z-Index值大于文本框的,這種用戶界面是很不好的,會遮擋文本框中的部分類型,而且也不美觀,因此需要調整為文本框靠前,也就是如下圖的效果。
如果用戶界面排版時被迫發生一些重疊遮蓋,也必須保證重要的控件不被遮蓋。
一般來說,若設計人員心中已經知道用戶界面的設計,在窗體上從左到右、從上到下的依次添加控件,控件的TabIndex和Z-Index值都是不斷增加的,此時做好之后大多就無需調整了。但在實際中設計好的窗體經常會添加或刪除控件,或者大幅移動控件的位置,此時需要注意調整控件的TabIndex和Z-Index值。[袁永福版權所有]
在同一個軟件中,甚至同一家企業開發的所有的軟件中,對于窗體控件縱向應當采用相同的對齊方式,可以左對齊、居中對齊或者右對齊。不過筆者建議左對齊。
如下圖所示,對于“用戶信息”窗體,控件設計時采用左對齊時窗體的運行時用戶界面如下
而采用居中對齊時窗體運行時的用戶界面如下
采用右對齊時窗體運行時的用戶界面如下
對比這三種情況,應該是控件左對齊排版最好,其次是右對齊,居中對齊最差。因此一般都是采用左對齊方式。[袁永福版權所有]
不過不管采用哪種控件對齊方式,一定要記住在同一個軟件中所有的用戶界面中采用統一的對齊方式,不能一個窗體采用左對齊而另外一個窗體采用右對齊,這是一種相當不專業的表現。
在VS.NET中統一控件的對齊方式是比較簡單的,首先將控件按照大致的位置布局好,然后選中所有要參與對齊操作的控件,點擊工具條上的對齊功能按鈕就可。
下圖就是VS.NET提供的對齊工具條。
該工具條上常用的按鈕功能有
|
移動控件,使得所有控件的左邊緣對齊。 | |
|
移動控件,使得所有的控件的垂直中軸線重合。 | |
|
移動控件,使得所有控件的右邊緣對齊。 | |
|
移動控件,使得所有控件的頂邊緣對齊。 | |
|
移動控件,使得所有控件的水平中軸線重合。 | |
|
移動控件,使得所有控件的底邊緣對齊。 | |
|
設置所有控件的寬度值等于當前控件的值。 | |
|
設置所有控件的高度值等于當前控件的值。 | |
|
設置所有控件的寬度和高度等于當前控件的值。 | |
|
適當的水平移動控件,使得各個控件水平方向的間距相等。 | |
|
適當的水平移動控件,使得各個控件水平方向的間距增加一些,各個控件的間距增加量相同。 | |
|
適當的水平移動控件,使得各個控件水平方向的間距減少一些,各個控件的間距減少量相同。 | |
|
適當的水平移動控件,使得各個控件水平方面緊密的靠在一起,之間沒有間隙。 | |
|
適當的上下移動控件,使得各個控件垂直方向的間距相等。 | |
|
適當的上下移動控件,使得各個控件垂直方向的間距增加一些。 | |
|
適當的上下移動控件,使得各個控件垂直方向的間距減小一些。 | |
|
適當的上下移動控件,使得各個控件垂直方向緊密的靠在一起,之間沒有間隙。 | |
|
使得控件在Z順序方向變得靠前,不被其他控件遮蓋。 | |
|
使得控件在Z順序方向變得靠后,不會覆蓋其他控件。 |
例如有幾個控件的位置設計如下
posted on 2011-08-18 09:44 袁永福 電子病歷,醫療信息化 閱讀(2165) 評論(3) 收藏 舉報

































浙公網安備 33010602011771號