教程:创建图片查看器 Windows 窗体应用(.NET Framework)

在此系列教程中,你将创建一个 Windows 窗体应用程序,该应用程序加载图片并显示它。 Visual Studio 集成设计环境(IDE)提供了创建应用所需的工具。

在第一个教程中,你将了解如何:

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

若要使用 .NET 创建新的 Windows 窗体应用,请按照本教程 使用 .NET创建 Windows 窗体应用。 有关详细信息,请参阅 Windows 窗体 .NET 的 桌面指南

先决条件

  • 需要 Visual Studio 才能完成本教程。 访问 Visual Studio 下载页面 以获取免费版本。
  • “.NET 桌面开发”工作负载。 若要在 Visual Studio 中验证或安装此工作负荷,请选择 工具>获取工具和功能。 有关详细信息,请参阅 更改工作负荷或单个组件

创建 Windows 窗体项目

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

  1. 打开 Visual Studio。

  2. 在开始窗口中,选择 创建新项目

    屏幕截图显示 Visual Studio 2019 开始窗口中的“创建新项目”选项。

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

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

    屏幕截图显示了“创建新项目”对话框,其中输入了 Windows 窗体,并在 Visual Studio 2019 中为 Windows 窗体应用提供了选项。

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

    屏幕截图显示 Visual Studio 2019 中的“配置新项目”对话框。

  1. 打开 Visual Studio。

  2. 在开始窗口中,选择 创建新项目

    屏幕截图显示 Visual Studio 启动窗口中的“创建新项目”选项。

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

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

    屏幕截图显示了“创建新项目”对话框,其中输入了 Windows 窗体和 Windows 窗体应用的选项。

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

    屏幕截图显示“配置新项目”对话框。

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

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

添加布局元素

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

  1. 在项目中,选择 Windows 窗体设计器。 选项卡显示 C# 的 Form1.cs [设计] 或 Visual Basic 的 Form1.vb [设计]

  2. 选择 Form1 中的任意位置

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

    如果未看到 属性,请选择 视图>属性窗口

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

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

    注意

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

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

    屏幕截图显示“窗体”窗口,右下角有拖动图柄。

    拖动图柄以调整窗体的大小,使其更宽且更高。 如果查看“属性”窗口,Size 属性是不同的。 您还可以通过更改 Size 属性来调整窗体的大小。

  6. 在 Visual Studio IDE 的左侧,选择 工具箱 选项卡。如果未看到,请从菜单栏中选择 “视图>工具箱”,或者从菜单栏或 Ctrl+Alt+X

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

    屏幕截图显示“工具箱”选项卡中的“容器”组。

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

    屏幕截图显示添加了 TableLayoutPanel 控件的窗体。

    注意

    添加 TableLayoutPanel 后,如果窗体内出现标题 TableLayoutPanel 任务的窗口,请选择窗体内的任意位置以将其关闭。

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

    屏幕截图显示显示 TableLayoutPanel 控件的“属性”窗口。

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

    屏幕截图显示属性窗口,填充选项已被选中。

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

    TableLayoutPanel 现在填充整个窗体。 如果再次调整窗体的大小,TableLayoutPanel 将保持停靠状态,并调整其大小以适应。

  11. 在表单中选择 TableLayoutPanel。 在右上角,有一个小的黑色三角形按钮。

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

    屏幕截图显示 TableLayoutPanel 任务。

  12. 选择 “编辑列和行” 以打开 “列和行样式” 对话框。

  13. 选择 Column1 并将其大小设置为 15%。 确保已选择“百分比”选项

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

    屏幕截图显示 TableLayoutPanel 列和行样式。

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

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

    屏幕截图显示 TableLayoutPanel 已调整大小的窗体。

布局已完成。

注意

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

运行应用

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

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

  1. 使用以下方法之一:

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

    Visual Studio 运行您的应用程序。 出现一个标题为 图片查看器 的窗口。

    屏幕截图显示正在运行的 Windows 窗体应用。

    查看 Visual Studio IDE 工具栏。 运行应用程序时,工具栏上会显示更多按钮。 使用这些按钮可以执行停止和启动应用等操作,并帮助跟踪任何错误。

    屏幕截图显示了可在其中停止应用的调试工具栏。

  2. 使用以下方法之一停止应用:

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

    在 Visual Studio IDE 中运行应用程序时,这个过程称为 调试。 你运行应用程序以查找和修复错误。 按照相同的过程运行和调试其他程序。 若要了解有关调试的详细信息,请参阅 首先查看调试器

下一步

转到下一教程,了解如何将控件添加到图片查看器程序。