基于.NET的Windows窗体编程之WinForms布局简介

通过前两篇文章的学习已经对基于.NET的Windows窗体编程有了初步认识可以独立的创建应用程序。然而在实际应用开发中软件能否吸引用户除了实现必需的功能以外UI布局设计也很重要如整体风格操作便捷性以及符合大部分人的使用习惯等合理的布局不仅可以有效利用空间还能提高软件使用效率。今天我们主要介绍WinForm编程中的布局容器相关控件仅供学习分享使用如有不足之处还请指正。布局容器概述在WinForms框架中容器控件都具有Controls属性它表示一个Control实例的集合通过此属性可以访问其包含的子控件。布局容器可以对控件进行明显的分组那为什么要对控件进行分组呢它主要有以下三个好处为了实现清晰的用户界面对相关表单元素进行视觉分组。为了创建程序化分组例如对单选按钮。用于在设计时将控件作为一个单元移动。根据功能类型以及布局方式进行划分布局容器控件主要有以下几种Panel用于分组和布局其他控件支持滚动条。GroupBox带标题的容器用于逻辑分组。SplitContainer可调整大小的分隔窗格用于分栏布局。TabControl多标签页容器切换不同内容区域。FlowLayoutPanel流式布局容器自动排列子控件。TableLayoutPanel表格布局容器支持行和列的定义。接下来将分别介绍各个容器控件以及它们之间的异同之处。GroupBoxGroupBox是一个带标题的分组控件此控件用于为其他控件提供明显的分组通常可以使用GroupBox按功能细分窗体。GroupBox关键属性Text用于设置GroupBox的标题。Name用于设置控件的唯一标识名称它在当前窗体中唯一标识控件的能力。Enable用于设置容器控件是否启用如果设置为否则其子控件也会被置为不可用。Visible用于设置控件是否显示在Form窗体中。在Form窗体中添加GroupBox和其他控件一样可以从工具箱拖动一个GroupBox到Form窗体中GoupBox作为容器控件和其他普通单一功能控件一样具备SizeLocation等属性可以用于设置大小GoupBox的起始位置等信息。在本示例中同一个Form窗体中创建两个GroupBox分别表示学生信息班级信息可以清晰的从视觉上进行区分如下图所示在上述示例中学生信息GroupBox中的性别用RadioButton进行表示同时班级信息GroupBox中的放假也用RadionButton进行表示可以看出同一个GroupBox中的RadioButton是互斥的如男/女是/否只能有一个被选中而分别处在两个GroupBox中的RadioButton则相互独立互不干扰如性别的选择不会影响到放假的选择这就是容器的另一个作用程序化分组。如果GroupBox的Enable属性设置为False则控件及其子控件均不可用如下所示注意GroupBox本身不包含滚动条如果子控件的位置超过了GroupBox容器的大小则会自动裁切。PanelPanel是一个不带标题的面板此控件和GroupBox功能类似主要用于为其他控件提供明显的分组。Panel控件的关键属性AutoScroll属性是否自动显示滚动条。若要显示滚动条请将 AutoScroll 属性设置为trueBackColor背景色设置所包含的控件的背景色如标签和单选按钮。BackgroundImage背景图像如果设置了该 BackgroundImage 属性图像将显示在包含的控件后面。BorderStyle边框样式它是一个枚举类型主要有三个值没有可见边框None、纯线FixedSingle或阴影线Fixed3D。在Visual Studio中进行窗体设计时Panel控件会有一个虚线边框用于标识Panel控件的有效范围如下所示当实际运行起来时是不带边框的如下所示如果需要设置Panel容器的边框可以设置BorderStyle属性默认为None表示无边框设置为纯线FixedSingle效果如下所示如果Panel中子控件的位置大于Panel控件的大小默认是会自动裁切不显示滚动条如果需要显示滚动条则需要设置AutoScroll属性为true如下所示Panel控件设置背景色同时会将背景色应用到其所包含的子控件中如LabelRadioButtonCheckBox等如下所示如果不想子控件和Panel容器控件背景色保持一致则需要单独设置子个控件的背景色如下所示注意默认添加的Panel控件是不自动填充到Form窗体中的如过需要自动填充窗体则需要设置Panel的Dock属性为Fill。SplitContainerSplitContainer控件可以被视为一个组合控件它由一个可移动条分隔成两个面板。 当鼠标指针位于条上时指针的形状会改变以指示该条是可移动的。此控件可以创建复杂的用户界面如上下布局左右布局等常见形式SplitContainer关键属性如下所示Orientation属性决定了拆分器的方向当此属性设置为 Vertical时拆分器从上到下运行创建左右面板。FixPanel属性确定在调整 SplitContainer控件大小后哪个面板将保持固定大小。IsSplitterFixed 属性确定拆分器是否可由键盘或鼠标移动。SplitterDistance 属性确定从左边缘或上边缘到可移动拆分条之间的距离以像素为单位。SplitterIncrement 属性确定拆分器可由用户移动的最小距离以像素为单位。SplitterWidth 属性确定拆分器宽(厚)度以像素为单位。SplitterMoving 事件拆分器移动时发生。SplitterMoved 事件拆分器移动时发生。在Form窗体中默认添加的SplitContainer控件会自动填充到当前Form窗体中所以默认Dock属性为Fill。SplitContainer容器的默认Orientation属性为Vertical创建左右布局如下所示如果需要创建上下布局则可以设置Orientation属性为Horizantal。如下所示容器控件之间可以进行嵌套以实现复杂的布局如通过两个SplitContainer进行组合便可以创建经典的上下左右布局如下所示SpitContainer因其便利性在众多布局容器中应用非常广泛。TabControlTabControl控件用于显示多个选项卡就像笔记本中的分隔线或档案柜中一组文件夹的标签。 每个选项卡可以包含图片和其他控件。TabControl的关键属性TabPages属性是TabControl包含的子选项卡集合每个单独的子选项卡都是一个 TabPage 对象。当单击选项卡时它会为该Click对象引发TabPage事件。SelectedIndexChanged 的事件当用户从一个选项卡切换到下一个选项卡时引发的事件。在工具箱中拖动TabControl控件到Form窗体中便可以创建TabControl实例。默认创建的TabControl并不会填充到Form窗体如果需要填充整个窗体可以设置Dock属性为Fill。在Visual Studio设计器中可以点击TabControl右侧的箭头添加和删除选项卡如下所示除了上述方式在选择TabControl实例后通过属性窗口的TabPages集合编辑器窗口进行添加或删除选项卡以及修改选项卡的属性等如下所示通过TabPages选项卡编辑器可以实现如下功能添加删除选项卡。设置选项卡的属性如Text属性对应TabControl控件中选项卡的标题调整选项卡的顺序。当在TabControl的选项卡之间进行切换时会触发SelectedIndexChanged事件可以在此事件中处理需要的业务逻辑如下所示如提示当前点击的选项卡的索引号如下所示namespace Okcoder.WinForm.Demo { public partial class FrmTabControl : Form { public FrmTabControl() { InitializeComponent(); } private void tabMain_SelectedIndexChanged(object sender, EventArgs e) { string msg $当前选择的是第{this.tabMain.SelectedIndex1}个选项卡; MessageBox.Show(msg); } } }示例效果如下所示FlowLayoutPanelFlowLayoutPanel控件按水平或垂直流方向排列其内容。 它的内容可以从一行换到下一行或从一列换到下一列。 或者可以剪切其内容而不是进行换行。FlowLayoutPanel关键属性FlowDirection 属性的值来指定流方向此属性为枚举类型共有4个选项LeftToRight(从左到右)TopDown(从上到下)RightToLeft(从右到左)BottomUp(自底往上)默认为LeftToRight。WrapContents 该值指示控件是 FlowLayoutPanel 应换行其内容还是允许剪裁内容true表示换行false表示裁切。FlowBreak属性FlowLayoutPanel的子控件因放置在FlowLayoutPanel容器中而具有的附加属性用来设置是否终止当前流式布局并从下一个控件新开启一行。FlowLayoutPanel采用流式布局方式在一些特定场景下非常实用FlowLayoutPanel的FlowDirection属性默认为LeftToRight(左右)可以手动修改设置为TopToDown(上下)两种效果如下所示如果WrapContents属性设置为false则会裁切多余的内容如下所示在Visual Studio设计器中FlowLayoutPanel会显示虚线边框但是在运行起来后默认并不显示边框。如果要显示边框可以设置BorderStyle属性具体可参考Panel设置边框。FlowLayoutPanel容器中的子控件会默认具有FlowBreak属性默认为false如果设置为true则从当前控件中断流式布局并从下一个控件新开启一行或列如将第5个按钮的FlowBreak属性设置为true效果如下所示TableLayoutPanelTableLayoutPanel 控件在网格中排列其内容。下面几个场景比较适合采用TableLayoutPanel进行布局表单中有多个部分按比例调整大小的布局。将在运行时动态修改或生成的布局例如基于首选项添加或减去用户可自定义字段的数据输入表单。应保持整体固定大小的布局。 例如你可能有一个对话框应保持小于 800 x 600但需要支持本地化字符串。TableLayoutPanel的关键属性如下所示RowCount获取或设置表中允许的最大行数。ColumnCount获取或设置表中允许的最大列数。首先在工具箱中拖入TableLayoutPanel到Form窗体中默认TableLayoutPanel是两行两列可以通过控件右边的黑色实心三角进行快捷添加和删除。在弹出的菜单中点击“编辑行和列...”可以打开“行和列样式”对话框可以设置行列的宽度和高度宽度高度设置可以有两种形式如下所示Percent设置当前行/列占整个表格的百分比。Absolute绝对值设置行/列的宽高像素值。自动调整大小根据内容自动调整大小类似于自适应。具体设置方式如下图所示默认情况下TableLayoutPanel在Visual Studio设计器中显示虚线边框实际运行起来并不显示如果需要显示边框可以设置CellBorderStyle属性它是一个枚举值主要有以下值None默认没有边框Single单一实线边框Inset单一实线下沉边框InsetDouble双实线下沉边框Outset单一实线凸起边框OutsetDouble双实线凸起边框OutsetPartial一条带有凸起部分的单线边框具体边框的不同值之间的效果可以自行验证设置为Single的效果如下所示通过拖动控件到TableLayoutPanel容器的指定单元格中即可向容器中添加控件添加到TableLayoutPanel容器中的控件自动具有以上几个附加属性Row表示当前控件位于TableLayoutPanel的第几行。Column表示当前控件位于TableLayoutPanel的第几列。RowSpan表示当前控件在TableLayoutPanel中占几行如果子控件太大一行不够可以修改RowSpan属性合并行。ColumnSpan表示当前控件在TableLayoutPanel中占几列如果子控件太大一列不够可以修改ColumnSpan属性合并列。三个按钮分别位于(0,0)(1,1)(2,2)位置效果如下图所示以上就是《基于.NET的Windows窗体编程之WinForms布局简介》的全部内容旨在抛砖引玉一起学习共同进步。