第六章 设计窗体和控件

1. 第六章 设计窗体和控件 6.1 Win Forms窗体控件 6.2 ASP.NET Web服务器控件 6.3 Web窗体HTML控件和客户端脚本 6.4 Web窗体设计模式与HTML模式联合使用 6.5 在代码隐藏类中编写HTML及客户端脚本的方法 6.6 正则表达式 6.7 Web服务器验证控件

2. 6.1 Win Forms窗体控件 6.1.1 控件中一些常用的属性和事件 1. 常用基本属性 1) Name：表示控件的名称。 2) Enabled：表示控件是否可以对用户交互作出响应。 3) Font：表示控件中显示文字的字体格式，包括字体名称、字号以及是否以斜体、加粗和下划线显示。 4) BackColor：表示控件的背景色。 5) ForeColor：表示控件的前景色。 6) Image：表示控件上显示的图像。 7) Location：这是一个复合属性，表示控件的左上角相对于其容器的左上角的坐标。 8) Size：这是一个复合属性，表示控件的高度和宽度。 9) Visible：表示是否显示该控件。

3. 2. 常用事件 1) MouseEnter事件：鼠标进入控件区域内时触发。 2) MouseDown事件：在控件区域内按下鼠标键时触发。 3) MouseLeave事件：鼠标离开控件区域时触发。 6.1.2 Label控件和LinkLabel控件 Label控件通常用于提供控件或窗体的描述性文字，以便为用户提供有帮助作用的信息。 1. Label控件常用的基本属性 Text属性：表示显示的文本内容。 2. 操作示例(略) LinkLabel控件与Label控件非常相似，不同的是它可以显示超级链接。当用户单击LinkLabel控件时，会触发LinkClicked事件，可以在LinkClicked事件中编写代码链接到指定的网页。

4. 6.1.3 Button控件 常用： 1．Text属性：显示控件文本信息 例如：this.button1.Text="确定"; 2．Click事件：单击鼠标左键时触发。 例如： private void button1_Click(object sender, System.EventArgs e) { MessageBox.Show(this,“你点击了[确定]按钮。”, “提示信息”,MessageBoxButtons.OK, MessageBoxIcon.Information); }

5. 参数的含义： （1）object sender：代表发出事件的对象， 此处指button1。使用时可以直接用button1，也可 以像下面形式： Button button=(Button)sender; （2）System.EventArgs e：封装了事件的信息

6. 3. MouseEnter事件：鼠标进入按钮区域时触发。 例如： private void button1_MouseEnter(object sender, System.EventArgs e) { //颜色在System.Drawing名称空间下 this.button1.BackColor=Color.Red; } 4. MouseLeave事件：鼠标离开按钮区域时触发。 例如： private void button1_MouseLeave(object sender, System.EventArgs e) { this.button1.BackColor=SystemColors.Control; }

7. 6.1.4 TextBox控件 常用： 1．Text属性：表示文本框中的当前文本。 例如：this.textBox1.Text="abcd"; 2．Multiline属性：表示是否可以包含多行内容。 3．MaxLength属性：表示用户可以在文本框控件中最多键 入的字符数。 4．PasswordChar属性：用于屏蔽在单行文本框控件中输入的的密码字符 。 5、TextChanged事件：更改Text属性值时触发。 例如： private void textBox1_TextChanged(object sender, System.EventArgs e) { this.textBox2.Text=this.textBox1.Text; }

8. 6.1.5 CheckBox控件 一般在下列情况下使用复选框： 响应用户对复选框的选择，动态改变界面上其它控 件的状态。 访问复选框的状态，执行不同的操作。 常用： （1）Text属性：表示与复选框控件关联的文本。 （2）Checked属性：表示复选框是否处于选中状态。 （3）CheckedChanged事件：表示当Checked属性值更改时触发的操作。

9. 举例： 第一步：在工程中添加一新窗体Form2，设计画面如图：

10. 第二步：在Form2类中，直接添加方法checkBox_CheckedChanged，该方法的功能是当选中某个复选框时，该复选框的文字会变为绿色。 private void checkBox_CheckedChanged(object sender, System.EventArgs e) { CheckBox checkbox=(CheckBox)sender; if(checkbox.Checked) { checkbox.ForeColor=Color.Green; } else { checkbox.ForeColor=Color.Black; } } 第三步：将三个CheckBox控件的CheckedChanged触发事件均选择为checkBox_CheckedChanged。

11. 第四步：添加button1按钮的Click事件代码。 private void button1_Click(object sender, System.EventArgs e) { string str="选择结果："; str+=(this.checkBox1.Checked==true)?(this.checkBox1.Text+"、"):""; str+=(this.checkBox2.Checked==true)?(this.checkBox2.Text+"、"):""; str+=(this.checkBox3.Checked==true)?(this.checkBox3.Text+"、"):""; if(str[str.Length-1]=='、') { str=str.Substring(0,str.Length-1); } MessageBox.Show(str); } 第五步：直接执行窗体Form2的方法。 当执行项目时，C#会自动调用窗体Form1,此处示例不需执行Form1，而希望执行窗体Form2，为了能够直接调用窗体Form2，必须在Form1类中找到Main方法，对其进行修改： static void Main() { Application.Run(new Form2()); }

12. 6.1.6 CheckedListBox控件 当选项比较多时，或者在运行时动态的决定有哪些选项 时，可以使用这种控件。 常用： （1）Items属性：表示控件对象中所有项的集合。 （2）MultiColumn属性：表示控件对象是否支持多列。 （3）ColumnWidth属性：表示控件对象支持多列时，列的宽度。 （4）CheckOnClick属性：表示当选定某项时是否应同时改变复选框状态。 （5) Sorted属性：表示控件对象中各项是否按字母有序。 （6) CheckedItems 属性：表示控件对象中选中项的集合。 （7) CheckedIndices属性：表示控件对象中选中索引的集合。

