【WinForm.NET开发】演示：创建一个图片查看器 Windows 窗体应用

本文演示将创建一个 Windows 窗体应用程序，用于加载和显示图片。 Visual Studio 集成设计环境 (IDE) 提供了创建应用所需的工具。

1、先决条件

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

2、创建 Windows 窗体项目

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

1.打开 Visual Studio。
2.在“开始”窗口中，选择“创建新项目”。
3.在“创建新项目”窗口中，搜索“Windows 窗体”。然后，从“项目类型”列表中选择“桌面” 。
4.针对 C# 或 Visual Basic，选择“Windows 窗体应用(.NET Framework)”模板，然后选择“下一步” 。

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

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

7.在 Visual Studio 安装程序中，选择“修改”。系统可能会提示你保存工作内容。接下来，选择“继续”以安装工作负载。
8.在“配置新项目”窗口中，将项目命名为“PictureViewer”，然后选择“创建”。

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

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

3、添加布局元素

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

1.在项目中，选择“Windows 窗体设计器”。对于 C#，该选项卡显示 Form1.cs [Design]，对于 Visual Basic 则显示 Form1.vb [Design] 。
2.选择 Form1 中的任意位置。
3.属性窗口现在显示窗体的各个属性。属性窗口通常位于 Visual Studio 的右下角。此部分控制各种属性，例如前景色和背景色、显示在窗体顶部的标题文本以及窗体的大小。

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

6.窗体的标题栏中现在出现文本“图片查看器”。可以按类别或字母顺序显示属性。使用属性窗口中的按钮来回切换。
7.再次选择窗体。选择窗体右下角的拖动图柄。该图柄是窗体右下角的一个白色小正方形。

8.拖动手柄以调整窗体的大小，使其更宽且更高一些。如果查看属性窗口，你会发现“Size”属性已更改。还可通过更改“Size”属性来更改窗体的大小。
9.在 Visual Studio IDE 的左侧，选择“工具箱”选项卡。如果没有看到，则从菜单栏中选择“查看”>“工具箱”或者按 Ctrl+Alt+X 键。
10.选择容器旁边的小三角形符号以打开该组。
11.双击“工具箱”中的“TableLayoutPanel” 。你也可以将控件从工具箱拖动到窗体上。 TableLayoutPanel 控件将显示在窗体中。

12.添加 TableLayoutPanel 后，如果窗体中出现标题为“TableLayoutPanel 任务”的窗口，请点击窗体内的任何位置来关闭此窗口。
13.选择“TableLayoutPanel”。可以通过查看属性窗口来验证选择了什么控件。
14.选中“TableLayoutPanel”后，找到“Dock”属性，其值为“无” 。选择下拉箭头，然后选择“填充”，即下拉菜单中间的大按钮。

15.“停靠”是指窗口连接另一个窗口或区域所用的一种方式。TableLayoutPanel 现在填充整个窗体。如果再次调整窗体的大小，则 TableLayoutPanel 将保持停靠状态，并自行调整大小以适合窗体。
16.在窗体中，选择“TableLayoutPanel”。右上角有一个黑色的小三角形按钮。选择该三角形以显示控件的任务列表。
17.选择“编辑行和列”，以显示“列和行样式”对话框。
选择“Column1”，将其大小设置为 15%。确保已选中“百分比”按钮。
18.选择“Column2”并将其设置为 85%。
19.在“列和行样式”对话框顶部的“显示”中，选择“行” 。将“Row1”设置为 90% 并将“Row2”设置为 10%。选择“确定”，保存所做更改。

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

布局已完成。

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

4、向应用程序添加控件

图片查看器应用程序使用 PictureBox 控件来显示图片。它使用一个复选框和多个按钮来管理图片和背景，以及关闭应用。你将在 Visual Studio IDE 中从“工具箱”中添加 PictureBox 和复选框。

