教學課程：在 Visual Studio 中將程式碼新增至圖片檢視器 Windows Forms 應用程式

發行項
10/05/2023

在此系列的三個教學課程中，您將建立 Windows Forms 應用程式來載入圖片並加以顯示。 Visual Studio 整合式設計環境 (IDE) 提供建立應用程式所需的工具。若要深入了解，請參閱歡迎使用 Visual Studio IDE。

控制項會使用 C# 或 Visual Basic 程式碼來採取與其相關聯的動作。

在第三個教學課程中，您將了解如何：

新增控制項的事件處理常式
撰寫程式碼以開啟對話方塊
撰寫其他控制項的程式碼
執行您的應用程式

必要條件

本教學課程是以先前的教學課程 (建立圖片檢視器應用程式和將 UI 控制項新增至圖片檢視器) 為基礎。如果您尚未完成這些教學課程，請先完成這些教學課程。

新增控制項的事件處理常式

在本節中，為您在第二個教學課程 (將控制項新增至圖片檢視器應用程式) 中新增的控制項新增事件處理常式。您的應用程式會在動作發生時，呼叫事件處理常式，例如選取按鈕。

開啟 Visual Studio。您的圖片檢視器專案會出現在 [開啟最近使用的項目] 下。
在 Windows Forms 設計工具中，按兩下 [顯示圖片] 按鈕。您可以改為選取表單上的 [顯示圖片] 按鈕，然後按 Enter 鍵。

Visual Studio IDE 會在主視窗中開啟索引標籤。對於 C#，索引標籤會命名為 Form1.cs。如果您使用 Visual Basic，索引標籤會命名為 Form1.vb。

此索引標籤會顯示表單後方的程式碼檔案。

注意

您的 Form1.vb 索引標籤可能會將 showButton 顯示為 ShowButton。
注意這部分程式碼。
- C#
- VB
```
private void showButton_Click(object sender, EventArgs e)
{
}
```
```
Private Sub showButton_Click() Handles showButton.Click

End Sub
```
重要

使用此頁面右上方的程式設計語言控制項來檢視 C# 程式碼片段或 Visual Basic 程式碼片段。
再次選擇 [Windows Forms 設計工具] 索引標籤，然後按兩下 [清除圖片] 按鈕，以開啟其程式碼。對其他兩個按鈕重複此步驟。 Visual Studio IDE 每一次都會將新的方法加入至表單的程式碼檔案。

按兩下 Windows Forms 設計工具中的 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 加入事件處理常式時，IDE 會根據控制項的名稱和所處理的事件來建立名稱。

例如，名稱為 showButton 的 Click 事件稱為 showButton_Click() 或 ShowButton_Click()。如果您想要變更程式碼變數名稱，請用滑鼠右鍵按一下程式碼中的變數，然後依序選擇 [重構]>[重新命名]。會重新命名該變數在程式碼中的所有執行個體。如需詳細資訊，請參閱重新命名重構。

撰寫程式碼以開啟對話方塊

[顯示圖片] 按鈕使用 OpenFileDialog 元件來顯示圖片檔案。此程序會新增用來呼叫該元件的程式碼。

Visual Studio IDE 提供稱為 IntelliSense 的強大工具。當您輸入時，IntelliSense 會建議可能的程式碼。

在 Windows Forms 設計工具中，按兩下 [顯示圖片] 按鈕。 IDE 會將游標移至 showButton_Click() 或 ShowButton_Click() 方法內。
在兩個大括號 { } 的空白行上，或在 Private Sub... 和 End Sub 之間，輸入 i。 IntelliSense 視窗隨即開啟。
IntelliSense 視窗應該會反白顯示 if 這個字。選取 Tab 鍵以插入 if。
選取 true，然後輸入 op 以覆寫 (適用於 C#)，或輸入 Op (適用於 Visual Basic)。

IntelliSense 會顯示 openFileDialog1。
選取 Tab 鍵，以新增 openFileDialog1。
在 openFileDialog1 之後輸入句點 (.) 或點。 IntelliSense 提供所有 OpenFileDialog 元件的屬性和方法。開始輸入 ShowDialog，並選取 Tab。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 Forms 設計工具中，按兩下 [清除圖片] 按鈕。在大括號中加入程式碼。

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

按兩下 [自動縮放] 核取方塊，並在大括號中加入程式碼。

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 鍵。
在功能表列上，依序選取 [偵錯]>[開始偵錯]。
在工具列上，選取 [開始]Start 按鈕。

隨即出現標題為圖片檢視器的視窗。測試所有控制項。

選取 [設定背景色彩] 按鈕。 [色彩] 對話方塊隨即開啟。
選擇色彩以設定背景色彩。
選取 [顯示圖片] 以顯示圖片。
選取並取消選取 [自動縮放]。
選取 [清除圖片] 按鈕，確定將顯示清除。
選取 [關閉] 以結束應用程式。

下一步

恭喜！您已經完成本系列的教學課程。您已在 Visual Studio IDE 中完成這些程式設計和設計工作：

已建立使用 Windows Forms 的 Visual Studio 專案
已新增圖片檢視應用程式的版面配置
已新增按鈕和核取方塊
已新增對話方塊
新增控制項的事件處理常式
撰寫 C# 或 Visual Basic 程式碼來處理事件

繼續學習另一個教學課程系列，以了解如何建立計時數學測驗。

教學課程 2：建立計時的數學測驗