13. 举例： 第一步：设计界面，添加Items属性选项：“足球 篮球 排球 乒乓球 羽毛球 拳击 体操 射击 跑步 逛街 象棋 围棋 跳棋 军旗 五子棋 拱猪 双升 其它 ”。

14. 第二步：添加button1按钮的Click事件代码： private void button1_Click(object sender, System.EventArgs e) { string str="选择结果："; for(int i=0;i<this.checkedListBox1.CheckedItems.Count;i++) { str+=this.checkedListBox1.CheckedItems[i]+"、"; } if(str[str.Length-1]=='、') { str=str.Substring(0,str.Length-1); } MessageBox.Show(str); } 第三步：运行，选中一项或者同时选中多项，点击按钮观察结 果。

15. 6.1.7 RadioButton控件 单选按钮是以他们所在的容器划分组的，直接在Form上 放置的单选按钮将自动成为一组，这时Form就是容器，当选 中容器中的一个单选按钮时，其他的将自动撤销选中。 如果要在一个Form上创建多个单选按钮组，则需要使用 GroupBox或者Panel控件作为容器。 常用： （1）Text属性 （2）Checked属性 （3）CheckedChanged事件

16. 『举例』第一步：设计窗体。

17. 第二步：添加下列代码： private void radioButton_CheckedChanged(object sender, System.EventArgs e) { RadioButton check=(RadioButton)sender; if(check.Checked) { this.textBox1.Text=check.Text; } } 第三步：将三个RadioButton控件的CheckedChanged触发事件均选择为radioButton_CheckedChanged。 第四步：运行，观察结果。

18. 6.1.8 ListBox控件 列表框控件用来显示一组条目，以便让操作者从中选择 一条或者多条，然后进行相应的处理。 常用： （1）Items属性 （2）MultiColumn属性、SelectionMode属性、Anchor属性 其中：SelectionMode属性有： • None：不能选择 • One：同一时刻只能选择一条 • MultiSimple：同一时刻可以选择一条或者多条 • MultiExtended：同一时刻可以选择一条或者多条，并且可以使用组合键（如Shift和Ctrl）帮助选择（Web Forms）SelectionMode属性 • Single：同一时刻只能选择一条 • Multiple：同一时刻可以选择一条或者多条