1.打开 Visual Studio。图片查看器项目显示在“打开最近使用的文件”下。
2.在 Windows 窗体设计器中，选择在前面的教程中添加的 TableLayoutPanel。检查 tableLayoutPanel1 是否显示在属性窗口中。
3.在 Visual Studio IDE 的左侧，选择“工具箱”选项卡。如果没有看到，则从菜单栏中选择“查看”>“工具箱”或者按 Ctrl+Alt+X 键。在“工具箱”中，展开“公共控件”。
4.双击“PictureBox”，将 PictureBox 控件添加到窗体。 Visual Studio IDE 会将 PictureBox 控件添加到 TableLayoutPanel 的第一个空单元格中。
5.选择新的 PictureBox 控件以将其选中，然后选择新 PictureBox 控件上的黑色三角形以显示其任务列表。
6.选择“在父容器中停靠”，这会将 PictureBox 的“Dock”属性设置为“填充” 。可以在属性窗口中查看该值。
7.在 PictureBox 的属性窗口中，将“ColumnSpan”属性设置为“2” 。 PictureBox 现在填充这两列。
8.将“BorderStyle”属性设置为“Fixed3D” 。
9.在 Windows 窗体设计器中选择“TableLayoutPanel” 。然后，在“工具箱”中双击“CheckBox”项，以添加新的 CheckBox 控件。由于 PictureBox 占据了 TableLayoutPanel 中的前两个单元格，因此 CheckBox 控件将添加到左下方的单元格。
10.选择“Text”属性，然后输入“拉伸” 。

5、在布局面板中添加按钮

到目前为止，控件已添加到 TableLayoutPanel 中。以下步骤演示了如何在 TableLayoutPanel 中向新的布局面板添加四个按钮。

1.选择窗体上的“TableLayoutPanel”。打开“工具箱”，选择“容器” 。双击“FlowLayoutPanel”，将新控件添加到 TableLayoutPanel 的最后一个单元格。
2.将 FlowLayoutPanel 的“Dock”属性设置为“填充” 。可以通过选择黑色三角形，然后选择“在父容器中停靠”来设置此属性。
3.FlowLayoutPanel 是一个容器，它将其他控件按顺序排列在一行中。
4.选择新的“FlowLayoutPanel”，然后打开“工具箱”并选择“公共控件” 。双击“按钮”项以添加一个名为“button1”的按钮控件。
5.再次双击“按钮”以添加其他按钮。 IDE 将调用下一个“button2”。
6.以这种方式再添加两个按钮。另一种方法是选择“button2”，然后选择“编辑”>“复制”或按 Ctrl+C 键。接下来，在菜单栏上，选择“编辑”>“粘贴”或按 Ctrl+V 键。粘贴按钮的副本。此时再次粘贴该副本。请注意，IDE 会将“button3”和“button4”添加到 FlowLayoutPanel。
7.选择第一个按钮，并将其“Text”属性设置为“显示图片” 。
8.分别将后面三个按钮的“Text”属性设置为“清除图片”、“设置背景色”和“关闭” 。
9.若要调整按钮的大小并进行排列，请选择“FlowLayoutPanel”。将“FlowDirection”属性设置为“RightToLeft” 。

10.这些按钮会自行与单元格的右侧对齐，并颠倒其顺序，以使“显示图片”按钮位于右侧。可以在 FlowLayoutPanel 周围拖动按钮，按任意顺序排列它们。
11.选择“关闭”按钮以将其选中。然后，要同时选择其余按钮，请在按住 Ctrl 键的同时选择它们。
12.在属性窗口中，将“AutoSize”属性设置为“True” 。调整按钮大小以适应其文本。

你可以运行程序以了解控件的外观。选择 F5 键，选择“调试”>“开始调试”，或选择“开始”按钮。你添加的按钮还未执行任何操作。

6、更改控件名称

窗体上有四个按钮，在 C# 中的名称分别为“button1”、“button2”、“button3”和“button4” 。在 Visual Basic 中，任何控件名称的第一个字母都默认大写，所以这些按钮的名称为“Button1”、“Button2”、“Button3”和“Button4” 。使用以下步骤为它们指定包含更多信息的名称。

