共用方式為

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

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

此程式有圖片方塊、複選框和數個按鈕，可用來控制應用程式。 本教學課程說明如何新增這些控制件。

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

  • 將控制項新增至您的應用程式
  • 在版面配置面板中新增按鈕
  • 變更控制項名稱和位置
  • 新增對話框元件

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

先決條件

  • 本教學課程是以上一個教學課程為基礎，建立圖片查看器應用程式。 請先完成該作業，然後從您為該教學課程建立的項目開始。

將控制項新增至您的應用程式

圖片查看器應用程式會使用 PictureBox 控制件來顯示圖片。 它會使用複選框和數個按鈕來管理圖片和背景，以及關閉應用程式。 您可以從 Visual Studio IDE 中的 [工具箱] 新增 PictureBox 和複選框。

  1. 開啟 Visual Studio。 您的圖片檢視專案會出現在 開啟最近的。

  2. 在 Windows Forms 設計工具中，選取您在上一個教學課程中新增的 TableLayoutPanel。 檢查 tableLayoutPanel1 是否出現在 [屬性] 視窗中。

  3. 在 Visual Studio IDE 的左側，選取 [工具箱] 索引標籤。如果您沒有看到，請從功能表欄選取 [檢視>工具箱]，或從功能表欄選取 [Ctrl+Alt+X]。 在工具箱中，展開 [通用控制件]。

  4. 按兩下 PictureBox，將 PictureBox 控制項新增至表單。 Visual Studio 會將 PictureBox 控件新增至 TableLayoutPanel 的第一個空白單元格。

  5. 選擇新的 PictureBox 控件加以選取，然後選取新 PictureBox 控制件上的黑色三角形以顯示其工作清單。

    螢幕快照顯示 [PictureBox 工作] 對話框，其中已醒目提示 [父容器] 中的 Dock。

  6. 在父容器 中選取Dock，將 PictureBox Dock 屬性設定為 Fill。 您可以在 [屬性] 視窗中看到該值。

  7. 在 PictureBox 的 [Properties] 視窗中，將 ColumnSpan 屬性設定為 2。 PictureBox 現在會填滿這兩個數據行。

  8. 將 BorderStyle 屬性設定為 Fixed3D。

  9. 在 Windows Forms 設計工具中，選取 [TableLayoutPanel]。 然後，在 [工具箱]中，雙擊 [CheckBox] 專案以新增 CheckBox 控制件。 PictureBox 會佔用 TableLayoutPanel 中的前兩個儲存格，因此 CheckBox 控制項會新增至左下方單元格。

  10. 選擇 Text 屬性，然後輸入 Stretch。

    螢幕快照顯示名為 Stretch 的 CheckBox 控制件。

在版面配置面板中新增按鈕

