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

相关文章
相关标签/搜索