C#练习创建图片编辑器.docx
- 文档编号:10505227
- 上传时间:2023-02-17
- 格式:DOCX
- 页数:30
- 大小:163.46KB
C#练习创建图片编辑器.docx
《C#练习创建图片编辑器.docx》由会员分享,可在线阅读,更多相关《C#练习创建图片编辑器.docx(30页珍藏版)》请在冰豆网上搜索。
C#练习创建图片编辑器
教程1:
创建图片查看器
VisualStudio2010
在本教程中,您将生成一个从文件加载图片并将其显示在窗口中的程序。
您将学习如何拖动控件(如窗体上的按钮和图片框)、设置控件属性,以及如何使用容器来平滑地调整窗体的大小。
您还将开始编写代码。
您将学习如何:
创建新项目。
测试(调试)应用程序。
向窗体中添加基本控件(如复选框和按钮)。
使用布局在窗体上定位控件。
向窗体中添加“打开文件”和“颜色”对话框。
使用IntelliSense和代码段编写代码。
编写事件处理程序方法。
当您完成时,程序将类似下图所示。
在本教程中创建的图片
说明
在本教程中,同时涉及VisualC#和VisualBasic,因此请关注特定于您使用的编程语言的信息。
相关主题
标题
说明
步骤1:
创建Windows窗体应用程序项目
首先创建Windows窗体应用程序项目。
步骤2:
运行程序
运行您在上一步中创建的Windows窗体应用程序。
步骤3:
设置窗体属性
使用“属性”窗口更改窗体的显示方式。
步骤4:
使用TableLayoutPanel控件设置窗体布局
向窗体中添加TableLayoutPanel控件。
步骤5:
向窗体添加控件
向窗体中添加PictureBox和CheckBox之类的控件。
向窗体中添加按钮。
步骤6:
命名按钮控件
将按钮重命名为更有意义的名称。
步骤7:
向窗体添加对话框组件
向窗体中添加“OpenFileDialog”组件和“ColorDialog”组件。
步骤8:
为“显示图片”按钮事件处理程序编写代码
使用IntelliSense工具编写代码。
步骤9:
检查代码、为代码添加注释和测试代码
检查并测试代码。
根据需要添加注释。
步骤10:
创建其他按钮和复选框
使用IntelliSense编写代码以使其他按钮和复选框工作。
步骤11:
运行程序并试用其他功能
运行程序并设置背景颜色。
尝试其他功能,例如更改颜色、字体和边框。
步骤1:
创建Windows窗体应用程序项目
VisualStudio2010
创建图片查看器的第一步是创建Windows窗体应用程序项目。
创建Windows窗体应用程序项目
1.在“文件”菜单上,单击“新建项目”。
2.如果没有使用VisualStudio学习版,您需要先选择一种语言。
从“安装的模板”列表中选择“C#”或“VisualBasic”。
3.单击“Windows窗体应用程序”图标,输入“PictureViewer”作为名称,然后单击“确定”。
VisualStudio将自动为您创建解决方案。
4.在“文件”菜单上,单击“全部保存”;或者在工具栏上单击“全部保存”按钮,此按钮如下所示。
“全部保存”工具栏按钮
说明
VisualStudio将项目保存到项目文件夹中。
集成开发环境(IDE)会自动填写文件夹名称和项目名称。
如果使用的是VisualStudio学习版,您需要完成步骤5-7。
对于非学习版的VisualStudio,项目在第一次创建时即被保存,因此不需要步骤5-7。
5.确保项目保存在“我的文档”文件夹下的某个文件夹中。
6.确认选中“创建解决方案的目录”复选框。
7.单击“保存”。
说明
当创建项目时,VisualStudioIDE会自动创建若干个文件并将其放入文件夹中。
可以使用“解决方案资源管理器”窗口来浏览这些文件。
在第一次创建项目时,这些文件将保存到一个临时文件夹中。
单击“全部保存”按钮即是告知IDE将这些文件复制到一个永久文件夹(通常位于“我的文档”文件夹下)中。
8.您可能已经注意到“解决方案”和“项目”这两个词具有不同的含义,本教程稍后将对此进行解释。
9.下图显示IDE窗口应具有的外观。
10.IDE窗口
11.
12.如果您的屏幕与上面的图片不太一样,请在“窗口”菜单上,单击“重置窗口布局”。
如果缺少任何窗口,请在“视图”菜单上,单击“属性窗口”或“解决方案资源管理器”。
如果有多余的窗口打开,请单击右上角的“关闭”(x)按钮。
13.查看图片。
从左上角开始沿逆时针方向,图片将依次显示:
主窗口 您可在此处执行大部分的工作。
通过此窗口可以使用窗体并编辑代码。
当前,此窗口在“窗体编辑器”中显示一个窗体。
在此窗口的顶部有两个选项卡:
“起始页”选项卡和“Form1.cs[设计]”选项卡。
(在VisualBasic中,后缀名是.vb而不是.cs。
)
“解决方案资源管理器”窗口 在此处显示解决方案中的所有文件。
如果单击某个文件,则“属性”窗口中的信息将发生改变。
如果双击某个代码文件(在VisualC#中以.cs结尾,在VisualBasic中以.vb结尾),则该代码文件或用于该代码文件的设计器将打开。
“属性”窗口 您可在此处更改您在其他窗口中选定的项的属性。
说明
请注意“解决方案资源管理器”窗口的顶部行将如何显示“解决方案‘PictureViewer’(1个项目)”。
IDE已经为您创建了一个解决方案,而且此解决方案包含多个项目。
现在,您将使用包含单个项目的解决方案。
步骤2:
运行程序
VisualStudio2010
一旦创建新的解决方案,实际上就生成了所运行的程序。
该程序并未执行其他操作,它只是显示了一个在标题栏中显示“Form1”的空窗口。
但该程序确实在运行,您即将查明这一点。
运行程序
1.按F5键或单击如下所示的“启动调试”工具栏按钮。
启动“调试”工具栏按钮
2.IDE将运行程序,并会显示一个窗口。
下图显示了刚生成的程序。
该程序正在运行,您很快会向它添加内容。
正在运行的Windows窗体应用程序
3.返回IDE,并查看新工具栏。
调试工具栏
4.单击方形的“停止调试”按钮,或从“调试”菜单中单击“停止调试”。
程序将停止运行,并且窗口将关闭。
也可以直接关闭打开的窗口来停止调试。
说明
在从IDE内部运行程序时,这一操作称作“调试”,因为通常将使用此操作来跟踪并修复Bug。
该程序是一个真正的程序,您可以像运行任何其他程序一样运行它。
步骤3:
设置窗体属性
VisualStudio2010
接下来,使用“属性”窗口来更改窗体的外观。
设置窗体属性
1.确保您查看的是Windows窗体设计器。
在IDE中,单击“Form1.cs[设计]”选项卡(在VisualBasic中为“Form1.vb[设计]”选项卡)。
2.单击窗体中的任意位置以将其选定。
查看“属性”窗口,该窗口此时应显示窗体的属性。
窗体具有各种属性。
例如,可以设置前景色和背景色、窗体顶部显示的标题文本、窗体的大小和其他属性。
说明
如果“属性”窗口未出现,请通过单击方形的“停止调试”按钮(或直接关闭窗口)来停止程序。
3.在选定窗体后,向下滚动到“属性”窗口的底部,然后找到“Text”属性。
单击“Text”,键入“图片查看器”,然后按Enter。
此时,窗体的标题栏中将显示文本“图片查看器”,并且“属性”窗口的外观应与下图类似。
“属性”窗口
说明
可以通过“按分类顺序”视图或“字母顺序”视图对属性进行排序。
可以通过使用“属性”窗口上的按钮在这两类视图之间进行切换。
在本教程中,通过“字母顺序”视图查找属性会更加轻松。
4.返回Windows窗体设计器。
单击窗体右下角的拖动柄,此拖动句柄是位于窗体右下角的小空心方形,如下所示。
拖动句柄
拖动此拖动柄调整窗体的大小,使其更宽且更高一些。
5.查看“属性”窗口,您会发现“Size”属性已更改。
每当您调整窗体的大小时,“Size”属性都会更改。
尝试拖动窗体以将其大小调整为大约550x350,此大小应适合于该项目。
6.重新运行程序。
按F5键或单击如下所示的“启动调试”工具栏按钮。
启动“调试”工具栏按钮
与之前的操作一样,IDE会生成并运行程序,并且将显示一个窗口。
7.在转到下一个步骤之前,请停止程序,因为IDE不允许您在程序处于运行状态时更改程序。
步骤4:
使用TableLayoutPanel控件设置窗体布局
VisualStudio2010
在此步骤中,将向窗体中添加一个TableLayoutPanel控件。
使用TableLayoutPanel控件设置窗体布局
1.转到Windows窗体设计器。
查看窗体左侧并找到“工具箱”选项卡。
将鼠标指向并悬停在“工具箱”选项卡上,工具箱将出现。
(或者,从“视图”菜单中单击“工具箱”。
)
2.单击“容器”组旁边的加号打开该组,如下图中所示。
“容器”组
3.可以向窗体中添加类似按钮、复选框和标签这样的控件。
在工具箱中双击TableLayoutPanel控件。
当执行此操作时,IDE会将TableLayoutPanel控件添加到窗体中,如下图中所示。
TableLayoutPanel控件
说明
添加TableLayoutPanel之后,如果窗体中出现标题为“TableLayoutPanel任务”的窗口,请单击窗体内的任何位置来关闭此窗口。
在本教程后面部分,您将学习到有关此窗口的更多内容。
说明
请注意,当单击“工具箱”选项卡时工具箱是如何展开以覆盖窗体的,以及当单击工具箱外部后它是如何关闭的。
这就是IDE自动隐藏功能。
通过单击窗口右上角的图钉图标来在自动隐藏和就地锁定之间切换,可以为任何窗口打开或关闭工具箱。
图钉图标如下所示。
图钉图标
4.单击“TableLayoutPanel”确保选定它。
可以通过查看“属性”窗口顶部的下拉列表来验证选定哪个控件,如下图中所示。
显示TableLayoutPanel控件的“属性”窗口
5.控件选择器是“属性”窗口顶部的下拉列表。
在此示例中,它显示选定了名为tableLayoutPanel1的控件。
可以通过在Windows窗体设计器中单击或者从控件选择器中进行选择来选择控件。
选择TableLayoutPanel之后,请找到“Dock”属性并单击“Dock”,此属性应设置为“无”。
请注意,一个下拉箭头将出现在值旁边。
单击该箭头,然后选择“Fill”按钮(中间的大按钮),如下图中所示。
选定“Fill”的“属性”窗口
6.在将TableLayoutPanel的“Dock”属性设置为“Fill”之后,此面板将填充整个窗体。
如果再次调整窗体的大小,则TableLayoutPanel将保持停靠状态,并自行调整大小以适合窗体。
说明
TableLayoutPanel与MicrosoftOfficeWord中的表类似:
它具有行和列,并且个别单元格可以跨多个行和列。
每个单元格都可以存放一个控件(例如按钮、复选框或标签)。
TableLayoutPanel将具有一个跨其整个顶部行的PictureBox控件、一个位于其左上角单元格中的CheckBox控件和四个位于其右上角单元格中的Button控件。
说明
尽管曾提到每个单元格只能存放一个控件,但是右上角单元格中具有四个Button控件。
这是因为您可以在单元格中放入一个可存放其他控件的控件。
这种控件称为容器,TableLayoutPanel即是一个容器。
在本教程后面部分,您将学习到有关容器的更多内容。
7.TableLayoutPanel当前具有两个大小相等的行和两个大小相等的列。
您需要调整它们,以使顶部行和右侧列更大一些。
在Windows窗体设计器中选择“TableLayoutPanel”。
在右上角有一个小的黑色三角形按钮,如下所示。
三角形按钮
此按钮指示该控件具有帮助您自动设置其属性的任务。
8.单击该三角形可显示控件的任务列表,如下图中所示。
TableLayoutPanel任务
9.单击“编辑行和列”任务以显示“列和行样式”窗口。
单击“Column1”,确保选中“百分比”按钮并在“百分比”框中输入15,将此控件的大小设置为15%。
(这是将在后面的教程中使用的NumericUpDown控件。
)单击“Column2”并将其设置为85%。
先不要单击“确定”按钮,因为这将关闭此窗口。
(但如果这样做,您可以使用任务列表重新打开它。
)
10.从窗口顶部的“显示”下拉列表中单击“行”。
将“Row1”设置为90%并将“Row2”设置为10%。
11.单击“确定”。
现在,TableLayoutPanel应具有一个大的顶部行、一个小的底部行、一个小的左侧列和一个大的右侧列。
可以在TableLayoutPanel中拖动这些行和列的边框来调整其大小。
步骤5:
向窗体添加控件
VisualStudio2010
在此步骤中,将向窗体添加控件(如PictureBox控件和CheckBox控件)。
然后向窗体添加按钮。
向窗体添加控件
1.转到工具箱,并展开“公共控件”组。
这将显示窗体上最常见的控件。
2.双击PictureBox控件。
IDE会将一个PictureBox控件添加到窗体中。
由于将停靠TableLayoutPanel以填充窗体,因此IDE会向第一个空单元格添加PictureBox控件。
3.单击新的PictureBox控件上的黑色三角形以显示其任务列表,如下图所示。
PictureBox任务
说明
如果误将错误类型的控件添加到TableLayoutPanel中,可删除该控件。
右击该控件,然后从显示的菜单中单击“删除”。
也可从“编辑”菜单中选择“撤消”,以从窗体中删除该控件。
4.单击“在父容器中停靠”链接。
这会自动将PictureBox的“Dock”属性设置为“Fill”。
若要查看此情况,请单击PictureBox控件以将其选定,转到“属性”窗口,并确保将“Dock”属性设置为“Fill”。
5.更改PictureBox的“ColumnSpan”属性,使PictureBox跨两个列。
选择PictureBox控件并将其“ColumnSpan”属性设置为“2”。
此外,当PictureBox为空时,您需要显示一个空框架。
将其“BorderStyle”属性设置为“Fixed3D”。
6.将CheckBox控件添加到窗体。
双击工具箱中的“CheckBox”项,使IDE向表中的下一个空白单元格添加新的CheckBox控件。
由于PictureBox占据了前两个单元格,因此该CheckBox控件将添加到左下方的单元格。
选中该新的CheckBox控件,并将其“Text”属性设置为“拉伸”,如下图所示。
具有“拉伸”属性的TextBox控件
7.转到工具箱中的“容器”组(其中包含TableLayoutPanel控件),并双击“FlowLayoutPanel”项以将一个新控件添加到PictureBox的最后一个单元格中。
然后将其停靠在父容器中(通过从任务列表中选择“在父容器中停靠”或通过将其“Dock”属性设置为“Fill”)。
说明
FlowLayoutPanel是一个容器,它将其他控件按顺序排列在行中。
在调整FlowLayoutPanel的大小时,如果FlowLayoutPanel的空间允许将其所有控件置于单个行中,则它会执行此操作。
否则,它会将这些控件依次排列到多个行中(一个行位于另一个行的上方)。
将使用FlowLayoutPanel来容纳四个按钮。
添加按钮
1.选择已添加的FlowLayoutPanel。
转到工具箱中的“公共控件”,然后双击“Button”图标以将一个名为“button1”的按钮添加到FlowLayoutPanel中。
重复上述操作以添加另一个按钮。
IDE确定已存在名为“button1”的按钮,并会将下一个按钮命名为“button2”。
说明
在VisualBasic中,按钮名称的首字母都是大写的,因此“button1”为“Button1”,“button2”为“Button2”,依此类推。
2.通常,使用工具箱来添加其他按钮。
这一次单击“button2”,然后在“编辑”菜单上,单击“复制”(或按Ctrl+C)。
在“编辑”菜单上,单击“粘贴”(或按Ctrl+V)粘贴该按钮的副本。
此时再次粘贴该副本。
IDE此时已添加“button3”和“button4”。
说明
可以复制并粘贴任何控件。
IDE以逻辑方式命名和放置新的控件。
如果将一个控件粘贴到容器中,则IDE将选择下一个逻辑放置空间。
3.选择第一个按钮,并将其“Text”属性设置为“显示图片”。
然后分别将后面的三个按钮的“Text”属性设置为“清除图片”、“设置背景色”和“关闭”。
4.下一步是调整这些按钮的大小并对它们进行排列,使它们与面板的左侧对齐。
选择FlowLayoutPanel并查看其“FlowDirection”属性。
将该属性更改为“RightToLeft”。
一旦执行此操作,这些按钮会自行与单元格的右侧对齐,并颠倒其顺序,以使“显示图片”按钮位于右侧。
说明
如果这些按钮的顺序仍是错误的,则可以将这些按钮在FlowLayoutPanel中四处拖动以按任意顺序重新排列它们。
可以单击其中某个按钮,并将它向左或向右拖动。
5.单击“关闭”按钮以将其选定。
按住Ctrl键并单击其他三个按钮,使它们都处于选定状态。
在选定所有这些按钮后,转到“属性”窗口,然后向上滚动到“AutoSize”属性。
此属性会告知按钮自动调整自身大小以适合其所有文本。
将此属性设置为“true”。
此时这些按钮应具有适当大小且按照适当的顺序排列。
(只要选定所有四个按钮,就可以同时更改所有四个“AutoSize”属性。
)下图显示了这四个按钮。
包含四个按钮的图片查看器
6.此时重新运行程序以查看具有最新布局的窗体。
单击这些按钮和复选框并不会执行任何操作,但它们很快将会起作用。
步骤6:
命名按钮控件
VisualStudio2010
窗体上只有一个PictureBox。
当添加此控件时,IDE自动将其命名为“pictureBox1”。
只有一个名为“checkBox1”的CheckBox。
很快,您将编写一些代码,并且这些代码将引用到上述的CheckBox和PictureBox。
因为上述每种控件都只有一个控件,所以当您在代码中看到“pictureBox1”或“checkBox1”时,应知道其中的含义。
说明
在VisualBasic中,任何控件名称的第一个字母默认是首字母大写,因此名称为“PictureBox1”、“CheckBox1”等等。
窗体上包含四个按钮,IDE将它们分别命名为“button1”、“button2”、“button3”和“button4”。
只看这些按钮的当前名称,您并不知道哪个按钮是“关闭”按钮,哪个按钮是“显示图片”按钮。
这就是命名按钮控件很有用的原因了。
命名按钮控件
1.单击“关闭”按钮。
(如果您仍选择了所有按钮,请按ESC键取消选择。
)在“属性”窗口中滚动,直到看到“(Name)”属性。
(当属性按字母顺序排列时,“(Name)”属性位于顶部附近。
)将此名称更改为“closeButton”,如下图中所示。
包含closeButton名称的“属性”窗口
说明
如果尝试将按钮的名称更改为“closeButton”(在单词“close”和“Button”之间有一个空格),则IDE将显示错误消息“属性值无效”。
控件名称中不允许使用空格和一些其他字符。
2.将其他三个按钮重命名为“backgroundButton”、“clearButton”和“showButton”。
可以通过单击“属性”窗口中的控件选择器下拉列表,来验证这些名称。
新的按钮名称将出现。
3.在“Windows窗体设计器”中双击“显示图片”按钮。
当执行此操作时,IDE将在主窗口中打开一个称为“Form1.cs”选项卡的新选项卡,如下图中所示。
使用VisualC#代码的Form1.cs选项卡
4.重点考虑这一部分的代码。
privatevoidshowButton_Click(objectsender,EventArgse)
{
}
您需要查找一个称为showButton_Click()的方法。
当您单击“showButton”按钮时,IDE添加了此方法。
此方法包含单击“显示图片”按钮时运行的代码。
说明
在本教程中,自动生成的VisualBasic代码进行了简化(删除了圆括号()之间的所有代码)。
只要出现自动生成的代码,您都可以删除相同的代码。
程序不管怎样都将工作。
对于其余教程,任何自动生成的代码都将尽可能得到简化。
5.转到设计器选项卡(在VisualC#中为“Form1.cs[设计]”选项卡,在VisualBasic中为“Form1.vb[设计]”选项卡),并双击“清除图片”按钮。
对于最后两个按钮,重复此操作。
IDE每次都会向窗体的代码中添加一个新方法。
6.若要再添加一个方法,请双击Windows窗体设计器中的CheckBox控件,以使IDE添加checkBox1_CheckedChanged()方法。
每当用户选中或清除此复选框时都会调用此方法。
说明
当运行程序时,您经常要在代码编辑器和Windows窗体设计器之间进行移动。
有了IDE,就能够轻松地在项目中导航。
使用“解决方案资源管理器”,通过双击“Form1.cs”(在VisualC#中)或“Form1.vb”(在VisualBasic中),打开“Windows窗体设计器”。
7.下面显示了您在代码编辑器中看到的新代码。
privatevoidclearButton_Click(objectsender,EventArgse)
{
}
privatevoidbackgroundButton_Click(objectsender,EventArgse)
{
}
privatevoidcloseButton_Click(objectsender,EventArgse)
{
}
privatevoidcheckBox1_CheckedChanged(objectsender,EventArgse)
{
}
说明
您所添加的五个方法称为“事件处理程序”,原因是每当
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- C# 练习 创建 图片 编辑器