c#學習筆記之使用 TableLayoutPanel 控件設置窗體布局


 
使用 TableLayoutPanel 控件設置窗體布局
  1. 在 Visual Studio IDE 左側,找到“工具箱”選項卡。 選擇“工具箱”選項卡,隨即將顯示工具箱。(或者,在菜單欄上,依次選擇“視圖”、“工具箱”。)

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

    容器組
    “容器”組

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

    TableLayoutPanel 控件
    TableLayoutPanel 控件

    System_CAPS_ICON_note.jpg 說明

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

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

    “圖釘”圖標
    圖釘圖標

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

    顯示 TableLayoutPanel 控件的“屬性”窗口
    顯示 TableLayoutPanel 控件的“屬性”窗口

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

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

    選定“填充”的“屬性”窗口
    “Fill”處於選中狀態的“屬性”窗口

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

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

    System_CAPS_ICON_note.jpg 說明

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

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

    “三角形”按鈕
    三角形按鈕

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

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

    TableLayoutPanel 任務
    TableLayoutPanel 任務

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

    TableLayoutPanel 列和行樣式
    TableLayoutPanel 列和行樣式

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

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

    具有已調整大小的 TableLayoutPanel 的 Form1
    調整了 TableLayoutPanel 的大小的 Form1


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM