步驟 4：使用 TableLayoutPanel 控制項來配置您的表單

在這個步驟中，您會將 TableLayoutPanel 控制項加入至表單。

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

若要使用 TableLayoutPanel 控制項來配置您的表單

1. 移至 [Windows Form 設計工具]。 查看表單左邊並找出 [工具箱] 索引標籤。 指向 [工具箱] 索引標籤並暫停，[工具箱] 隨即出現 (或者，從 [檢視] 功能表中按一下 [工具箱])。

2. 按一下 [容器] 群組旁邊的加號開啟它，如下列圖片所示。

   容器群組

   

3. 您可以將控制項 (例如按鈕、核取方塊和標籤) 加入至表單。 按兩下 [工具箱] 中的 TableLayoutPanel 控制項。 這樣做時，IDE 會將 TableLayoutPanel 控制項加入至表單，如下列圖片所示。

   TableLayoutPanel 控制項

   

   注意事項
   加入 TableLayoutPanel 之後，如果表單內出現標題為 [TableLayoutPanel 工作] 的視窗，請按一下表單內的任何位置以關閉它。稍後在教學課程中，您將深入了解此視窗。

   注意事項
   請注意 [工具箱] 在您按一下索引標籤時會展開以包含您的表單，當您在它內部按一下時就會關閉。這就是 IDE 的自動隱藏功能。您可以藉著按一下視窗右上角的圖釘圖示，開啟或關閉任何視窗的此功能，以便切換自動隱藏並鎖定視窗。圖釘圖示顯示如下。

   圖釘圖示

   

4. 按一下 [TableLayoutPanel] 以確定選取它。 您可以查看 [屬性] 視窗頂端的下拉式清單，以驗證已選取哪一個控制項，如下列圖片所示。

   顯示 TableLayoutPanel 控制項的屬性視窗

   

5. 控制項選擇器是 [屬性] 視窗頂端的下拉式清單。 在此範例中，它顯示已選取一個稱為 tableLayoutPanel1 的控制項。 您可以在 [Windows Form 設計工具] 中按一下或從控制項選擇器中選擇，以選取控制項。 現在已選取 TableLayoutPanel，請尋找 [Dock] 屬性並按一下 [Dock]，此屬性應該設定為 [None]。 請注意，值旁邊會出現下拉箭號。 按一下箭號，然後選取 [Fill] 按鈕 (中間的大型按鈕)，如下列圖片所示。

   已選取填滿的屬性視窗

   

6. 將 TableLayoutPanel [Dock] 屬性設定為 [Fill] 之後，面板會填滿整個表單。 如果您再次調整表單的大小，TableLayoutPanel 會停駐不動，並調整大小來填滿表單。

   注意事項
   TableLayoutPanel 就像 Microsoft Office Word 中的表格 (具有列和欄)，且單一儲存格可以跨越多個列和欄。每一個儲存格中放置一個控制項 (例如按鈕、核取方塊或標籤)。您的 TableLayoutPanel 將具有一個橫跨整個上方資料列的 PictureBox 控制項、在左下方儲存格有一個 CheckBox 控制項，以及在右下方儲存格中則有四個 Button 控制項。

   注意事項
   雖然剛剛說明每一個儲存格中只能有一個控制項，但右下方儲存格中有四個 Button 控制項。這是因為您可以在儲存格中放入一個控制項來存放其他控制項。這種控制項稱為容器，TableLayoutPanel 就是容器。您將在本教學課程中深入了解這一點。

7. 目前，TableLayoutPanel 具有兩個大小相等的資料列和兩個大小相等的資料行。 您需要對它們調整大小，使上方資料列和右邊資料行都變得更大。 在 [Windows Form 設計工具] 中，選取 [TableLayoutPanel]。 右上角有一個黑色的小型三角形按鈕，如下所示。

   三角形按鈕

   

   此按鈕表示控制項具有可協助您自動設定其屬性的工作。

8. 按一下三角形會顯示控制項的工作清單，如下列圖片所示。

   TableLayoutPanel 工作

   

9. 按一下 [編輯資料列與資料行] 工作會顯示 [資料行和資料列樣式] 視窗。 按一下 [Column1]，並將其大小設定為 15% (藉由確定已選取 [百分比] 按鈕，並在 [百分比] 方塊中輸入 15) (這是一個 NumericUpDown 控制項，在稍後的教學課程中會用到)。 按一下 [Column2]，並設定為 85%。 還不要按一下 [確定] 按鈕，因為視窗將會關閉 (但如果這樣做，您還是可以使用工作清單來重新開啟視窗)。

10. 從視窗頂端的 [顯示] 下拉式清單中，按一下 [資料列]。 將 [Row1] 設定為 90%，將 [Row2] 設定為 10%。

11. 按一下 [確定]。 TableLayoutPanel 現在應該具有大型的上方資料列、小型的下方資料列和大型的右邊資料行。 您可以在 TableLayoutPanel 中拖曳資料列和資料行的框線，以調整其大小。

若要繼續或檢視

• 若要移到下一個教學課程步驟，請參閱步驟 5：將控制項加入至您的表單。

• 若要回到上一個教學課程步驟，請參閱步驟 3：設定您的表單屬性。