步驟 5：將控制項加入至您的表單

在這個步驟中，您要將控制項 (例如 PictureBox 控制項和 CheckBox 控制項) 加入至表單。 接著，您要將按鈕加入至表單。

如本主題的影像版本，請參閱教學課程 1： 建立圖片檢視器中 Visual Basic-視訊的 2 或 教學課程 1： 建立圖片檢視器中 C#-視訊 2。

若要將控制項加入至表單

1. 移至 [工具箱]，然後展開 [通用控制項] 群組。 這樣會顯示您在表單上最常見的控制項。

2. 按兩下 PictureBox 控制項。 IDE 會將 PictureBox 控制項加入至表單。 因為 TableLayoutPanel 會停駐以填滿整個表單，所以 IDE 會將 PictureBox 控制項加入至第一個空白儲存格。

3. 在新的 PictureBox 控制項上按一下黑色三角形，以顯示其工作清單，如下列圖片所示。

   PictureBox 工作

   

   注意事項
   如果不小心將錯誤類型的控制項加入至 TableLayoutPanel，您可以刪除它。以滑鼠右鍵按一下控制項，然後從功能表中按一下 [刪除]。您也可以從 [編輯] 功能表中選取 [復原]，以從表單中移除控制項。

4. 按一下 [停駐於父容器中] 連結。 這樣會自動將 PictureBox 的 [Dock] 屬性設定為 [Fill]。 若要確認這一點，請按一下 PictureBox 控制項選取它，然後移至 [屬性] 視窗，確定 [Dock] 屬性已設定為 [Fill]。

5. 變更 PictureBox 的 [ColumnSpan] 屬性，使 PictureBox 橫跨兩個資料行。 選取 PictureBox 控制項，並將其 [ColumnSpan] 屬性設定為 [2]。 另外，您也想要在 PictureBox 空白時顯示空框架。 將其 [BorderStyle] 屬性設定為 [Fixed3D]。

6. 將 CheckBox 控制項加入至表單。 按兩下 [工具箱] 中的 [CheckBox] 項目，讓 IDE 將新的 CheckBox 控制項加入至資料表中的下一個空白儲存格。 因為 PictureBox 會佔用前兩個儲存格，所以 CheckBox 控制項會加入至左下方儲存格。 選取新的 CheckBox 控制項，將其 [Text] 屬性設定為 [Stretch]，如下列圖片所示。

   使用 Stretch 屬性的 TextBox 控制項

   

7. 移至 [工具箱] 中的 [容器] 群組 (您取得 TableLayoutPanel 控制項的位置)，按兩下 [FlowLayoutPanel] 項目將新的控制項加入至 PictureBox 中的最後一個儲存格。 然後，將它停駐在父容器中 (從工作清單中選擇 [停駐於父容器中]，或將其 [Dock] 屬性設定為 [Fill])。

   注意事項
   FlowLayoutPanel 是一種容器，可依序整齊地排列其他控制項。當您調整 FlowLayoutPanel 的大小時，如果還有空間可將所有控制項配置在單一資料列上，它就會這樣做。否則，它會將控制項分行排列，由下往上堆疊控制項。您將會使用 FlowLayoutPanel 來放置四個按鈕。

若要加入按鈕

1. 選取您已加入的 FlowLayoutPanel。 移至 [工具箱] 中的 [通用控制項]，然後按兩下 [Button] 圖示將稱為 [button1] 的按鈕加入至 FlowLayoutPanel。 重複此步驟加入另一個按鈕。 IDE 判斷已有一個稱為 [button1] 的按鈕，所以會將下一個按鈕命名為 [button2]。

   注意事項
   在 Visual Basic 中，按鈕名稱的第一個字母是大寫，所以 [button1] 變成 [Button1]、[button2] 變成 [Button2]，依此類推。

2. 您通常會使用 [工具箱] 加入其他按鈕。 現在，按一下 [button2]，然後按一下 [編輯] 功能表上的 [複製] (或按 Ctrl+C)。 按一下 [編輯] 功能表上的 [貼上] (或按 Ctrl+V)，貼上按鈕的複本。 現在再貼一次。 IDE 現在已加入 [button3] 和 [button4]。

   注意事項
   您可以複製及貼上任何控制項。IDE 會以邏輯方式命名和放置新的控制項。如果您將控制項貼至容器中，IDE 會選擇下一個邏輯放置空間。

3. 選取第一個按鈕，將其 [Text] 屬性設定為 [顯示圖片]。 然後，將接下來三個按鈕的 [Text] 屬性分別設定為 [清除圖片]、[設定背景色彩] 和 [關閉]。

4. 下一個步驟是調整按鈕的大小和排列按鈕，使它們對齊面板左邊。 選取 FlowLayoutPanel 並查看其 [FlowDirection] 屬性。 將此屬性設定為 [RightToLeft]。 這樣做之後，按鈕應該會立即對齊儲存格右邊，且順序會反轉，使得 [顯示圖片] 按鈕位於右邊。

   注意事項
   如果按鈕的順序還是不對，您可以在 FlowLayoutPanel 上拖曳按鈕，依任何順序重新排列按鈕。您可以按一下其中一個按鈕並向左或向右拖曳。

5. 按一下 [關閉] 按鈕選取它。 按住 CTRL 鍵並按一下其他三個按鈕，將它們全部選取。 選取所有按鈕後，移至 [屬性] 視窗並向下捲動至 [AutoSize] 屬性。 此屬性會指示按鈕自動調整本身的大小，以容納其所有文字。 將此屬性設定為 [true]。 您的按鈕現在應該具有適當的大小且順序正確 (只要將四個按鈕全部選取，您就可以同時將四個 [AutoSize] 屬性全部變更)。 下列圖片顯示這四個按鈕。

   含有四個按鈕的圖片檢視器

   

6. 現在，重新執行程式來查看新配置的表單。 按一下按鈕而核取方塊還沒有任何作用，不過很快就會有功能。

若要繼續或檢視

• 若要移到下一個教學課程步驟，請參閱步驟 6：命名您的按鈕控制項。

• 若要回到上一個教學課程步驟，請參閱步驟 4：使用 TableLayoutPanel 控制項來配置您的表單。