1.在窗体上，选择“关闭” 按钮。如果你仍选择了所有按钮，请按 Esc 键取消选择。
2.在属性窗口中查找“(名称)” 。将名称更改为“closeButton”。

3.IDE 不接受包含空格的名称。
将其他三个按钮重命名为“backgroundButton” 、 “clearButton”和“showButton” 。你可通过选择“属性” 窗口中的控件选择器下拉列表来验证这些名称。新的按钮名称将出现。

可以更改任何控件的名称，如 TableLayoutPanel 或复选框。

7、添加对话框组件

你的应用可以通过组件打开图片文件并选择背景色。组件类似于控件。使用“工具箱”向窗体添加组件。使用属性窗口设置其属性。

与控件不同，向窗体添加组件不会添加可见项。相反，这将提供可使用代码触发的某些行为。例如，组件可打开“打开文件”对话框。

在此部分，你将向窗体添加 OpenFileDialog
组件和
ColorDialog 组件。

1.选择 Windows 窗体设计器（“Form1.cs [Design]”）。然后打开“工具箱”并选择“对话框”组。
2.双击“OpenFileDialog”向窗体添加一个名为“openFileDialog1”的组件。
3.双击“ColorDialog”，添加一个名为 colorDialog1 的组件。该组件在 Windows 窗体设计器的底部显示为图标。
4.选择“openFileDialog1”图标并设置以下两个属性：
- 将“Filter”属性设置为以下值：
  
  控制台复制
```
JPEG Files (*.jpg)|*.jpg|PNG Files (*.png)|*.png|BMP Files (*.bmp)|*.bmp|All files (*.*)|*.*
```
- 将 Title 属性设置为以下内容：“选择一个图片文件”
“Filter”属性设置指定“选择图片”对话框显示的类型。

8、为控件添加事件处理程序

在此部分，为控件添加事件处理程序。发生操作（如选择按钮）时，应用程序会调用事件处理程序。

1.打开 Visual Studio。图片查看器项目显示在“打开最近使用的文件”下。
2.在 Windows 窗体设计器中，并双击“显示图片”按钮。或者，可以选择窗体上的“显示图片”按钮，然后按 Enter 键。

3.Visual Studio IDE 会在主窗口中打开一个选项卡。在 C# 中，选项卡名为 Form1.cs。如果使用的是 Visual Basic，则该选项卡名为 Form1.vb。

4.此选项卡显示窗体后面的代码文件。

备注

Form1.vb 选项卡可能会将“showButton”显示为“ShowButton” 。
5.使用此页右上角的编程语言控件查看 C# 代码片段或 Visual Basic 代码片段。
6.再次选择“Windows 窗体设计器”选项卡，然后双击“清除图片”按钮以打开其代码。对于剩余两个按钮，重复此操作。 Visual Studio IDE 每次都会向窗体的代码文件添加一个新方法。

7.双击 Windows 窗体设计器中的 CheckBox 控件以添加 checkBox1_CheckedChanged() 方法。选中或清除复选框时，它将调用此方法。

private void clearButton_Click(object sender, EventArgs e)
{
}

private void backgroundButton_Click(object sender, EventArgs e)
{
}

private void closeButton_Click(object sender, EventArgs e)
{
}

private void checkBox1_CheckedChanged(object sender, EventArgs e)
{
}

方法（包括事件处理程序）可以根据你的需要命名。使用 IDE 添加事件处理程序时，IDE 将基于控件的名称和正在处理的事件创建一个名称。

例如，名为 showButton 的按钮的 Click 事件称为 showButton_Click() 或 ShowButton_Click()。如果要更改代码的变量名，请右键单击代码中的变量，然后选择“重构”>“重命名” 。将重命名代码中变量的所有实例。

9、编写代码以打开对话框

“显示图片”按钮使用 OpenFileDialog 组件显示图片文件。此过程添加用于调用该组件的代码。

Visual Studio IDE 提供了一个名为 IntelliSense 的强大工具。当你在键入时，IntelliSense 会建议可能的代码。