19. 举例1：初始化方法。 string[] strArray={"1","2","3"}; this.listBox1.Items.AddRange(strArray); 举例2：添加不重复条目的方法。 bool itemExist=false; for(int i=0;i<this.listBox1.Items.Count;i++) { if(this.listBox1.Items[i].ToString()=="abc"){ itemExist=true; break; } } if(itemExist==false) { this.listBox1.Items.Add("abc"); } else { //…… }

20. //删除当前所选条目的方法 if(this.listBox1.SelectedIndex>-1) //如果选择了某项 { this.listBox1.Items.Remove(this.listBox1.SelectedItem); } //删除选中的一条或者多个条目的方法 for(int i=this.listBox1.SelectedItems.Count-1;i>=0;i--) { this.listBox1.Items.Remove(listBox1.SelectedItems[i]); } 思考：将上述代码改为 for(int i=0;i<this.listBox1.SelectedItems.Count;i++) { this.listBox1.Items.Remove(listBox1.SelectedItems[i]); } 可以吗？为什么？

21. 6.1.9 ComboBox控件 这种控件有两部分组成，即一个文本框和一个列表框。文 本框可以用来显示当前选中的条目，如果文本框可以编辑，则 可以直接输入选择的条目。单击文本框旁边带有向下箭头的按 钮，则会弹出列表框，使用键盘或者鼠标可以在列表框中选择 条目。 常用属性： 1．Text属性、Items属性、DropDownStyle属性。 其中DropDownStyle属性有： Simple：同时显示文本框和列表框，文本框可以被编辑。 • DropDown：只显示文本框，需要通过键盘或者鼠标打开列 • 表框，文本框可以被编辑。 • DropDownList：只显示文本框，需要通过键盘或者鼠标打 • 开列表框，文本框不可以被编辑。 2．SelectedIndexChanged事件。

22. 举例： 第一步：设计窗体。

23. 第二步：添加comboBox1的SelectedIndexChanged事件。 private void comboBox1_SelectedIndexChanged(object sender, System.EventArgs e) { if(this.comboBox1.SelectedIndex>-1 && this.comboBox2.SelectedIndex>-1) { this.listBox1.Items[this.comboBox1.SelectedIndex]= this.comboBox1.SelectedItem.ToString()+" "+ this.comboBox2.SelectedItem.ToString(); } }

24. 第三步：添加comboBox2的SelectedIndexChanged事件。 private void comboBox2_SelectedIndexChanged(object sender, System.EventArgs e) { if(this.comboBox1.SelectedIndex>-1 && this.comboBox2.SelectedIndex>-1) { this.listBox1.Items[this.comboBox1.SelectedIndex]= this.comboBox1.SelectedItem.ToString()+" “ +this.comboBox2.SelectedItem.ToString(); } } 第四步：运行，修改小组和项目选项，观察ListBox中内容的变化。

25. 6.1.10 ToolTip控件 该控件的用途是当鼠标位于某个控件上并停留一段时间后， 显示该控件功能的提示信息。 主要属性有： Active：指示该控件当前是否处于激活状态。 AutomaticDelay：设置经过多长时间显示提示信息，缺省值为500ms。 AutoPopDelay：设置鼠标指针停留多长时间后消失提示信息。 例如：向6.1.7例子中的设计窗体拖放一个ToolTip控件，然 后在构造函数中加入下列代码： this.toolTip1.SetToolTip(this.comboBox1,"选择参加的小组。"); this.toolTip1.SetToolTip(this.comboBox2,"选择左边小组参加的项目。"); this.toolTip1.SetToolTip(this.listBox1,"各小组参加的项目列表。"); 运行，分别将鼠标在上述控件中停留一段时间，观察显示的提示 信息。

26. 6.1.11 PictureBox控件 常用属性有： 1．Image：在PictureBox中显示的图像。 2．SizeMode：图片在控件中的显示方式。 其属性有： AutoSize：调整控件PictureBox大小，使其等于所包含 的图像大小。 CenterImage：如果控件PictureBox比图像大，则图像将 居中显示。如果图像比控件大，则图片将居于 控件中心，而外边缘将被剪裁掉。 Normal：图像被置于控件的左上角。如果图像控件大， 则超出部分被剪裁掉。 StretchImage：控件中的图像被拉伸或收缩，以适合控 件的大小。

27. 举例： 第一步：向窗体上拖放一个PictureBox控件，一个Label控件， 分别调整为适当大小。 第二步：设置pictureBox1的Image属性，将一个图片放入控件 内。然后修改SizeMode属性，观察效果。 第三步：添加下列事件： private void pictureBox1_MouseMove(object sender, System.Windows.Forms.MouseEventArgs e) { this.label1.Text=string.Format(“鼠标在PictureBox中的 位置：x={0},y={1}",e.X,e.Y); } 第四步：运行，在图片内移动鼠标，观察结果。

28. 6.1.12 MainMenu控件 MainMenu实际上是一个组件，该组件在运行时显示一 个菜单。利用菜单设计器可以非常快地建立主菜单的结构。 在菜单中，可以用&符号代表快捷键ALT，如&F代表Alt+F。 举例说明： （1）将MainMenu 组件从“工具箱”拖动到窗体上。 （2）在菜单设计器中，创建一个顶级菜单项，并将其 Text 属性设置为“文件（&F）”，然后依次创建4个子菜单，并将其 Text 属性分别设置为“新建（&New）”、“打开（&Open）”、 “-”和“退出（&Exit）”。

29. （3）再创建一个顶级菜单项，并将其 Text 属性设置为“背 景色”，两个子菜单项，其Text 属性分别设置为“红色”和“白色”。 （4）再创建一个顶级菜单项，并将其 Text 属性设置为“测 试执行文件所在目录”。 （5）双击对应菜单项，添加事件： private void menuItem2_Click(object sender, System.EventArgs e) { MessageBox.Show("你选择的是“新建”"); } private void menuItem3_Click(object sender, System.EventArgs e) { MessageBox.Show("你选择的是“打开”"); } private void menuItem5_Click(object sender, System.EventArgs e) { Application.Exit(); }

30. private void menuItem7_Click(object sender, System.EventArgs e) { this.BackColor=Color.Red; } private void menuItem8_Click(object sender, System.EventArgs e) { this.BackColor=Color.White; } private void menuItem9_Click(object sender, System.EventArgs e) { MessageBox.Show("exe文件所在目录为：\n\n"+ Application.StartupPath+"\n"); } （6）运行，观察结果。

31. 6.1.13 ProgressBar控件 ProgressBar控件用来动态显示一个过程的进行程度， 当某个操作需要较长的时间（几秒钟或者几分钟或者更长） 就需要使用ProgressBar向用户显示操作的进展情况。 1. PictureBox控件中常用的基本属性 1) Minimum：表示进度条的最小值，缺省值为0。 2) Maximum：表示进度条的最大值，缺省值为100。 3) Value：表示进度条的当前值，缺省值为0，它应该在Minimum和Maximum之间取值。 2.操作示例 下面的例子说明了如何使用进度条来显示一个较长时 间的计算过程。

32. 第一步：在窗体上放两个ProgressBar控件，两个 Label控件，两个TextBox控件，一个Button控件，如 图：

33. 第二步：添加[开始计算]按钮的Click响应事件：第二步：添加[开始计算]按钮的Click响应事件： private void button1_Click(object sender, System.EventArgs e) { this.button1.Enabled=false; int outLoop=Int32.Parse(this.textBox1.Text); int innerLoop=Int32.Parse(this.textBox2.Text); this.progressBar1.Maximum=outLoop; this.progressBar2.Maximum=innerLoop; for(int i=1;i<=outLoop;i++) { for(int j=1;j<=innerLoop;j++) { double d=i+j; if(j%100==0) this.progressBar2.Value=j; } this.progressBar1.Value=i; } this.button1.Enabled=true; } 第三步：运行，观察结果。

34. 6.1.14 TabControl控件 使用这个控件可以创建带有多个标签页的窗口，每个标 签页都是一个容纳其它控件（比如TextBox或Button）的容 器。 1. TabControl控件中常用的基本属性 1) Multiline属性 2) ImageList属性 3) TabPages属性

