共用方式為


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

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

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

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

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

    容器群組

    [容器] 群組

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

    TableLayoutPanel 控制項

    TableLayoutPanel 控制項

    注意事項注意事項

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

    注意事項注意事項

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

    圖釘圖示

    圖釘圖示

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

    顯示 TableLayoutPanel 控制項的屬性視窗

    顯示 TableLayoutPanel 控制項的 [屬性] 視窗

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

    已選取填滿的屬性視窗

    其中已選取 [Fill] 的 [屬性] 視窗

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

    注意事項注意事項

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

    注意事項注意事項

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

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

    三角形按鈕

    三角形按鈕

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

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

    TableLayoutPanel 工作

    TableLayoutPanel 工作

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

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

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

若要繼續或檢視