共用方式為

教學課程：將程式代碼新增至圖片查看器 Windows Forms 應用程式 （.NET Framework）

在這個三個教學課程系列中，您會建立 Windows Forms 應用程式來載入圖片並加以顯示。 Visual Studio 整合式設計環境 （IDE） 提供建立應用程式所需的工具。

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

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

  • 為您的控制項新增事件處理程式
  • 撰寫程式代碼以開啟對話框
  • 撰寫其他控制件的程序代碼
  • 執行您的應用程式

若要使用 .NET 建立新的 Windows Forms 應用程式，請遵循教學課程 使用 .NET 建立 Windows Forms 應用程式。 若要深入瞭解，請參閱 Windows Forms .NET 上的 桌面指南。

先決條件

對您的控制項新增事件處理程式

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

  1. 開啟 Visual Studio。 您的圖片查看器專案會出現在 [開啟最近的 ] 底下。

  2. 在 [Windows Forms 設計工具]中，按兩下 [顯示圖片 ] 按鈕。 您可以改為選取表單上的 顯示圖片 按鈕，然後按 Enter。

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

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

    螢幕快照顯示具有 Visual C 尖銳程式代碼的 [Form1.cs] 索引標籤。

    注意

    您的 [Form1.vb] 索引標籤可能會顯示為 showButton 和 ShowButton。

  3. 將焦點放在程式代碼的這個部分。

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

  4. 再次選擇 [Windows Forms 設計工具] 標籤，然後雙擊 [清除圖片] 按鈕以開啟其程式碼。 針對其餘兩個按鈕重複操作。 每次，Visual Studio IDE 都會將新方法新增至表單的程式代碼檔案。

  5. 按兩下 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)
{
}

方法，包括事件處理程式，可以有您想要的任何名稱。 當您使用 IDE 新增事件處理程式時，它會根據控件的名稱和所處理的事件來建立名稱。

例如，名為 showButton 按鈕的 Click 事件稱為 showButton_Click() 或 ShowButton_Click()。 如果您要變更程式碼變數名稱，請以滑鼠右鍵按下程式代碼中的變數，然後選擇 [重構]>[重新命名]。 此動作會重新命名程式碼中該變數的所有實例。 如需詳細資訊，請參閱 重新命名重構。

撰寫程式代碼以開啟對話框

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

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

  1. 在 Windows Forms 設計工具中，按兩下 [顯示圖片] 按鈕。 IDE 會將游標移至 showButton_Click() 或 ShowButton_Click() 方法內。

  2. 在兩個大括號 { }之間的空行上，或在 Private Sub... 與 End Sub之間輸入 i。 IntelliSense 視窗隨即開啟。

    螢幕快照顯示 IntelliSense 與 Visual C# 程式代碼。

  3. IntelliSense 視窗應該將 if字突出顯示。 選取 索引標籤 鍵兩次，以插入 if 代碼段。

  4. 選取 true，然後輸入 op 以覆寫 C# 或輸入 Op 以覆寫 Visual Basic。

    螢幕快照顯示顯示按鈕的事件處理程式，選擇了值為 true。

    IntelliSense 會顯示 openFileDialog1。

  5. 選取 標籤 以新增 openFileDialog1。

  6. 輸入句點（.）或 點，緊接在 openFileDialog1後面。 IntelliSense 提供所有 OpenFileDialog 元件的屬性和方法。 開始輸入 ShowDialog 並選取 索引標籤。ShowDialog() 方法會顯示 [開啟檔案] 對話框。

  7. 將括弧 () 緊接在 ShowDialog中的 「g」 後面。 您的程式碼應該是 openFileDialog1.ShowDialog()。

  8. 針對 C#，新增空格，然後新增兩個等號 （==）。 若為 Visual Basic，請新增空格，然後使用單一等號 （=）。

  9. 新增另一個空間。 使用 IntelliSense 輸入 DialogResult。

  10. 在 [IntelliSense ] 視窗中輸入一個點，以開啟 [] 的 DialogResult 值。 輸入字母 O，然後選擇 索引標籤 鍵，插入 OK。

    注意

    第一行程式代碼應該完成。 針對 C#，它應該類似下列內容。

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

    針對 Visual Basic，應該如下。

    If OpenFileDialog1.ShowDialog() = DialogResult.OK Then

  11. 新增下列程式碼行。

    pictureBox1.Load(openFileDialog1.FileName);

    您可以複製並貼上或使用 IntelliSense 來新增它。 您的最終 showButton_Click() 方法看起來應該類似下列程序代碼。

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

  1. 將下列批註新增至您的程序代碼。

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

最好始終為您的程式碼添加註解。 程式代碼批註可讓您更輕鬆地了解和維護您的程序代碼。

撰寫其他控制件的程序代碼

如果您現在執行應用程式，您可以選擇 [顯示圖片。 圖片查看器會開啟 [開啟檔案 ] 對話框，您可以在其中選擇要顯示的圖片。

在本節中，新增其他事件處理程序的程序代碼。

  1. 在 Windows Forms 設計工具中，按兩下 [[清除] 圖片按鈕。 針對 C#，在大括弧中新增程序代碼。 針對 Visual Basic，在 Private Sub 與 End Sub之間新增程式代碼。

    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. 按兩下 [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;
}

執行您的應用程式

您可以在撰寫應用程式時隨時執行應用程式。 在上一節中新增程式代碼之後，圖片查看器就會完成。 如同先前的教學課程，請使用下列其中一種方法來執行您的應用程式：

  • 選取 F5 鍵。
  • 在選單列上，選取 [[偵錯]>[開始偵錯]。
  • 在工具列上，選取 [開始] 按鈕。

隨即出現標題 圖片查看器 的視窗。 測試所有控制件。

  1. 選取 按鈕 [設定背景色彩]。 [色彩] 對話框隨即開啟。

    螢幕快照顯示您的應用程式與 [色彩] 對話框。

  2. 選擇色彩來設定背景色彩。

  3. 選取 [] 顯示圖片 [] 以顯示圖片。

    螢幕快照顯示顯示圖片的圖片查看器應用程式。

  4. 選擇並取消選擇 Stretch。

  5. 按下[清除圖片]按鈕，以確保顯示螢幕被清空。

  6. 選取 [關閉 以結束應用程式。

祝賀！ 您已完成這一系列的教學課程。 您已在 Visual Studio IDE 中完成這些程式設計和設計工作：

  • 已建立使用 Windows Forms 的 Visual Studio 專案
  • 已新增圖片瀏覽應用程序的版面設定
  • 已新增按鈕和複選框
  • 已新增對話框
  • 已新增控制件的事件處理程式
  • 撰寫 C# 或 Visual Basic 程式代碼來處理事件

下一步

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

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