.NET数据库编程求索之路--2.示例系统概览与设计（2）

Posted on 2012-06-08 21:19 SummerRain 阅读(598) 评论(0) 编辑收藏举报

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	Text	新增(&A)
	menuUpdate	Text	修改(&U)
	menuDelete	Text	删除(&D)
TextBox	txtCustomerName
Button	btnQuery	Text	查询(&Q)
DataGridView	gridView	AllowUserToAddRows	False
		AllowUserToDeleteRows	False
		MultiSelect	False
		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	DataGridViewTextBoxCoulumn	顾客姓名	CustomerName
Col_CustomerPhoneNo	DataGridViewTextBoxCoulumn	联系电话	CustomerPhoneNo
Col_CustomerAddress	DataGridViewTextBoxCoulumn	送货地址	CustomerAddress
Col_OrderTime	DataGridViewTextBoxCoulumn	下单时间	OrderTime
Col_OrderState	DataGridViewTextBoxCoulumn	订单状态	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窗体及窗体中各控件的属性设置

控件类型	控件名称	属性名称	属性值
Form	FormEdit	FormBorderStyle	FixedSingle
		MaximizeBox	False
		Size	600, 400
		StartPosition	CenterParent
		Text	新增/修改订单
GroupBox	grpOrderBaseInfo	Text	订单基本信息:
	grpOrderProducts	Text	订购商品信息:
	grpOrderProducts	Enabled	False
TextBox	OrderID	Enabled	False
	CustomerName
	CustomerPhoneNo
	CustomerAddress
	OrderTotal	Enabled	False
	OrderTotal	ForeColor	DarkRed
	Product
	UnitPrice
	Quantity
DateTimePicker	OrderTime	CustomFormat	yyyy-MM-dd HH:mm
DateTimePicker	OrderTime	Format	Custom
ComboBox	OrderState	DropDownStyle	DropDownList
Button	btnSaveOrderBaseInfo	Text	保存(&S)
	btnProductAdd	Text	新增(&A)
	btnProductUpdate	Text	修改(&U)
	btnProductDelete	Text	删除(&D)
DataGridView	gridView	AllowUserToAddRows	False
		AllowUserToDeleteRows	False
		MultiSelect	False
		ReadOnly	True
		RowHeadersWidth	10
		SelectionMode	FullRowSelect

在FormEdit窗体设计器中，右键gridView控件→单击【编辑列】，在“编辑列”对话框中单击【添加】，在“添加列”对话框中按照表2-7依次添加列信息。添加完毕后关闭“添加列”对话框，然后在“编辑列”对话框中，按照表2-7依次对应设置列属性中DataPropertyName的值。

表2-7 DataGridView控件的列

列名称	类型	页眉文本	Data属性值
Col_Product	DataGridViewTextBoxCoulumn	商品名称	Product
Col_UnitPrice	DataGridViewTextBoxCoulumn	单价	UnitPrice
Col_Quantity	DataGridViewTextBoxCoulumn	订购数量	Quantity
Col_Subtotal	DataGridViewTextBoxCoulumn	小计	Subtotal