一、基本要求
1.学习PictureBox控件、Image控件的功能及使用，注意PictureBox与Image的应用场合。
2.学习PictureBox控件与Image控件的Picture属性、Image的Stretch属性、PictureBox的AutoSize属性。学会上述属性的设置方法。
二、教学过程
实例：制作一个如图3.1所示的电子相册。当用户单击窗口下部某个图片的缩略图时，就在上面图片框中显示该图片。图3.1电子相册
(一)任务分析
本任务需要七个能加载图像的控件，由于要求下面六个控件显示缩略图，上面一个控件显示固定大小的图片，根据PictureBox和Image的不同属性，选择六个Image来显示缩略图，选择PictureBox控件来显示图片。
(二)设计界面
1.新建工程，调整好Form1窗口，使其可以放下一个640×480像素的图片：
(1)找到Form1的ScaleMode属性，将其设置成3-Pixel(像素)
(2)调整Form1的大小，当ScaleWidth显示680，ScaleHeifht显示600时，调整结束。
2.放置控件：PictureBox1个，Image6个
在工具箱里找到这两种控件的位置，然后按要求在窗体中画出这几个控件。
注意设计界面的技巧，利用格式化工具简化设计过程，否则很难完成。
对界面进行分析：六个Image控件与一个CommandButton的大小相同、顶端对齐、水平间距相同。注意调整这几个控件大小与位置的方法。
(三)设置属性
有些属性需要单独设置，如表3.1中所列出的属性。表3.1
控件名属性名新的属性值Form1Caption
MaxButton
StartUpPosition电子相册
False
2-屏幕中心Command1Caption关闭
注意设置属性的技巧：有些属性可以集体设置，如6个Image的Stretch属性。首先把6个Image都选中，然后在属性窗口里找到Stretch属性，把它设置成True。
当这个属性为True时，Image框里的图片就可以依据Image框的大小而变化。这6个Image都很小，实际就成为图片的缩略图。
另有一些属性需要用其他方法设置，如Image的Picture属性需要找到图片。加载图片的方法如图3.4所示。6个Image需要一个一个的这样设置其Picture属性。
加载图片如果在某个Image或Picture框里加载了错误的图片，重新加载就能改为正确的图片。如果要删除图片而使Image或Picture空白，可以双击其Picture属性右边的BitMap，然后按一下键盘上的Delete键。
(四)编写程序代码
这里用到较多的是Image控件的Click事件。
注意编写程序的技巧：先分析程序代码，对于6个Image控件，由于其程序代码几乎相同，只是Image后面的数字不同。可以采用先编好一个Image的代码，其余采用复制→粘贴→修改的方法。
程序代码如下：(输入深绿色粗体字)
1.“不看了”：
PrivateSubCommand1_Click()
End
EndSub
2.Image1:
PrivateSubImage1_Click()
Picture1.Picture=Image1.Picture
EndSub
3.Image2:
PrivateSubImage2_Click()
Picture1.Picture=Image2.Picture
EndSub
4.Image3:
PrivateSubImage3_Click()
Picture1.Picture=Image3.Picture
EndSub
5.Image4:
PrivateSubImage4_Click()
Picture1.Picture=Image4.Picture
EndSub
6.Image5:
PrivateSubImage5_Click()
Picture1.Picture=Image5.Picture
EndSub
7.Image6:
PrivateSubImage6_Click()
Picture1.Picture=Image6.Picture
EndSub
(五)运行调试
注意能够分析和处理程序中的错误。
三、尝试和探索
注意PictureBox与Image两控件在处理图片大小方面有不同的方法:PictureBox允许框依据图片的大小而变化，而不允许图片依据框的大小而变化；Image则允许图片依据框的大小而变化。见例题“电子相册1”。
四、知识小结
(一)本课出现的对象
1.Image（图像框）用于显示图片。比较重要的属性是Stretch和Picture。它的Stretch属性，可以使图片随框的大小而变化，所以常常用于显示图片的缩略图。
2.PictureBox（图片框）常用于显示图片。两个比较重要的属性是AutoSize和Picture。
它的AutoSize属性，可以使框随图片的大小而变化。它还可以像Form那样，容纳其他控件。可以在PictureBox上绘制图形。
(二)本课出现的属性
1.ScaleMode（刻度、比例尺模式）理解比例尺模式的含义。
2.ScaleWidth（比例尺宽度）、ScaleHeight（比例尺高度）理解比例尺宽度和比例尺高度的含义。通俗点儿讲，在平面直
角坐标系中，x轴和y轴的比例尺也常常是不同的。例如，x轴方向，可用10毫米表示一个单位长度；y轴方向，可用5毫米表示一个单位长度。相当于作图时宽度比例尺和高度比例尺不同。
3.Image的Stretch（伸展）属性设置Image控件里的图片方式，逻辑数据，有效数据为False及True。True：图片以框的大小为准显示；False：图片以实际大小显示。
4.PictureBox的AutoSize（自动大小）属性设置Picture控件里的图片方式，逻辑数据，有效数据为False及True。True：图片以实际大小显示；False：只显示与框大小相同的部分图片。
5.PictureBox控件与Image控件的Picture属性为控件加载图片，一般用“加载图片”对话框（见图3.4）或LoadPicture（）函数为控件加载图片。
(三)今后要注意设置界面的技巧：
选中一组控件后，利用格式化工具简化设计过程；设计属性的技巧：选中一组相关控件后，在属性窗口设置；编写程序的技巧：先分析程序的结构和内容，如果共性很多，采用复制→粘贴→修改的方法。第三课电子相册（2课时）这一教您现在访问的是中国学科吧旗下教案网http://www.jsfw8.com/jafs/