通过

教程：在 Visual Studio 中创建一个图片查看器 Windows 窗体应用

  • 项目

在此系列的三个教程中，你将创建一个 Windows 窗体应用程序，用于加载和显示图片。 Visual Studio 集成设计环境 (IDE) 提供了创建应用所需的工具。 若要了解详细信息，请参阅欢迎使用 Visual Studio IDE。

在第一个教程中，你将了解如何：

  • 创建一个使用 Windows 窗体的 Visual Studio 项目
  • 添加布局元素
  • 运行应用程序

先决条件

若要完成本教程，必须具有 Visual Studio。 请访问 Visual Studio 下载页获取免费版本。

创建 Windows 窗体项目

创建图片查看器时，第一步是创建 Windows 窗体应用项目。

  1. 打开 Visual Studio。

  2. 在“开始”窗口中，选择“创建新项目”。

    Screenshot shows the Create a new project option in the Visual Studio start window.

  3. 在“创建新项目”窗口中，搜索“Windows 窗体”。 然后，从“项目类型”列表中选择“桌面” 。

  4. 针对 C# 或 Visual Basic，选择“Windows 窗体应用(.NET Framework)”模板，然后选择“下一步” 。

    Screenshot shows the Create a new project dialog box with Windows Forms entered and options for Windows Forms App.

    注意

    如果未看到“Windows 窗体应用(.NET Framework)”模板，则可以通过“创建新项目”窗口安装该模板。 在“找不到所需内容?”消息中，选择“安装更多工具和功能”链接 。

    Screenshot shows the Install more tools and features link from the Not finding what you're looking for message in the Create new project dialog box.

    接下来，在 Visual Studio 安装程序中，选择“.NET 桌面开发”。

    Screenshot shows .NET Core workload in the Visual Studio Installer.

    在 Visual Studio 安装程序中，选择“修改”。 系统可能会提示你保存工作内容。 接下来，选择“继续”以安装工作负载。

  5. 在“配置新项目”窗口中，将项目命名为“PictureViewer”，然后选择“创建”。

  1. 打开 Visual Studio。

  2. 在“开始”窗口中，选择“创建新项目”。

    Screenshot shows the Create a new project option in the Visual Studio start window.

  3. 在“创建新项目”窗口中，搜索“Windows 窗体”。 然后，从“项目类型”列表中选择“桌面” 。

  4. 针对 C# 或 Visual Basic，选择“Windows 窗体应用(.NET Framework)”模板，然后选择“下一步” 。

    Screenshot shows the Create a new project dialog box with Windows Forms entered and options for Windows Forms App.

    注意

    如果未看到“Windows 窗体应用(.NET Framework)”模板，则可以通过“创建新项目”窗口安装该模板。 在“找不到所需内容?”消息中，选择“安装更多工具和功能”链接 。

    Screenshot shows the Install more tools and features link from the Not finding what you're looking for message in the Create new project dialog box.

    接下来，在 Visual Studio 安装程序中，选择“.NET 桌面开发”。

    Screenshot shows .NET Core workload in the Visual Studio Installer.

    在 Visual Studio 安装程序中，选择“修改”。 系统可能会提示你保存工作内容。 接下来，选择“继续”以安装工作负载。

  5. 在“配置新项目”窗口中，将项目命名为“PictureViewer”，然后选择“创建”。

    Screenshot shows the Configure your new project dialog box.

Visual Studio 将为你的应用创建解决方案。 解决方案是应用所需全部项目和文件的容器。

此时，Visual Studio 在 Windows 窗体设计器中显示一个空窗体。

添加布局元素

