2.2设计控件（课件）-《程序设计基础（Visual Basic）》同步教学（语文出版社）

模块2 程序界面设计基础 学习目标 掌握窗体的设计方法 掌握控件的设计方法 任务2 设计控件 任务要点 掌握控件的添加和删除方法 掌握控件的编辑 掌握标签、文本框和命令按钮等基本控件的常用属性、事件和方法 一、控件的添加和删除 案例2-9： 制作“不忘初心”，效果如图所示。 案例分析 立体字效果实际是使用两个标签，利用白色和黑色的错位来达到立体的效果。为了实现错位，只要使两个标签的Top和Left值有一点差距即可。同时，为了避免上面白色文字的标签覆盖黑色文字的标签，要将上面白色文字的标签的BackStyle背景样式设置为透明。 案例实施 1.创建窗体，修改属性 对象名称 对象属性 属性值 说明 Form1 Caption 立体字 设置窗体的标题内容 Hight 2500 设置窗体的高度 Width 5400 设置窗体的宽度 BackColor &H00FFC0FF& 设置窗体的背景色 StartUpPosition 2-屏幕中心 设置窗体首次出现时的位置 Label1 Caption 不忘初心 设置标签显示的内容 BorderStyle 1-Fixed Single 设置标签的边框样式 Font 楷体、加粗、初号 设置标签显示文字的字体种类、字体样式、字体大小等内容 ForeColor &H00000000&（黑色） 设置标签显示文字的颜色 Alignment 2-Center 设置标签显示的文字居中对齐 AutoSize True 设置标签随显示的文字自动调整大小 Label2 ForeColor &H00FFFFFF&（白色） 设置标签显示文字的颜色 BackStyle 0-Transparent 设置标签的背景样式为透明 案例实施 2.添加标签控件 单击【工具箱】中的【标签控件】，标签控件的图标反相显示（凹下去）；将鼠标移到窗体上，这时鼠标指针变为“＋”型，将“＋”移到合适位置，按下鼠标左键并拖动，出现一个矩形框。稍作停顿，系统会出现尺寸，当大小合适时，松开鼠标左键，形成一个标签。 修改标签Label1的属性； 选中Label1，按下Ctrl+C快捷键复制Label1； 按下Ctrl+V快捷键粘贴Label1，系统提示“已经有一个控件为‘Label1’，创建一个控件数组吗？”单击【否】按钮后，窗体左上角生成一个复制出来的标签控件Label2。 选中刚才复制出来的标签Label2，在【属性窗口】中修改其属性； 拖动标签Label2与标签Label1重合；在【属性窗口】中修改标签Label2的Top与Left属性值，在原值基础上每次增加或减少10，观察结果，直到达到满意的立体字效果为止。 内容讲解 向窗体中添加其他控件的方法： 方法1：“双击”法 即在【工具箱】中直接双击要添加的控件图标。这样产生的控件有固定的位置和尺寸。 方法2：“绘制”法 即单击【工具箱】中要添加的控件图标，在窗体上按下鼠标左键并拖动，绘制出需要大小的控件。 方法3：“Ctrl”法 即按下Ctrl键不放，单击【工具箱】中要添加的控件图标，使该图标反相显示，放开Ctrl键，然后用“绘制”法添加一个或多个控件，该控件图标一直反相显示。要结束绘制该控件，只要单击【工具箱】中其他图标即可。 课堂小练手 2-4：DIY“文本显示器”，如图所示，单击【显示】按钮，标签中显示“知识就是力量！”，单击【清除】按钮，标签中的内容被清除。 二、控件的编辑 案例2-10： 制作“简易配色器”，如图所示。 案例分析 该界面使用标签控件和命令按钮控件完成。单击“文字颜色”下方的四个颜色按钮时“示例文字”变成相应的颜色，单击“背景颜色”下方的颜色按钮时“示例文字”的背景变成相应的颜色。 案例实施 向窗体上添加所需控件 1.分别添加Label1和Label2，并放置在合适的位置。 2.选中Command1控件，修改相应的属性 3.在复制3个命令按钮要求不作为控件数组出现，并将其调整到合适位置 4.选中Label2和四个命令按钮，按下“Ctrl+C”复制，系统提示是否创建控件数组时，同样选择否，按下“Ctrl+V”粘贴，并将这一组控件拖动到合适位置 5.选中四个命令按钮，选择【格式】菜单中的【水平间距】→【相同间距】，将四个命令按钮水平排列间距相同。可以用【格式】菜单中的【对齐】、【水平间距】和【垂直间距】菜单完成界面各个控件的排列，使整个界面看起来更加整齐美观。 案例实施 设置属性，并编写代码 对象名称 对象属性 属性值 说明 Form1 Caption 立体字 设置窗体的标题内容 StartUpPosition 2-屏幕中心 设置窗体首次出现时的位置 Label1 Caption 少年强则国强 设置标签显示的内容 Font 楷体、加粗、一号 设置标签显示文字的字体种类、字体样式、字体大小等内容 BorderStyle 1-Fixed Single 设置标签的边框样式 Label2 Caption 文字颜色 设置标签显示的内容 Font 楷体、加粗、小四 设置标签显示文字的字体种类、字体样式、字体大小等内容 Alignment 2-Center 设置标签显示的文字居中对齐 AutoSize True 设置标签随显示的文字自动调整大小 BackStyle 0-Transparent 设置标签的背景样式为透明 Label3 Caption 背景颜色 设置标签显示的内容 Command1 Caption 红 设置命令按钮显示的内容 Command2 Caption 黄 设置命令按钮显示的内容 Comman3 Caption 蓝 设置命令按钮显示的内容 Comman4 Caption 绿 设置命令按钮显示的内容 Command5 Caption 红 设置命令按钮显示的内容 Command6 Caption 黄 设置命令按钮显示的内容 Comman7 Caption 蓝 设置命令按钮显示的内容 Comman8 Caption 绿 设置命令按钮显示的内容 内容讲解 件边框出现的8个蓝色的小方块，可称为控件“调节点”或调节名柄，它们在控件刚添加或单击控件时出现，表明该控件是活动的，称为“活动控件”或“当前控件”。 控件的移动和大小调整的三种方法： 方法1：“手动” 法 方法2：“属性”法 方法3：“菜单”法 方法3：“菜单”法 14 课堂小练手 2-5：设计简易加法器，运行界面如图所示。 任务3 基本控件属性、事件和方法设计 案例2-11 ：制作“家庭留言簿” 要求： “家庭留言簿”程序运行的初始界面如图2-47所示。 单击【妈妈】按钮，出现如图2-48所示界面，可以在【妈妈的留言】处留言。 单击【孩子】按钮，出现如图2-49所示界面，可以在【孩子的留言】处留言。 案例分析 从图2-47至图2-49三个界面分析，此程序界面用到了两个标签（“妈妈的留言”和“孩子的留言”）、两个文本框（用来接收用户从键盘输入的信息，作为家庭成员的留言）和三个命令按钮。 案例实施 1.添加控件 2.设置属性 3.编写代码 对象名称 对象属性 属性值 说明 Form1 Caption 家庭留言簿 设置窗体的标题内容 StartUpPosition 2-屏幕中心 设置窗体首次出现时的位置 MinButton false 隐藏窗体的最小化按钮 MaxButton false 隐藏窗体的最大化按钮 Label1 Caption 妈妈的留言 设置标签显示的内容 Font 楷体、加粗、四号 设置标签显示文字的字体样式 AutoSize True 设置标签随显示的文字自动调整大小 ForeColor &H000000C0& 设置标签显示文字的颜色 Label2 Caption 文字颜色 设置标签显示的内容 Font 楷体、加粗、小四 设置标签显示文字的字体样式 AutoSize True 设置标签随显示的文字自动调整大小 ForeColor &H00C000C0& 设置标签显示文字的颜色 Text1 Text 空 设置文本框显示的内容 MultiLine True 设置文本框输入或显示多行文本 ScrollBars 3-Both 设置文本框同时加水平和垂直滚动条 BackColor &H00C0E0FF& 设置文本框的背景色 Font 楷体、四号 设置文本框显示文字的大小 Text2 Text 空 设置文本框显示的内容 MultiLine True 设置文本框输入或显示多行文本 ScrollBars 3-Both 设置文本框同时加水平和垂直滚动条 BackColor &H0080FFFF& 设置文本框的背景色 Font 楷体、四号 设置文本框显示文字的大小 Command1 Style 1-Graphical 设置命令按钮外观为图形风格 Picture \素材\图1.jpg 设置命令按钮显示的图片 ToolTipText 妈妈 设置命令按钮上的提示性文本信息 Command2 Style 1-Graphical 设置命令按钮外观为图形风格 Picture \素材\图2.jpg 设置命令按钮显示的图片 ToolTipText 孩子 设置命令按钮上的提示性文本信息 Comman3 Caption 关闭 设置命令按钮显示的内容 内容讲解 文本框（TextBox）的重要属性： Text——文本属性 MultiLine——多行属性 ScrollBars——滚动条属性 决定文本框中有无滚动条，以及有水平还是垂直滚动条。 取值如下： 0——None：不加滚动条 1——Horizontal：加水平滚动条 2——Vertical：加垂直滚动条 3——Both：同时加水平和垂直滚动条 Locked——锁定属性 内容讲解 命令按钮（CommandButton）的重要属性： Style——样式属性 0——Standard：（缺省）标准的Windows风格按钮，不能显示图形。 1——Graphical：图形的，按钮上可以显示图形，也可以显示文字。 Picture——图形属性 当Style属性为1时，Picture属性可显示图形文件（.bmp和.ico）。 ToolTipText——工具提示属性 与Picture属性同时使用，配合图形以较少的提示文字形式共同解释命令按钮的功能。 课堂小练手 2-6：对案例2-10配色器界面作适当修改，运行如图所示。 实训设计标准计算器界面 实训要求：仿照Windows系统中标准型的计算器，如图所示，设计窗体界面，不要求实现计算功能。 $$