1.在 Windows 窗体设计器中，并双击“显示图片”按钮。 IDE 将光标移到 showButton_Click() 或 ShowButton_Click() 方法内。
2.在两个大括号 { } 之间或 Private Sub... 和 End Sub 之间的空行上键入一个 i。这时会打开一个 IntelliSense 窗口。
3.“IntelliSense”窗口应该会突出显示 if 一词。选择 Tab 键以插入 if。
4.选择“true”，然后针对 C# 键入 op 以进行覆盖，或者针对 Visual Basic 键入 Op 以进行覆盖。

IntelliSense 显示 openFileDialog1。
5.选择 Tab 键以添加 openFileDialog1。
6.在 openFileDialog1 后直接键入句点 (.) 或点号。 IntelliSense 提供 OpenFileDialog 组件的所有属性和方法。开始键入 ShowDialog 并选择 Tab 键。ShowDialog() 方法将显示“打开文件”对话框。
7.在 ShowDialog 中的“g”后立即添加括号 ()。代码应该为 openFileDialog1.ShowDialog()。
8.对于 C#，添加一个空格，然后添加两个等于号 (==)。对于 Visual Basic，添加一个空格，然后使用单个等号 (=)。
9.添加另一个空格。使用 IntelliSense 输入 DialogResult。
10.键入一个点，在 IntelliSense 窗口中打开 DialogResult 值。输入字母 O，然后选择 Tab 键插入“OK”。

第一行代码应会完成。对于 C#，输出应如下所示。

if (openFileDialog1.ShowDialog() == DialogResult.OK)

对于 Visual Basic，此代码行应如下所示。

If OpenFileDialog1.ShowDialog() = DialogResult.OK Then

pictureBox1.Load(openFileDialog1.FileName);

11.可以复制并粘贴或使用 IntelliSense 添加这些代码行。最终的 showButton_Click() 方法应与以下代码类似。

private void showButton_Click(object sender, EventArgs e)
{
    if (openFileDialog1.ShowDialog() == DialogResult.OK)
    {
        pictureBox1.Load(openFileDialog1.FileName);  
    }
}

12.将下面的注释添加到代码中。

private void showButton_Click(object sender, EventArgs e)
{
    // Show the Open File dialog. If the user clicks OK, load the
    // picture that the user chose.
    if (openFileDialog1.ShowDialog() == DialogResult.OK)
    {
        pictureBox1.Load(openFileDialog1.FileName);
    }
}

最佳做法是始终注释代码。通过代码注释，可以在将来更轻松地理解和维护代码。

10、为其他控件编写代码

如果现在运行应用程序，可以选择“显示图片”。图片查看器将打开“打开文件”对话框，你可在其中选择要显示的图片。

在此部分，为其他事件处理程序添加代码。

1.在 Windows 窗体设计器中，并双击“清除图片”按钮。在大括号中添加代码。

private void clearButton_Click(object sender, EventArgs e)
{
    // Clear the picture.
    pictureBox1.Image = null;
}

2.双击“设置背景色”按钮，并在大括号中添加代码。

private void backgroundButton_Click(object sender, EventArgs e)
{
    // Show the color dialog box. If the user clicks OK, change the
    // PictureBox control's background to the color the user chose.
    if (colorDialog1.ShowDialog() == DialogResult.OK)
        pictureBox1.BackColor = colorDialog1.Color;
}

3.双击“关闭”按钮，并在大括号中添加代码。

private void closeButton_Click(object sender, EventArgs e)
{
    // Close the form.
    this.Close();
}

4.双击“拉伸”复选框，并在大括号中添加代码。

private void checkBox1_CheckedChanged(object sender, EventArgs e)
{
    // If the user selects the Stretch check box, 
    // change the PictureBox's
    // SizeMode property to "Stretch". If the user clears 
    // the check box, change it to "Normal".
    if (checkBox1.Checked)
        pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;
    else
        pictureBox1.SizeMode = PictureBoxSizeMode.Normal;
}