在windows窗体程序设计中，我们有时需要将多个控件放在窗体内的一个容器中以期望达到更好的UI效果和交互体验，这时我们使用微软为我们提供的panel 组件来实现这样的功能。panel组件共分为三大类：Panel，FlowLayoutPanel，TableLayoutPanel。
(本人也是刚接触使用C#进行windowns窗体程序的开发，对于很多控件和组件的名称和叫法不是很明白和熟悉，姑且就做面板组件板)
Panel
基本面板容器可以理解成类似安卓的绝对对局，当你设置一个控件的坐标属性时，这个控件就会在面板的相对位置显示。
Paste_Image.png
如上图所示，当点击 panel 按钮时，主窗体将会多显示出三个小的Button;下面是示例代码：
class PanelExample
{
public Panel panel = new Panel();
public PanelExample()
{
Button bt = new Button();
bt.Text = "Button";
bt.Location = new System.Drawing.Point(10,10);
Button bt_1 = new Button();
bt_1.Text = "Button1";
bt_1.Location = new System.Drawing.Point(bt.Size.Width + 20, 10);
Button bt_2 = new Button();
bt_2.Text = "Button2";
bt_2.Location = new System.Drawing.Point(bt_1.Location.X + bt_1.Size.Width + 20, 10);
panel.Controls.Add(bt);
panel.Controls.Add(bt_1);
panel.Controls.Add(bt_2);
}
}
先声明一个panelExample类，类中包含了成员变量 panel以及类的构造方法，在构造方法中，使用Controls.Add方法为panel 面板添加3个Button控件。在添加控件前，需要指定控件相对于父容器的位置，不然的话，控件默认添加到父容器的起始坐标位置上。
然后在窗体类中实现窗体按钮panel的点击事件的响应方法。
private void panelBt_Click(object sender, EventArgs e)
{
PanelExample pE = new PanelExample();
pE.panel.Size = new Size(panel1.Size.Width,panel1.Size.Height);
panel1.Controls.Clear();
panel1.Controls.Add(pE.panel);
}
此时当我们点击窗体上的窗体上的panel按钮时，窗体上的面板组件panel1就会以添加控件的方式将pE对象中的panel面板容器添加到自身。这样在PanelExample类的构造方法中添加给对象成员panel面板的组件的三个按钮也会显示在窗体上了。
FlowLayoutPanel
流面板容器，可以理解成类似安卓的线性布局，当每往里面添加一个控件时，则此控件将会在前一个控件的后面或者根据其他的排列方式，出现在前面或者上面或下面。
- 如从左到右排列
flowLayoutPanel.FlowDirection = FlowDirection.LeftToRight;
Paste_Image.png
- 从右到左排列
flowLayoutPanel.FlowDirection = FlowDirection.RightToLeft;
Paste_Image.png
- 另外分别还有从上到下，从下到上的垂直排列方式。
当一行或一列已经没有足够的空间放下一个控件时，那么这个控件将会自动添加到另一行或另一列的首位置上
如图：
-
从左到右水平排列
Paste_Image.png
-
从上到下垂直排列
Paste_Image.png
-
FlowLayoutPanelExample类的声明
class FlowLayoutPanelExample
{
public FlowLayoutPanel flowLayoutPanel = new FlowLayoutPanel();
public FlowLayoutPanelExample()
{
flowLayoutPanel.Padding = new Padding(20,20,20,20);
flowLayoutPanel.FlowDirection = FlowDirection.TopDown;
Button bt = new Button();
bt.Text = "Button";
// bt.Location = new System.Drawing.Point(10, 10);
Button bt_1 = new Button();
bt_1.Text = "Button1";
// bt_1.Location = new System.Drawing.Point(bt.Size.Width + 20, 10);
Button bt_2 = new Button();
bt_2.Text = "Button2";
bt_2.Location = new System.Drawing.Point(bt_1.Location.X + bt_1.Size.Width + 20, 100);
Control[] control = new Control[3];
control[0] = bt;
control[1] = bt_1;
control[2] = bt_2;
flowLayoutPanel.Controls.AddRange(control);
for (UInt16 i = 0; i < 20; i++)
{
Button button = new Button();
button.Text = "Button" + i;
flowLayoutPanel.Controls.Add(button);
}
}
从代码和实际显示效果看以看出，在流面板组件里指定控件的位置，是无效的。
TableLayoutPane
表格面板容器，可以指定行列来添加控件。
如图所示：
Paste_Image.png
表格面板容器的行列索引从零开始。可以设定所添加控件的所能跨的行列空间大小。例如在计算器应用中，有的按钮所占空间比较大，这时若使用表格面板容器进行摆放，就可以设置此控件的所跨行列控件大小。
例如：
Button bt_6 = new Button();
bt_6.Size = new System.Drawing.Size(bt.Size.Width*2,bt.Size.Height*2); bt_6.Text = "Button6";
tableLayoutPanel.Controls.Add(bt_6,0,3);
tableLayoutPanel.SetColumnSpan(bt_6,2);
Paste_Image.png
- TableLayoutPanelExample类的声明
class TableLayoutPanelExample
{
public TableLayoutPanel tableLayoutPanel = new TableLayoutPanel();
public TableLayoutPanelExample()
{
tableLayoutPanel.ColumnCount = 2;
tableLayoutPanel.RowCount = 3;
Button bt = new Button();
bt.Text = "Button";
bt.Location = new System.Drawing.Point(10, 10);
bt.Click += new EventHandler(Button_Click);
Button bt_1 = new Button();
bt_1.Text = "Button1";
bt_1.Click += new EventHandler(Button_Click);
bt_1.Location = new System.Drawing.Point(bt.Size.Width + 20, 10);
Button bt_2 = new Button();
bt_2.Text = "Button2";
bt_2.Click += new EventHandler(Button_Click);
bt_2.Location = new System.Drawing.Point(bt_1.Location.X + bt_1.Size.Width + 20, 10);
tableLayoutPanel.Controls.Add(bt,0,0);
tableLayoutPanel.Controls.Add(bt_1,1,0);
tableLayoutPanel.Controls.Add(bt_2, 0, 1);
Button bt_3 = new Button();
bt_3.Text = "Button3";
bt_3.Click += new EventHandler(Button_Click);
Button bt_4 = new Button();
bt_4.Text = "Button4";
bt_4.Click += new EventHandler(Button_Click);
Button bt_5 = new Button();
bt_5.Text = "Button5";
bt_5.Click += new EventHandler(Button_Click);
tableLayoutPanel.Controls.Add(bt_3, 1, 1);
tableLayoutPanel.Controls.Add(bt_4, 0, 2);
tableLayoutPanel.Controls.Add(bt_5, 1, 2);
Button bt_6 = new Button();
bt_6.Size = new System.Drawing.Size(bt.Size.Width*2,bt.Size.Height*2);
bt_6.Text = "Button6";
tableLayoutPanel.Controls.Add(bt_6,0,3);
tableLayoutPanel.SetColumnSpan(bt_6,2);
}
private void Button_Click(object sender, EventArgs e)
{
Button button = (Button)sender;
MessageBox.Show("点击的是表格面板中的第" + tableLayoutPanel.GetRow(button) + "行\r第"
+ tableLayoutPanel.GetColumn(button) + "列");
}
}
网友评论