共用方式為


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

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

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

在第三個教學課程中,您將了解如何:

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

必要條件

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

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

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

  1. 開啟 Visual Studio。 您的圖片檢視器專案會出現在 [開啟最近使用的項目] 下。

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

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

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

    Screenshot shows the Form1.cs tab with Visual C sharp code.

    注意

    您的 Form1.vb 索引標籤可能會將 showButton 顯示為 ShowButton

  3. 注意這部分程式碼。

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

    重要

    使用此頁面右上方的程式設計語言控制項來檢視 C# 程式碼片段或 Visual Basic 程式碼片段。

    Programming language control for Microsoft Learn

  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 加入事件處理常式時,IDE 會根據控制項的名稱和所處理的事件來建立名稱。

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

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

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

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

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

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

    Screenshot shows IntelliSense with Visual C sharp code.

  3. IntelliSense 視窗應該會反白顯示 if 這個字。 選取 Tab 鍵以插入 if

  4. 選取 true,然後輸入 op 以覆寫 (適用於 C#),或輸入 Op (適用於 Visual Basic)。

    Screenshot shows the event handler for the show button with the value true selected.

    IntelliSense 會顯示 openFileDialog1

  5. 選取 Tab 鍵,以新增 openFileDialog1。

  6. openFileDialog1 之後輸入句點 (.) 或。 IntelliSense 提供所有 OpenFileDialog 元件的屬性和方法。 開始輸入 ShowDialog,並選取 TabShowDialog() 方法會顯示 [開啟檔案] 對話方塊。

  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

  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 設計工具中,按兩下 [清除圖片] 按鈕。 在大括號中加入程式碼。

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

執行您的應用程式

您隨時都可以在撰寫應用程式時執行應用程式。 在上一節中新增程式碼之後,圖片檢視器即完成。 如同先前的教學課程所述,請使用下列其中一種方法來執行您的應用程式:

  • 選取 F5 鍵。
  • 在功能表列上,依序選取 [偵錯]>[開始偵錯]
  • 在工具列上,選取 [開始]Start 按鈕。

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

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

    Screenshot shows the Color dialog box.

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

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

    Screenshot shows the Picture Viewer app with a picture displayed.

  4. 選取並取消選取 [自動縮放]

  5. 選取 [清除圖片] 按鈕,確定將顯示清除。

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

下一步

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

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

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