教程：将代码添加到图片查看器 Windows 窗体应用（.NET Framework）

2025-02-10

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

控件使用 C# 或 Visual Basic 代码执行与其关联的操作。

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

为控件添加事件处理程序
编写代码以打开对话框
为其他控件编写代码
运行应用程序

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

先决条件

本教程基于前面的教程，创建图片查看器应用程序并向图片查看器添加 UI 控件。首先完成这些教程，然后从为这些教程创建的项目开始。

为控件添加事件处理程序

在本部分中，为第二个教程中添加的控件添加 事件处理程序，向图片查看器应用程序添加控件。应用程序在操作发生时调用事件处理程序，例如选择按钮。

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

Visual Studio IDE 将在主窗口中打开一个选项卡。对于 C#，选项卡命名为 Form1.cs。如果使用 Visual Basic，选项卡将命名为 Form1.vb。

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

说明

Form1.vb 选项卡可能会将“showButton”显示为“ShowButton”。

重点介绍代码的这一部分。

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

Private Sub showButton_Click() Handles showButton.Click

End Sub

再次选择 Windows 窗体设计器 选项卡，然后双击 清除图片 按钮以打开其代码。对其余两个按钮重复此操作。每次，Visual Studio IDE 都会向窗体的代码文件添加新方法。

双击 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)
{
}

Private Sub clearButton_Click() Handles clearButton.Click

End Sub

Private Sub backgroundButton_Click() Handles backgroundButton.Click

End Sub

Private Sub closeButton_Click() Handles closeButton.Click

End Sub

Private Sub CheckBox1_CheckedChanged() Handles CheckBox1.CheckedChanged

End Sub

方法（包括事件处理程序）可以具有所需的任何名称。使用 IDE 添加事件处理程序时，它会根据控件的名称和要处理的事件创建名称。

例如，按钮 showButton 的 Click 事件被称为 showButton_Click() 或 ShowButton_Click()。如果要更改代码变量名称，请右键单击代码中的变量，然后选择重构>重命名。此操作将重命名代码中该变量的所有实例。有关更多信息，请参阅重命名重构。

编写代码以打开对话框

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

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

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

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

说明

应完成第一行代码。对于 C#，它应类似于以下内容。

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

对于 Visual Basic，它应如下所示。

If OpenFileDialog1.ShowDialog() = DialogResult.OK Then

添加以下代码行。

pictureBox1.Load(openFileDialog1.FileName);

PictureBox1.Load(OpenFileDialog1.FileName)

可以复制和粘贴或使用 IntelliSense 添加它。最终 showButton_Click() 方法应类似于以下代码。

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

Private Sub showButton_Click() Handles showButton.Click
    If OpenFileDialog1.ShowDialog() = DialogResult.OK Then
        PictureBox1.Load(OpenFileDialog1.FileName)
    End If

End Sub

将以下注释添加到代码。

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);
    }
}

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 Then
        PictureBox1.Load(OpenFileDialog1.FileName)
    End If

End Sub

最佳实践是始终为你的代码添加注释。代码注释使将来更容易理解和维护代码。

为其他控件编写代码

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

在本部分中，添加其他事件处理程序的代码。

在 Windows 窗体设计器中，并双击“清除图片”按钮。对于 C#，请在大括号中添加代码。对于 Visual Basic，请在 Private Sub 和 End Sub之间添加代码。

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

Private Sub clearButton_Click() Handles clearButton.Click
    ' Clear the picture.
    PictureBox1.Image = Nothing
End Sub

双击“设置背景色”按钮，然后添加代码。

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;
}

Private Sub backgroundButton_Click() Handles backgroundButton.Click
    ' 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 Then
        PictureBox1.BackColor = ColorDialog1.Color
    End If
End Sub

双击 “关闭”按钮并添加代码。

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

Private Sub closeButton_Click() Handles closeButton.Click
    ' Close the form.
    Close()
End Sub

双击 Stretch 复选框并添加代码。

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;
}

Private Sub CheckBox1_CheckedChanged() Handles CheckBox1.CheckedChanged
    ' 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 Then
        PictureBox1.SizeMode = PictureBoxSizeMode.StretchImage
    Else
        PictureBox1.SizeMode = PictureBoxSizeMode.Normal
    End If
End Sub

运行应用程序

编写应用程序时可以随时运行应用程序。在上一部分添加代码后，图片查看器已完成。与前面的教程一样，使用以下方法之一来运行应用程序：

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

出现一个标题为 图片查看器 的窗口。测试所有控件。

选择“设置背景色”按钮。随即打开“颜色”对话框。
选择一种颜色来设置背景色。
选择“显示图片”以显示图片。
选择“拉伸”，然后取消选择。
选择 “清除屏幕”按钮以确保显示屏被清空。
选择关闭退出应用。

祝贺！你已完成本系列教程。你在 Visual Studio IDE 中完成了这些编程和设计任务：

创建了一个使用 Windows 窗体的 Visual Studio 项目
为图片查看应用程序添加了布局
添加了按钮和复选框
添加了对话框
为控件添加了事件处理程序
编写 C# 或 Visual Basic 代码来处理事件

下一步

继续学习另一个教程系列，了解如何创建计时数学测验。

教程 2：创建计时数学测验

通过