2 示例系統概覽與設計（2）
2.4 設計界面
我們先建立一個界面原型系統，為後續具體功能的程式設計實作打下一個基礎。啟動Visual Studio 2010，單擊【檔案】→【建立項目】，在“建立項目”對話框中（圖2-6），選擇“Windows窗體應用程式”，輸入項目名稱 “HomeShop.WinForm”，位置“D:\”，解決方案名稱“HomeShop”，然後單擊【确定】。系統在D盤根目錄下建立了“HomeShop”檔案夾、“HomeShop.WinForm”子檔案夾和相關代碼檔案。
圖2-6 建立項目
在Visual Studio 2010“解決方案資料總管”中，修改項目“HomeShop.WinForm”下的預設窗體檔案Form1.cs為FormMain.cs，并建立窗體檔案FormEdit.cs。項目檔案結構如下圖所示。
圖2-7 項目檔案結構
2.4.1 設計訂單浏覽界面
從工具箱拖拽MenuStrip、Label、TextBox、Button、DataGridView等控件到FormMain窗體，将系統主界面（訂單浏覽界面）設計成如圖2-8所示。
圖2-8 系統主界面（訂單浏覽界面）
FormMain窗體及窗體中各控件的屬性設定如下表。
表2-4 FormMain窗體及窗體中各控件的屬性設定
控件類型
控件名稱
屬性名稱
屬性值
Form
FormMain
FormBorderStyle
FixedSingle
MaximizeBox
False
Size
600, 400
StartPosition
CenterScreen
Text
訂單管理系統
MenuStrip
menuStrip
ToolStripMenuItem
menuAdd
新增(&A)
menuUpdate
修改(&U)
menuDelete
删除(&D)
TextBox
txtCustomerName
Button
btnQuery
查詢(&Q)
DataGridView
gridView
AllowUserToAddRows
AllowUserToDeleteRows
MultiSelect
ReadOnly
True
RowHeadersWidth
10
SelectionMode
FullRowSelect
在FormMain窗體設計器中，右鍵gridView控件→單擊【編輯列】（圖2-9），在“編輯列”對話框中單擊【添加】（圖2-10），在“添加列”對話框中按照表2-5依次添加列資訊。
圖2-9 編輯列
圖2-10 添加列
表2-5 DataGridView控件的列
列名稱
類型
頁眉文本
Data屬性值
Col_OrderID
DataGridViewTextBoxCoulumn
訂單ID
OrderID
Col_CustomerName
顧客姓名
CustomerName
Col_CustomerPhoneNo
聯系電話
CustomerPhoneNo
Col_CustomerAddress
送貨位址
CustomerAddress
Col_OrderTime
下單時間
OrderTime
Col_OrderState
訂單狀态
OrderState
添加完畢後關閉“添加列”對話框，然後在“編輯列”對話框中，按照表1-5依次對應設定列屬性中DataPropertyName的值（如圖2-11）。DataPropertyName屬性的值訓示DataGridView控件的列要綁定的資料庫表（/視圖/查詢結果）中字段的名稱。
圖2-11 編輯列之設定DataPropertyName屬性
2.4.2 設計訂單新增/修改界面
雖然新增和修改訂單的功能是不一樣，但界面表現上是一樣，是以我們可以複用一個Form窗體控件。從工具箱拖拽GroupBox、Label、TextBox、DateTimePicker、ComboBox、Button、DataGridView等控件到FormEdit窗體，将新增/修改訂單界面設計成如圖2-12所示。
圖2-12 新增/修改訂單界面
FormEdit窗體及窗體中各控件的屬性設定如下表。
表2-6 FormEdit窗體及窗體中各控件的屬性設定
FormEdit
CenterParent
新增/修改訂單
GroupBox
grpOrderBaseInfo
訂單基本資訊:
grpOrderProducts
訂購商品資訊:
Enabled
OrderTotal
ForeColor
DarkRed
Product
UnitPrice
Quantity
DateTimePicker
CustomFormat
yyyy-MM-dd HH:mm
Format
Custom
ComboBox
DropDownStyle
DropDownList
btnSaveOrderBaseInfo
儲存(&S)
btnProductAdd
btnProductUpdate
btnProductDelete
在FormEdit窗體設計器中，右鍵gridView控件→單擊【編輯列】，在“編輯列”對話框中單擊【添加】，在“添加列”對話框中按照表2-7依次添加列資訊。添加完畢後關閉“添加列”對話框，然後在“編輯列”對話框中，按照表2-7依次對應設定列屬性中DataPropertyName的值。
表2-7 DataGridView控件的列
Col_Product
商品名稱
Col_UnitPrice
單價
Col_Quantity
訂購數量
Col_Subtotal
小計
Subtotal
2.4.3 測試界面效果
為了能完整看到界面的運作效果，可以在FormMain窗體設計器中輕按兩下【新增】菜單，為其添加單擊事件的代碼（代碼2-5），建立FormEdit對象，并以模式對話框方式顯示FormEdit窗體。
代碼2-5 【新增】菜單單擊事件
private void menuAdd_Click(object sender, EventArgs e)
{
FormEdit formEdit = new FormEdit();
formEdit.ShowDialog(this); //顯示為模式對話框
}
然後，按下【F5】鍵，調試運作系統，即看到運作狀态下的系統主界面（圖2-13），單擊菜單【新增】即可看到運作狀态下的新增/修改訂單界面（圖2-14）。
圖2-13 系統運作-訂單浏覽界面
圖2-14 系統運作-新增/修改訂單界面
2.5 小結
本章對示例系統（訂單管理系統）功能進行了概覽，設計了系統的資料庫，并利用SQL腳本方式在SQL Server 2005中建立了資料庫。然後，利用Visual Studio 2010設計了系統界面原型。後續章節将在此基礎上，由淺入深，逐漸探索各種資料庫程式設計實作方式。