35. 2.操作示例 第一步： （1）创建一个TestTabControl的Windows应用程序，向设 计窗体上拖放一个TabControl控件，调整大小。 （2）向窗体上拖放一个ImageList控件，添加三个图标， 并修改ImageSize属性为32,32；修改ColorDepth为 Depth32Bit。 （3）设置TabControl的ImageList属性为imageList1。 （4）设置TabControl的TabPages属性，添加三个TabPage， 点击[确定]，再分别在三个TabPage上放一些控件便于区分。

36. 设计界面如图所示： 通讯录界面

37. 记事薄界面

38. 日程安排界面

39. 第二步：运行，观察结果。 第三步：修改imageList1的ImageSize属性为16,16； 修改ColorDepth为Depth8Bit，重新运行观察结果。

40. 6.1.15 ListView控件 ListView用列表的形式显示一组数据，每条数据都是 一个ListItem类型的对象。通常使用ListView来显示对数 据库的查询结果，Windows系统中的文件浏览器就是一个 ListView控件。 1. ListView控件中常用的基本属性 1) View属性：表示数据的显示模式，用四种选择： ① Large Icons（大图标）：每条数据都用一个带有文本的大图标表示。 ② Small Icons（小图标）：每条数据都用一个带有文本的小图标表示。 ③ List（列表）：提供ListItems对象视图。 ④ Details（详细列表）：每条数据有多个字段组成，每个字段各占一列。 2) MultiSelect属性：表示是否允许多行选择。

