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设计了系统界面原型。后续章节将在此基础上，由浅入深，逐步探索各种数据库编程实现方式。