1. 程式人生 > >使用 TableLayoutPanel 控件設置窗體布局

使用 TableLayoutPanel 控件設置窗體布局

適合 情況 標題 視圖 not blog window BE itl

使用 TableLayoutPanel 控件設置窗體布局

    1. 在 Visual Studio IDE 左側,找到“工具箱”選項卡。 選擇“工具箱”選項卡,隨即將顯示工具箱。(或者,在菜單欄上,依次選擇“視圖”、“工具箱”。)

    2. 選擇“容器”組旁邊的小三角形符號以打開該組,如下圖所示。

      技術分享圖片
      “容器”組

    3. 可以向窗體中添加類似按鈕、復選框和標簽這樣的控件。 在工具箱中雙擊 TableLayoutPanel 控件。(您也可將控件從工具箱拖動到窗體上。)當執行此操作時,IDE 會將 TableLayoutPanel 控件添加到窗體中,如下圖中所示。

      技術分享圖片
      TableLayoutPanel 控件

      技術分享圖片 說明

      添加 TableLayoutPanel 之後,如果窗體中出現標題為“TableLayoutPanel 任務”的窗口,請選擇窗體內的任何位置以關閉此窗口。 在本教程後面部分,您將學習到有關此窗口的更多內容。

      請註意當選擇“工具箱”選項卡時工具箱是如何展開以覆蓋窗體的,以及當選擇工具箱外部的任何位置後它是如何關閉的。 這就是 IDE 自動隱藏功能。 通過選擇窗口右上角的圖釘圖標在自動隱藏和就地鎖定之間切換,您可為任何窗口打開或關閉工具箱。 圖釘圖標如下所示。

      技術分享圖片
      圖釘圖標

    4. 通過選擇“TableLayoutPanel”來確保選定它。 可以通過查看“屬性”窗口頂部的下拉列表來驗證選定哪個控件,如下圖中所示。

      技術分享圖片
      顯示 TableLayoutPanel 控件的“屬性”窗口

    5. 在“屬性”窗口的工具欄上選擇“按字母順序”按鈕。 這會導致“屬性”窗口中的屬性列表按字母順序顯示,這樣更易於查找本教程中的屬性。

    6. 控件選擇器是“屬性”窗口頂部的下拉列表。 在此示例中,它顯示選定了名為 tableLayoutPanel1 的控件。 您可以通過在 Windows 窗體設計器中選擇一個區域或者從控件選擇器中進行選擇來選擇控件。 選擇 TableLayoutPanel 之後,請查找“Dock”屬性並選擇“Dock”,此屬性應設置為“無”。 請註意,一個下拉箭頭將出現在值旁邊。 選擇該箭頭,然後選擇“Fill”按鈕(中間的大按鈕),如下圖所示。

      技術分享圖片
      “Fill”處於選中狀態的“屬性”窗口

      Visual Studio 中的停靠是指 IDE 中的一個窗口附加到另一個窗口或區域的情況。 例如,“屬性”窗口可以取消停靠,即在 Visual Studio 中獨立地自由浮動,也可以靠近“解決方案資源管理器”停靠。

    7. 在將 TableLayoutPanel 的“Dock”屬性設置為“Fill”之後,此面板將填充整個窗體。 如果再次調整窗體的大小,則 TableLayoutPanel 將保持停靠狀態,並自行調整大小以適合窗體。

      技術分享圖片 說明

      TableLayoutPanel 與 Microsoft Office Word 中的表類似:它具有行和列,並且個別單元格可以跨多個行和列。 每個單元格都可以存放一個控件(例如按鈕、復選框或標簽)。 TableLayoutPanel 將具有一個跨其整個頂部行的 PictureBox 控件、一個位於其左上角單元格中的CheckBox 控件和四個位於其右上角單元格中的 Button 控件。

    8. TableLayoutPanel 當前具有兩個大小相等的行和兩個大小相等的列。 您需要調整它們,以使頂部行和右側列更大一些。 在 Windows 窗體設計器中選擇“TableLayoutPanel”。 在右上角有一個小的黑色三角形按鈕,如下所示。

      技術分享圖片
      三角形按鈕

      此按鈕指示該控件具有幫助您自動設置其屬性的任務。

    9. 選擇三角形以顯示控件的任務列表,如下圖所示。

      技術分享圖片
      TableLayoutPanel 任務

    10. 選擇“編輯行和列”任務以顯示“列和行樣式”窗口。 選擇“Column1”,確保選中“百分比”按鈕並在“百分比”框中輸入 15,以將此控件的大小設置為 15%。(這是將在後面的教程中使用的 NumericUpDown 控件。)選擇“Column2”並將其設置為 85%。 先不要選擇“確定”按鈕,因為這將關閉此窗口。(但如果這樣做,您可以使用任務列表重新打開它。)

      技術分享圖片
      TableLayoutPanel 列和行樣式

    11. 從窗口頂部的“顯示”下拉列表中選擇“行”。 將“Row1”設置為 90% 並將“Row2”設置為 10%。

    12. 選擇“確定”按鈕。 現在,TableLayoutPanel 應具有一個大的頂部行、一個小的底部行、一個小的左側列和一個大的右側列。 您可在 TableLayoutPanel 中調整行和列的大小,方法是在窗體中選擇 tableLayoutPanel1,然後拖動其行和列邊框。

      技術分享圖片
      調整了 TableLayoutPanel 的大小的 Form1

使用 TableLayoutPanel 控件設置窗體布局