41. 2. 操作示例 ⑴创建一个TestListView的应用程序，然后向窗体上拖 放一个ListView控件，4个Label控件，3个TextBox控件 （textBoxName、textBoxAddress、textBoxPhone），两个 Button控件（buttonAppend、buttonDelete）和一个 Combobox控件，并适当调整控件和窗体的位置和大小。 ⑵设置Combobox控件的[DropDownStyle]属性为 [DropDownList]，并设置其[Items]属性为：大图标、小图 标、列表、详细列表。

42. 窗体如图所示：

43. （3）添加一个ImageList控件（imageList1），设置然（3）添加一个ImageList控件（imageList1），设置然 后向该控件中加入1个16*16的图标文件。 （4）添加一个ImageList控件（imageList2），设置然 后向该控件中加入1个32*32的图标文件，并设置ImageSize为 32,32。 （5）设置ListView控件的属性： LargeImageList：选imageList2 SmallImageList：选imageList1 Columns：姓名（width:100）、地址(width:250)、 电话(width:100) View：当前显示模式，设为[Details]。

44. （6）实现“添加”按钮的Click响应事件： private void buttonAppend_Click(object sender, System.EventArgs e) { int itemNumber=this.listView1.Items.Count; string[] subItem={this.textBoxName.Text, this.textBoxAddress.Text,this.textBoxPhone.Text}; this.listView1.Items.Insert(itemNumber, new ListViewItem(subItem)); this.listView1.Items[itemNumber].ImageIndex=0; }

45. （7）实现“删除”按钮的Click响应事件： private void buttonDelete_Click(object sender, System.EventArgs e) { for(int i=this.listView1.SelectedItems.Count-1; i>=0;i--) { ListViewItem item = this.listView1.SelectedItems[i]; this.listView1.Items.Remove(item); } }

46. （8）添加comboBox1的SelectedIndexChanged事件 private void comboBox1_SelectedIndexChanged(object sender, System.EventArgs e) { string str=this.comboBox1.SelectedItem.ToString(); switch(str) { case "大图标": this.listView1.View=View.LargeIcon; break; case "小图标": this.listView1.View=View.SmallIcon; break; case "列表": this.listView1.View=View.List; break; default: this.listView1.View=View.Details; break; } }

47. （9）在构造函数中加入 this.comboBox1.SelectedIndex=3; 运行结果如图所示

48. 6.1.16 TreeView（树形视图）控件 可以使用TreeView控件显示具有层次结构的数据，比如 磁盘目录、文件和数据库结构等。 下面通过具体例子说明该控件的用法。 第一步：向设计窗体拖放一个TreeView控件，两个 TextBox控件（name属性分别为textBoxRoot、 textBoxChild），三个Button控件（name属性分别为 buttonAddRoot、buttonAddChild、buttonDelete） 如下图所示。

50. 第二步： （1）选择“解决方案资源管理器”右击项目名“添 加”“添加新项”“位图文件”，添加一个大小为16×16像 素的BMP图像，用作根节点以及包含字节点的节点没有被展 开时的图标图像。 （2）再添加一个大小为16×16像素的BMP图像，用作 他们被展开时的图标。 （3）再添加一个大小为16×16像素的BMP图像，用作 不包含子节点的节点图标。 三幅图像效果如图：