到目前為止，您已將控件新增至 TableLayoutPanel。 這些步驟說明如何將四個按鈕新增至 TableLayoutPanel 中的新版面配置面板。

  1. 請選取表單上的 TableLayoutPanel。 開啟 [工具箱]，然後選取 [容器]。 按兩下 FlowLayoutPanel，將新的控件新增至 TableLayoutPanel 的最後一個單元格。

  2. 將 FlowLayoutPanel 的 Dock 屬性設定為 Fill。 您可以選取黑色三角形，然後在父容器中選取 Dock來設定此屬性。

    FlowLayoutPanel 是一個容器，用於將其他控件依次排列成一排。

  3. 選取新的 FlowLayoutPanel，然後開啟 [工具箱]，接著選取 [常用控制項]。 請按兩下 按鈕 專案，將新增一個名為 button1 的按鈕控件。

  4. 再次雙擊 按鈕 以新增另一個按鈕。 IDE 將下一個按鈕稱為 button2。

  5. 以這種方式新增兩個按鈕。 另一個選項是選取 按鈕2。 然後選取 [編輯>複製]，或 Ctrl+C。 接下來，從功能表欄選擇 [編輯>貼上]，或按 Ctrl +V 來貼上按鈕複本。 現在再貼上一次。 IDE 會將 button3 和 button4 新增至 FlowLayoutPanel。

  6. 選取第一個按鈕，並將其 Text 屬性設定為 顯示圖片。

  7. 將接下來三個按鈕的 [Text 屬性設定為 [清除圖片]、[設定背景色彩]，[關閉]。

  8. 若要調整按鈕的大小並加以排列，請選取 FlowLayoutPanel。 將 FlowDirection 屬性設定為 RightToLeft。

    按鈕應該對齊單元格右側，並反轉其順序，讓 顯示圖片 按鈕位於單元格右側。 您可以拖曳 FlowLayoutPanel 周圍的按鈕，以任何順序排列這些按鈕。

  9. 選擇 關閉 按鈕以選取。 然後，若要同時選取其餘的按鈕，請按下並按住 ctrl 鍵並加以選擇。

  10. 在 [屬性] 視窗中，將 AutoSize 屬性設定為 True。 按鈕會重設大小以符合其文字。

    螢幕快照顯示具有四個按鈕的圖片查看器表單。

您可以執行程式來查看控制元件的外觀。 選取 F5 鍵、選取 [偵錯]>[開始偵錯]，或選取 [開始 ] 按鈕。 您新增的按鈕尚未執行任何動作。

變更控制項名稱

窗體上有四個按鈕，名為 button1、button2、button3，以及 button4 ，這些都在 C# 中。 在 Visual Basic 中，任何控件名稱的預設第一個字母會大寫，因此按鈕會命名 為 Button1、Button2、Button3，以及 Button4。 使用這些步驟來提供更具資訊性的名稱。

  1. 在表單上，選擇 [關閉] 按鈕。 如果您仍然選取所有按鈕，請選擇 Esc 以取消選取。

  2. 在 [屬性] 視窗中，尋找 。 將名稱變更為 closeButton。

    螢幕快照顯示具有 closeButton 名稱的 [屬性] 視窗。

    IDE 不接受包含空格的名稱。

  3. 將其他三個按鈕重新命名為 backgroundButton、clearButton，以及 showButton。 您可以在 [屬性] 視窗中選擇控件選取器下拉式清單，以確認名稱。 新的按鈕名稱隨即出現。

您可以變更任何控件的名稱，例如 TableLayoutPanel 或 CheckBox。

新增對話框元件

您的應用程式可以使用元件開啟圖片檔案，並選擇背景色彩。 元件就像控件。 您可以使用 [工具箱]，將元件新增至表單。 您可以使用 [屬性] 視窗 來設定其屬性。

與控件不同，將元件新增至窗體並不會新增可見的項目。 相反地，它會提供您可以使用程式代碼觸發的特定行為。 例如，它是開啟 Open File 對話框的元件。

在本節中，您會將 OpenFileDialog 元件和 ColorDialog 元件新增至表單。

  1. 選取 Windows Forms 設計工具 （Form1.cs [設計]）。 然後開啟 [工具箱]，然後選取 [對話框] 群組。

  2. 按兩下 OpenFileDialog，將名為 openFileDialog1 的元件新增至表單。

  3. 按兩下 ColorDialog 來新增一個名為 colorDialog1的元件。 元件會顯示在 windows Forms 設計工具底部 做為圖示。

    螢幕快照顯示設計工具底部的對話框元件。

  4. 選擇 openFileDialog1 圖示，並設定兩個屬性：

    • 將 Filter 屬性設定為下列值：

      JPEG Files (*.jpg)|*.jpg|PNG Files (*.png)|*.png|BMP Files (*.bmp)|*.bmp|All files (*.*)|*.*

    • 將 Title 屬性設定為下列值：選取圖片檔案。

    Filter 屬性設定會指定 [選取圖片] 對話框中顯示的圖片類型。

下一步

前進到下一個教學課程，以瞭解如何將程式代碼新增至您的應用程式。

教學課程第 3 部分：將程式代碼新增至圖片查看器