VB2010教程之图片浏览器.docx

visual studio 2010教程 1：创建图片查看器此内容为质量更高的人工翻译。若想同时查看此页面和原始英文页面的内容，请单击“首选项”然后选择“经典视图”作为您的查看首选项。在本教程中，您将生成一个从文件加载图片并将其显示在窗口中的程序。您将学习如何拖动控件（如窗体上的按钮和图片框）、设置控件属性，以及如何使用容器来平滑地调整窗体的大小。您还将开始编写代码。您将学习如何： 创建新项目。 测试（调试）应用程序。 向窗体中添加基本控件（如复选框和按钮）。 使用布局在窗体上定位控件。 向窗体中添加“打开文件”和“颜色”对话框。 使用 intellisense 和代码段编写代码。 编写事件处理程序方法。当您完成时，程序将类似下图所示。在本教程中创建的图片说明在本教程中，同时涉及 visual c# 和 visual basic，因此请关注特定于您使用的编程语言的信息。相关主题标题说明步骤 1：创建 windows 窗体应用程序项目首先创建 windows 窗体应用程序项目。步骤 2：运行程序运行您在上一步中创建的 windows 窗体应用程序。步骤 3：设置窗体属性使用“属性”窗口更改窗体的显示方式。步骤 4：使用 tablelayoutpanel 控件设置窗体布局向窗体中添加tablelayoutpanel控件。步骤 5：向窗体添加控件向窗体中添加picturebox和checkbox之类的控件。向窗体中添加按钮。步骤 6：命名按钮控件将按钮重命名为更有意义的名称。步骤 7：向窗体添加对话框组件向窗体中添加“openfiledialog”组件和“colordialog”组件。步骤 8：为“显示图片”按钮事件处理程序编写代码使用 intellisense 工具编写代码。步骤 9：检查代码、为代码添加注释和测试代码检查并测试代码。根据需要添加注释。步骤 10：创建其他按钮和复选框使用 intellisense 编写代码以使其他按钮和复选框工作。步骤 11：运行程序并试用其他功能运行程序并设置背景颜色。尝试其他功能，例如更改颜色、字体和边框。visual studio 2010步骤 1：创建 windows 窗体应用程序项目此内容为质量更高的人工翻译。若想同时查看此页面和原始英文页面的内容，请单击“首选项”然后选择“经典视图”作为您的查看首选项。创建图片查看器的第一步是创建 windows 窗体应用程序项目。创建 windows 窗体应用程序项目1. 在“文件”菜单上，单击“新建项目”。2. 如果没有使用 visual studio 学习版，您需要先选择一种语言。从“安装的模板”列表中选择“c#”或“visual basic”。3. 单击“windows 窗体应用程序”图标，输入“pictureviewer”作为名称，然后单击“确定”。visual studio 将自动为您创建解决方案。4. 在“文件”菜单上，单击“全部保存”；或者在工具栏上单击“全部保存”按钮，此按钮如下所示。“全部保存”工具栏按钮说明visual studio 将项目保存到项目文件夹中。集成开发环境 (ide) 会自动填写文件夹名称和项目名称。如果使用的是 visual studio 学习版，您需要完成步骤 5-7。对于非学习版的 visual studio，项目在第一次创建时即被保存，因此不需要步骤 5-7。5. 确保项目保存在“我的文档”文件夹下的某个文件夹中。6. 确认选中“创建解决方案的目录”复选框。7. 单击“保存”。说明当创建项目时，visual studio ide 会自动创建若干个文件并将其放入文件夹中。可以使用“解决方案资源管理器”窗口来浏览这些文件。在第一次创建项目时，这些文件将保存到一个临时文件夹中。单击“全部保存”按钮即是告知 ide 将这些文件复制到一个永久文件夹（通常位于“我的文档”文件夹下）中。8. 您可能已经注意到“解决方案”和“项目”这两个词具有不同的含义，本教程稍后将对此进行解释。9. 下图显示 ide 窗口应具有的外观。10. ide 窗口11. 12. 如果您的屏幕与上面的图片不太一样，请在“窗口”菜单上，单击“重置窗口布局”。如果缺少任何窗口，请在“视图”菜单上，单击“属性窗口”或“解决方案资源管理器”。如果有多余的窗口打开，请单击右上角的“关闭”(x) 按钮。13. 查看图片。从左上角开始沿逆时针方向，图片将依次显示：o 主窗口您可在此处执行大部分的工作。通过此窗口可以使用窗体并编辑代码。当前，此窗口在“窗体编辑器”中显示一个窗体。在此窗口的顶部有两个选项卡：“起始页”选项卡和“form1.cs 设计”选项卡。（在 visual basic 中，后缀名是 .vb而不是 .cs。）o “解决方案资源管理器”窗口在此处显示解决方案中的所有文件。如果单击某个文件，则“属性”窗口中的信息将发生改变。如果双击某个代码文件（在 visual c# 中以 .cs结尾，在 visual basic 中以 .vb结尾），则该代码文件或用于该代码文件的设计器将打开。o “属性”窗口您可在此处更改您在其他窗口中选定的项的属性。说明请注意“解决方案资源管理器”窗口的顶部行将如何显示“解决方案pictureviewer(1 个项目)”。ide 已经为您创建了一个解决方案，而且此解决方案包含多个项目。现在，您将使用包含单个项目的解决方案。继续或查看visual studio 2010步骤 2：运行程序此内容为质量更高的人工翻译。若想同时查看此页面和原始英文页面的内容，请单击“首选项”然后选择“经典视图”作为您的查看首选项。一旦创建新的解决方案，实际上就生成了所运行的程序。该程序并未执行其他操作，它只是显示了一个在标题栏中显示“form1”的空窗口。但该程序确实在运行，您即将查明这一点。运行程序1. 按 f5 键或单击如下所示的“启动调试”工具栏按钮。启动“调试”工具栏按钮2. ide 将运行程序，并会显示一个窗口。下图显示了刚生成的程序。该程序正在运行，您很快会向它添加内容。正在运行的 windows 窗体应用程序3. 返回 ide，并查看新工具栏。调试工具栏4. 单击方形的“停止调试”按钮，或从“调试”菜单中单击“停止调试”。程序将停止运行，并且窗口将关闭。也可以直接关闭打开的窗口来停止调试。说明在从 ide 内部运行程序时，这一操作称作“调试”，因为通常将使用此操作来跟踪并修复 bug。该程序是一个真正的程序，您可以像运行任何其他程序一样运行它。继续或查看 若要转到下一个教程步骤，请参见步骤 3：设置窗体属性。 若要返回上一个教程步骤，请参见步骤 1：创建 windows 窗体应用程序项目。visual studio 2010步骤 3：设置窗体属性此内容为质量更高的人工翻译。若想同时查看此页面和原始英文页面的内容，请单击“首选项”然后选择“经典视图”作为您的查看首选项。接下来，使用“属性”窗口来更改窗体的外观。设置窗体属性1. 确保您查看的是 windows 窗体设计器。在 ide 中，单击“form1.cs 设计”选项卡（在 visual basic 中为“form1.vb 设计”选项卡）。2. 单击窗体中的任意位置以将其选定。查看“属性”窗口，该窗口此时应显示窗体的属性。窗体具有各种属性。例如，可以设置前景色和背景色、窗体顶部显示的标题文本、窗体的大小和其他属性。说明如果“属性”窗口未出现，请通过单击方形的“停止调试”按钮（或直接关闭窗口）来停止程序。3. 在选定窗体后，向下滚动到“属性”窗口的底部，然后找到“text”属性。单击“text”，键入“图片查看器”，然后按 enter。此时，窗体的标题栏中将显示文本“图片查看器”，并且“属性”窗口的外观应与下图类似。“属性”窗口说明可以通过“按分类顺序”视图或“字母顺序”视图对属性进行排序。可以通过使用“属性”窗口上的按钮在这两类视图之间进行切换。在本教程中，通过“字母顺序”视图查找属性会更加轻松。4. 返回 windows 窗体设计器。单击窗体右下角的拖动柄，此拖动句柄是位于窗体右下角的小空心方形，如下所示。拖动句柄拖动此拖动柄调整窗体的大小，使其更宽且更高一些。5. 查看“属性”窗口，您会发现“size”属性已更改。每当您调整窗体的大小时，“size”属性都会更改。尝试拖动窗体以将其大小调整为大约 550x350，此大小应适合于该项目。6. 重新运行程序。按 f5 键或单击如下所示的“启动调试”工具栏按钮。启动“调试”工具栏按钮与之前的操作一样，ide 会生成并运行程序，并且将显示一个窗口。7. 在转到下一个步骤之前，请停止程序，因为 ide 不允许您在程序处于运行状态时更改程序。继续或查看 若要转到下一个教程步骤，请参见步骤 4：使用 tablelayoutpanel 控件设置窗体布局。 若要返回上一个教程步骤，请参见步骤 2：运行程序。visual studio 2010步骤 4：使用tablelayoutpanel控件设置窗体布局此内容为质量更高的人工翻译。若想同时查看此页面和原始英文页面的内容，请单击“首选项”然后选择“经典视图”作为您的查看首选项。在此步骤中，将向窗体中添加一个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与 microsoft office word 中的表类似：它具有行和列，并且个别单元格可以跨多个行和列。每个单元格都可以存放一个控件（例如按钮、复选框或标签）。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中拖动这些行和列的边框来调整其大小。visual studio 2010步骤 5：向窗体添加控件此内容为质量更高的人工翻译。若想同时查看此页面和原始英文页面的内容，请单击“首选项”然后选择“经典视图”作为您的查看首选项。在此步骤中，将向窗体添加控件（如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”。说明在 visual basic 中，按钮名称的首字母都是大写的，因此“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. 此时重新运行程序以查看具有最新布局的窗体。单击这些按钮和复选框并不会执行任何操作，但它们很快将会起作用。visual studio 2010步骤 6：命名按钮控件此内容为质量更高的人工翻译。若想同时查看此页面和原始英文页面的内容，请单击“首选项”然后选择“经典视图”作为您的查看首选项。窗体上只有一个picturebox。当添加此控件时，ide 自动将其命名为“picturebox1”。只有一个名为“checkbox1”的checkbox。很快，您将编写一些代码，并且这些代码将引用到上述的checkbox和picturebox。因为上述每种控件都只有一个控件，所以当您在代码中看到“picturebox1”或“checkbox1”时，应知道其中的含义。说明在 visual basic 中，任何控件名称的第一个字母默认是首字母大写，因此名称为“picturebox1”、“checkbox1”等等。窗体上包含四个按钮，ide 将它们分别命名为“button1”、“button2”、“button3”和“button4”。只看这些按钮的当前名称，您并不知道哪个按钮是“关闭”按钮，哪个按钮是“显示图片”按钮。这就是命名按钮控件很有用的原因了。命名按钮控件1. 单击“关闭”按钮。（如果您仍选择了所有按钮，请按 esc 键取消选择。）在“属性”窗口中滚动，直到看到“(name)”属性。（当属性按字母顺序排列时，“(name)”属性位于顶部附近。）将此名称更改为“closebutton”，如下图中所示。包含closebutton名称的“属性”窗口说明如果尝试将按钮的名称更改为“close button”（在单词“close”和“button”之间有一个空格），则 ide 将显示错误消息“属性值无效”。控件名称中不允许使用空格和一些其他字符。2. 将其他三个按钮重命名为“backgroundbutton”、“clearbutton”和“showbutton”。可以通过单击“属性”窗口中的控件选择器下拉列表，来验证这些名称。新的按钮名称将出现。3. 在“windows 窗体设计器”中双击“显示图片”按钮。当执行此操作时，ide 将在主窗口中打开一个称为“form1.cs”选项卡的新选项卡，如下图中所示。使用 visual c# 代码的 form1.cs 选项卡4. 重点考虑这一部分的代码。vbc#c+f#jscript复制privatesubshowbutton_click() handlesshowbutton.clickendsub您需要查找一个称为showbutton_click()的方法。当您单击“showbutton”按钮时，ide 添加了此方法。此方法包含单击“显示图片”按钮时运行的代码。说明在本教程中，自动生成的 visual basic 代码进行了简化（删除了圆括号 () 之间的所有代码）。只要出现自动生成的代码，您都可以删除相同的代码。程序不管怎样都将工作。对于其余教程，任何自动生成的代码都将尽可能得到简化。5. 转到设计器选项卡（在 visual c# 中为“form1.cs 设计”选项卡，在 visual basic 中为“form1.vb 设计”选项卡），并双击“清除图片”按钮。对于最后两个按钮，重复此操作。ide 每次都会向窗体的代码中添加一个新方法。6. 若要再添加一个方法，请双击 windows 窗体设计器中的checkbox控件，以使 ide 添加checkbox1_checkedchanged()方法。每当用户选中或清除此复选框时都会调用此方法。说明当运行程序时，您经常要在代码编辑器和 windows 窗体设计器之间进行移动。有了 ide，就能够轻松地在项目中导航。使用“解决方案资源管理器”，通过双击“form1.cs”（在 visual c# 中）或“form1.vb”（在 visual basic 中），打开“windows 窗体设计器”。7. 下面显示了您在代码编辑器中看到的新代码。8. vb9. c#10. c+11. f#12. jscript13. 复制14. privatesubclearbutton_click() handlesclearbutton.click15.16. endsub17.18. privatesubbackgroundbutton_click() handlesbackgroundbutton.click19.20. endsub21.22. privatesubclosebutton_click() handlesclosebutton.click23.24. endsub25.26. privatesub checkbox1_checkedchanged() handles checkbox1.checkedchanged27.28. endsub29.30.说明您所添加的五个方法称为“事件处理程序”，原因是每当事件（如用户单击按钮或选择框）发生时程序都将调用这些方法。当您在 ide 中双击某个控件时，ide 会为该控件添加一个事件处理程序方法。例如，当双击某个按钮时，ide 会为此按钮的 click 事件（每当用户单击按钮时调用）添加一个事件处理程序。当双击某个复选框时，ide 会为此复选框的checkedchanged事件（每当用户选中或清除框时调用）添加一个事件处理程序。在为某个控件添加事件处理程序后，通过双击此控件，可以随时从 windows 窗体设计器返回到此控件。说明生成程序时名称很重要，并且方法（包括事件处理程序）可以具有任何所需的名称。当使用 ide 添加事件处理程序时，ide 会基于控件的名称和正在处理的事件选择一个名称。例如，名为“showbutton”的按钮的 click 事件称为showbutton_click()事件处理程序方法。此外，通常会在方法名称后面添加一对左右圆括号 ()，以清楚地表明正在讨论的对象是方法。visual studio 2010步骤 7：向窗体添加对话框组件此内容为质量更高的人工翻译。若想同时查看此页面和原始英文页面的内容，请单击“首选项”然后选择“经典视图”作为您的查看首选项。为了准备好设置“打开文件”对话框和“颜色”对话框（用于选择背景色），在此步骤中，将向窗体添加“openfiledialog”组件和“colordialog”组件。组件在某些方面与控件相似。使用工具箱向窗体添加一个组件，然后使用“属性”窗口设置该组件的属性。但与控件不同，向窗体添加组件不会添加用户可从窗体中查看的可见项。相反，这将提供可使用代码触发的某些行为。此组件是一个可打开“打开文件”对话框的组件。向窗体添加对话框组件1. 转到 windows 窗体设计器，然后打开工具箱中的“对话框”组。说明工具箱中的“对话框”组具有可用于为您打开多个有用的对话框的组件，这些对话框可用于打开和保存文件、浏览文件夹以及选择字体和颜色。在此项目中将使用以下两个对话框组件：“openfiledialog”和“colordialog”。2. 若要向窗体添加一个名为“openfiledialog1”的组件，请双击“openfiledialog”。若要向窗体添加一个名为“colordialog1”的组件，请双击工具箱中的“colordialog”。（将在下一个教程步骤中使用后一个组件。）windows 窗体设计器的底部应出现一个灰色框，其中包含与已添加的两个对话框组件对应的图标，如下图所示。对话框组件3. 转到 windows 窗体设计器，然后单击该设计器底部的灰色框中的“openfiledialog1”图标。设置以下两个属性：o 将“filter”属性设置为以下内容（可以复制并粘贴此内容）：“jpeg files (*.jpg)|*.jpg|png files (*.png)|*.png|bmp files (*.bmp)|*.bmp|all files (*.*)|*.*”o 将“title”属性设置为以下内容：“选择一个图片文件”说明若要查看其他应用程序中的“打开文件”对话框的示例，请打开“记事本”或“画图”，然后在“文件”菜单上，单击“打开”。请注意“文件类型”下拉列表是如何在底部出现的。您刚才已使用“openfiledialog”组件中的“filter”属性进行了此设置。还请注意“属性”窗口中的“title”和“filter”属性是如何加粗的。ide 执行上述操作是为了显示其默认值已更改的任何属性。继续或查看visual studio 2010步骤 8：为“显示图片”按钮事件处理程序编写代码此内容为质量更高的人工翻译。若想同时查看此页面和原始英文页面的内容，请单击“首选项”然后选择“经典视图”作为您的查看首选项。在此步骤中，将生成按如下所示工作的“显示图片”按钮： 当用户单击此按钮时，程序会打开“打开文件”对话框。 如果用户选择一个图片文件，则程序会在picturebox中显示该图片。ide 提供一种名为 intellisense 的强大工具，可帮助您编写代码。当您输入代码时，ide 会打开一个框，其中显示与您所输入的部分单词对应的完整建议内容。它尝试确定您接下来要做的事情，并自动跳到您从列表中选择的最后一项。您可以使用向上键或向下键在列表中进行移动，也可以继续键入字母以缩小选择范围。当您看到所需的选项时，按 tab 键可将其选中。或者，也可以忽略不需要的建议。为“显示图片”按钮事件处理程序编写代码1. 转到“windows 窗体设计器”，并双击“显示图片”按钮。ide 将立即转到代码设计器，并将光标移动到您之前添加的showbutton_click()方法内。2. 在两个大括号 之间的空行上键入一个 i。（在 visual basic 中，应在 private sub 与 end sub 之间的空行上键入。）“intellisense”窗口随即打开，如以下图片中所示。使用 visual c# 代码的 intellisense3. “intellisense”窗口应该会突出显示“if”一词。（如果没有，请输入小写的 f，它将突出显示。）请注意“intellisense”窗口旁边的黄色工具提示将如何显示“if 语句的代码段”。（在 visual basic 中，该工具提示还指明这是一个代码段，但用词会略有不同。）您需要使用此代码段。按 tab 键将“if”插入到您的代码中。然后再次按 tab 键即可使用“if”代码段。（如果单击其他位置后“intellisense”窗口消失，那么请按 backspace 删除“i”并重新键入它，此时“intellisense”窗口将再次打开。）visual c# 代码4. 接下来，使用 intellisense 输入更多代码以打开“打开文件”对话框。如果用户单击了“确定”按钮，则picturebox会加载用户选择的文件。下面的步骤演示如何输入代码，尽管步骤很多，但只需几次击键即可完成：1. 从代码段中的选定文本“true”开始。键入 op 将其覆盖。（在 visual basic 中，首字母需要大写，因此键入 op。）2. “intellisense”窗口打开并显示“openfiledialog1”。按 tab 将其选中。（在 visual basic 中，因为首字母大写，所以您会看到“openfiledialog1”。确保“openfiledialog1”已选中。）3. 键入句点 (.)（许多程序员称此符号为点）。由于您在紧接在“openfiledialog1”的后面键入了一个句点，因此“intellisense”窗口将打开，其中填充有“openfiledialog”组件的所有属性和方法。当在“windows 窗体设计器”中单击该组件时，“属性”窗口中会显示相同的属性。还有一些方法会告知组件要执行的操作（例如打开对话框）。说明“intellisense”窗口可以同时向您显示属性和方法。若要确定所显示的内容，请查看左侧的图标。您会看到每种方法旁边都会有一个块型图片，每个属性旁边都会有一个手型图片。每个事件旁边还会有一个闪电形图标。这些图片如下所示。4. “方法”图标5. 6. “属性”图标7. 8. “事件”图标9. 10. 开始键入showdialog（是否大写对于 intellisense 来说不重要）。showdialog()方法将显示“打开文件”对话框。在窗口突出显示“showdialog”之后，按 tab。11. 当对控件或组件使用方法（称为“调用方法”）时，需要添加圆括号。因此，请输入左括号和右括号：()说明方法是所有程序的重要组成部分，本教程演示了方法的多种使用方式。可以调用组件的方法来告诉组件要执行的操作，这与调用“openfiledialog”组件的showdialog()方法的方式类似。可以创建自己的方法来使程序执行操作，这与您此时正在构建的showbutton_click()方法类似，此方法会在用户单击按钮时打开对话框和图片。12. 对于 visual c#，添加一个空格，然后添加两个等号 (=)。对于 visual basic，添加一个空格，然后使用单个等号 (=)。（visual c# 和 visual basic 使用不同的相等运算符。）13. 添加另一个空格。一旦您这样做之后，另一个“intellisense”窗口将打开。开始键入dialogresult，然后按 tab 来添加它。说明当编写代码来调用方法时，有时代码会返回一个值。在这种情况下，“openfiledialog”组件的showdialog()方法会返回一个dialogresult值。dialogresult是一个特殊的值，此值告诉您对话框中所发生的改变。“openfiledialog”组件会导致用户单击“确定”或“取消”，这样组件的showdialog()方法就会返回dialogresult.ok或dialogresult.cancel。14. 键入一个点以在“intellisense”窗口中打开dialogresult值。输入字母 o，然后按 tab 以插入“ok”。说明第一行代码应会完成。对于 visual c#，此代码行应如下所示。if (openfiledialog1.showdialog() = dialogresult.ok)对于 visual basic，此代码行应如下所示。if openfiledialog1.showdialog() = dialogresult.ok then15. 现在，再添加一行代码。可以键入或者复制并粘贴此行代码，但是应考虑使用 intellisense 来添加代码。您对 intellisense 越熟悉，您就可以越快地编写自己的代码。最终的showbutton_click()方法如下所示。vbc#c+f#jscript复制privatesubshowbutton_click() handlesshowbutton.clickifopenfiledialog1.showdialog() = dialogresult.okthenpicturebox1.load(openfiledialog1.filename)endifendsubvisual studio 2010步骤 9：检查代码、为代码添加注释和测试代码此内容为质量更高的人工翻译。若想同时查看此页面和原始英文页面的内容，请单击“首选项”然后选择“经典视图”作为您的查看首选项。在向代码添加注释并测试代码之前，请先花点时间了解一些代码概念，因为您将会频繁使用这些概念： 在双击 windows 窗体设计器中的“显示图片”按钮后，ide 会自动将一个方法添加到程序的代码中。 方法是指组织代码的方式：它指明如何将代码组合在一起。 大多数情况下，一个方法会按特定顺序执行少量操作，如showbutton_click()方法会显示对话框，然后加载图片。 一个方法由多个语句构成。可以将方法视为一种将多个语句捆绑在一起的方式。 在执行或调用某个方法时，将按顺序依次执行该方法中的各个语句（从第一个语句开始）。下面是一个语句示例。vbc#c+f#jscript复制不支持该语言或没有可用的代码示例。语句用于指示程序执行操作。在 visual c# 中，语句始终以分号结束。在 visual basic 中，行的结尾即为语句的结尾。（visual basic 中不需要使用分号。）前面的语句将告知picturebox控件下载用户使用“openfiledialog”组件选择的文件。接下来，将向代码添加注释。注释是一个说明，它不会更改程序的行为。它使用户更易于理解代码的行为。在 visual c# 中，可用两个正斜杠 (/) 将一行标记为一个注释。在 visual basic 中，可用一个单引号 () 将一行标记为一个注释。添加注释后即可测试您的程序。您刚才构建了可用的程序，虽然尚未完成，但已能够下载图片。添加注释1. 添加以下内容。vbc#c+f#jscript复制private sub showbutton_click() handles showbutton.click show the open file dialog. if the user clicks ok, load the picture that the user chose. if openfiledialog1.showdialog() = dialogresult.ok thenpicturebox1.load(openfiledialog1.filename) end ifend sub说明“showbutton”按钮的 click 事件处理程序现已完成并可正常使用。您已开始编写代码（从 if 语句开始）。if 语句用于告知程序“检查此项，如果为 true，请执行这些操作。”在此示例中，告知程序打开“打开文件”对话框，如果用户选择一个文件并单击“确定”按钮，则将此文件加载到picturebox。说明ide 可让您轻松地编写代码，而代码段是 ide 为此采取的方式之一。代码段是一类快捷方式，它可扩展到一个小的代码块。可以通过从“工具”菜单中选择“代码段管理器”来查看所有代码段。if 代码段位于“条件语句和循环”子文件夹中的“代码模式”中。可使用此管理器来浏览现有代码段或添加自己的代码段。若要在键入代码时激活一个代码段，请键入该代码段并按 tab 键。多个代码段将出现在“intellisense”窗口中，这就是为什么要按 tab 两次的原因：第一次按 tab 是从“intellisense”窗口中选择该代码段，第二次按 tab 是告知 ide 使用该代码段。（intellisense 支持 if 代码段，但不支持ifelse代码段。）2. 在运行程序之前，通过单击如下所示的“全部保存”工具栏按钮保存程序。“全部保存”按钮或者，从“文件”菜单中单击“全部保存”来保存程序。最佳做法是尽早且经常保存。当程序运行时，其外观应与下图类似。图片查看器测试程序1. 按 f5 键或单击“启动调试”工具栏按钮。2. 单击“显示图片”按钮运行您刚才编写的代码。首先，该程序会打开“打开文件”对话框。确认在该对话框底部的“文件类型”下拉列表中会出现筛选器。然后，定位到一张图片并将其打开。通常可以在“我的文档”文件夹内的“图片收藏示例图片”文件夹中找到 windows 操作系统附带的示例图片。3. 加载一张图片后，此图片会在picturebox中出现。然后尝试调整窗体的大小。由于已将picturebox停靠在tablelayoutpanel内部，而tablelayoutpanel自身停靠在窗体内部，因此图片区域将自行调整大小，使自身的宽度与窗体的宽度相同，并占据窗体上部空间的 90%。这就是使用tablelayoutpanel容器和flowlayoutpanel容器的原因：当用户调整窗体的大小时，二者可以使窗体具有适当的大小。继续或查看 若要转到下一个教程步骤，请参见步骤 10：创建其他按钮和复选框。 若要返回上一个教程步骤，请参见步骤 8：为“显示图片”按钮事件处理程序编写代码。visual studio 2010步骤 10：创建其他按钮和复选框此内容为质量更高的人工翻译。若想同时查看此页面和原始英文页面的内容，请单击“首选项”然后选择“经典视图”作为您的查看首选项。现在，您可以完成其他四个方法了。虽然您