图片查看应用包含一个图片框、一个复选框和四个按钮，你将在下一个教程中添加它们。 布局元素控制其在窗体上的位置。 此部分演示如何更改窗体的标题、调整窗体大小以及添加布局元素。

  1. 在项目中，选择“Windows 窗体设计器”。 对于 C#，该选项卡显示 Form1.cs [Design]，对于 Visual Basic 则显示 Form1.vb [Design] 。

  2. 选择 Form1 中的任意位置。

  3. 属性窗口现在显示窗体的各个属性。 属性窗口通常位于 Visual Studio 的右下角。 此部分控制各种属性，例如前景色和背景色、显示在窗体顶部的标题文本以及窗体的大小。

    如果看不到“属性”，请选择“查看”>“属性窗口” 。

  4. 在属性窗口中找到“Text”属性 。 根据列表排序的方式，您可能需要向下滚动。 输入值“图片查看器”，然后按 Enter 键。

    窗体的标题栏中现在出现文本“图片查看器”。

    注意

    可以按类别或字母顺序显示属性。 使用属性窗口中的按钮来回切换。

  5. 再次选择窗体。 选择窗体右下角的拖动图柄。 该图柄是窗体右下角的一个白色小正方形。

    Screenshot shows the Forms window with the Drag handle in the lower right.

    拖动手柄以调整窗体的大小，使其更宽且更高一些。 如果查看属性窗口，你会发现“Size”属性已更改 。 还可通过更改“Size”属性来更改窗体的大小。

  6. 在 Visual Studio IDE 的左侧，选择“工具箱”选项卡。如果没有看到，则从菜单栏中选择“查看”>“工具箱”或者按 Ctrl+Alt+X 键 。

  7. 选择容器旁边的小三角形符号以打开该组。

    Screenshot shows the Containers group in the Toolbox tab.

  8. 双击“工具箱”中的“TableLayoutPanel” 。 你也可以将控件从工具箱拖动到窗体上。 TableLayoutPanel 控件将显示在窗体中。

    Screenshot show the form with the TableLayoutPanel control added.

    注意

    添加 TableLayoutPanel 后，如果窗体中出现标题为“TableLayoutPanel 任务”的窗口，请点击窗体内的任何位置来关闭此窗口。

  9. 选择“TableLayoutPanel”。 可以通过查看属性窗口来验证选择了什么控件。

    Screenshot shows the Properties window showing the TableLayoutPanel control.

  10. 选中“TableLayoutPanel”后，找到“Dock”属性，其值为“无” 。 选择下拉箭头，然后选择“填充”，即下拉菜单中间的大按钮。

    Screenshot shows the Properties window with Fill selected.

    “停靠”是指窗口连接另一个窗口或区域所用的一种方式。

    TableLayoutPanel 现在填充整个窗体。 如果再次调整窗体的大小，则 TableLayoutPanel 将保持停靠状态，并自行调整大小以适合窗体。

  11. 在窗体中，选择“TableLayoutPanel”。 右上角有一个黑色的小三角形按钮。

    选择该三角形以显示控件的任务列表。

    Screenshot shows TableLayoutPanel tasks.

  12. 选择“编辑行和列”，以显示“列和行样式”对话框 。

  13. 选择“Column1”，将其大小设置为 15%。 确保已选中“百分比”按钮。

  14. 选择“Column2”并将其设置为 85%。

    Screenshot shows TableLayoutPanel column and row styles.

  15. 在“列和行样式”对话框顶部的“显示”中，选择“行” 。 将“Row1”设置为 90% 并将“Row2”设置为 10%。 选择“确定”，保存所做更改。

    TableLayoutPanel 现在具有一个大的顶部行、一个小的底部行、一个小的左侧列和一个大的右侧列。

    Screenshot shows the form with resized TableLayoutPanel.

布局已完成。

注意

在运行应用程序之前，请通过选择“全部保存”工具栏按钮来保存应用。 或者，要保存应用，请从菜单栏中选择“文件”>“全部保存”（或按 Ctrl+Shift+S 键 ）。 最佳做法是尽早且经常保存。

运行应用

创建 Windows 窗体应用项目时，会生成一个运行的程序。 在此阶段，图片查看器应用不会执行太多操作。 它目前只是显示了一个在标题栏中显示“图片查看器”的空窗口。

若要运行应用，请执行以下步骤。

  1. 使用下列方法之一：

    • 选择 F5 键。
    • 在菜单栏上，依次选择“调试”>“开始调试” 。
    • 在工具栏上，选择“开始”按钮。

    Visual Studio 运行应用。 此时将显示标题为“图片查看器”的窗口。

    Screenshot shows the Windows Forms app running.

    查看 Visual Studio IDE 工具栏。 运行应用程序时，工具栏上将显示更多按钮。 利用这些按钮，你可执行停止和启动应用之类的操作，并帮助你跟踪到任何错误。

    Screenshot shows the Debugging toolbar where you can stop the app.

  2. 使用以下其中一种方法停止应用：

    • 在工具栏上，选择“停止调试”按钮。
    • 在菜单栏上，选择“调试”>“停止调试”。
    • 在键盘上，按 Shift+F5 键 。
    • 选择“图片查看器”窗口上角的“X”按钮 。

    当你从 Visual Studio IDE 内部运行应用时，该过程称为调试。 运行应用程序以查找和修复 bug。 您可以执行相同的过程来运行和调试其他程序。 要了解有关调试的详细信息，请参阅初探调试器。

后续步骤

请继续阅读下一篇教程，了解如何向图片查看器程序添加控件。

教程第 2 部分：向图片查看器添加控件