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

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

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

    容器組
    「容器」組工具

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

    TableLayoutPanel 控件
    TableLayoutPanel 控件學習

    System_CAPS_ICON_note.jpg 說明

    添加 TableLayoutPanel 以後,若是窗體中出現標題爲「TableLayoutPanel 任務」的窗口,請選擇窗體內的任何位置以關閉此窗口。 在本教程後面部分,您將學習到有關此窗口的更多內容。spa

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

    「圖釘」圖標
    圖釘圖標3d

  4. 經過選擇「TableLayoutPanel」來確保選定它。 能夠經過查看「屬性」窗口頂部的下拉列表來驗證選定哪一個控件,以下圖中所示。code

    顯示 TableLayoutPanel 控件的「屬性」窗口
    顯示 TableLayoutPanel 控件的「屬性」窗口orm

  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

相關文章
相關標籤/搜索