图形界面编程（五） 布局容器类（2）

点击打开链接

3 布局中的空白区域

在.net Framework中，每个控件和其所处的容器以及容器内控件之间，都存在一个可以调整的空白区域，这个空白区域纯粹是为了布局的美观性而存在的。

容器和容器内控件之间的空白称为容器的Padding属性，容器内控件之间的空白称为控件的Margin属性。看一下示意图：

 
图1 Padding和Margin示意图

很容易理解，蓝色箭头表示的四个空白位置为窗体容器的Padding属性；黄色箭头表示的四个空白位置为按钮控件的Margin属性。

注意：一个控件离其所在容器四周的距离，是容器的Padding属性和该控件的Margin属性之和。例如图中的按钮0，它和Form容器的左边的距离就是Form容器的Padding属性和按钮0的Margin属性之和。

Padding属性和Margin属性的值都是一个Padding类的对象，Padding类为值类型对象，具有四个整型类型属性：Left，Top，Right，Bottom，分别表左上右下四个方向的空白大小。Padding类还有一个特殊的整型类型属性：All，当Left，Top，Right，Bottom属性值相同时，All属性是Left，Top，Right，Bottom其中一个的值，否则All属性值为-1。即当Padding对象的All属性为-1时，表示其Left，Top，Right，Bottom属性值不同，当All属性值为正整数时，表示Left，Top，Right，Bottom值相同，等于All的值。

可以猜想，Padding类大致如下：

Padding.cs

[c-sharp] view plain copy

1. public struct Padding {  
2.    
3.     // 字段  
4.     private bool all;  
5.     private int top;  
6.     private int left;  
7.     private int right;  
8.     private int bottom;  
9.    
10.     // 静态只读字段, 表示一个四周为0的Padding对象  
11.     public static readonly Padding Empty = new Padding(0);  
12.    
13.     /// <summary>  
14.     /// 构造器, 通过设置All属性, 设置上下左右四个属性值  
15.     /// </summary>  
16.     public Padding(int all) {  
17.         // 设置all标志为true  
18.         this.all = true;  
19.         // 设置上下左右四个字段, 值相同  
20.         this.top = this.left = this.right = this.bottom = all;  
21.     }  
22.    
23.     /// <summary>  
24.     /// 设置上下左右四个属性值  
25.     /// </summary>  
26.     public Padding(int left, int top, int right, int bottom) {  
27.         // 设置上下左右四个属性值  
28.         this.top = top;  
29.         this.left = left;  
30.         this.right = right;  
31.         this.bottom = bottom;  
32.    
33.         // 根据上下左右四个属性值是否相同设置all标志  
34.         this.all = (this.top == this.left) &&  
35.             (this.left == this.right) &&  
36.             (this.right == this.bottom) &&  
37.             (this.bottom == this.top);  
38.     }  
39.    
40.     /// <summary>  
41.     /// All属性, 如果上下左右属性值相同, 则返回其中一个值, 否则返回-1  
42.     /// </summary>  
43.     public int All {  
44.         get {  
45.             // 根据all标志是否为true, 决定返回上下左右任意值或-1  
46.             return this.all ? this.top : -1;  
47.         }  
48.         set {  
49.             // 设置all标志为true  
50.             this.all = true;  
51.             // 设置上下左右四个字段, 值相同  
52.    
53.         this.top = this.left = this.right = this.bottom = value;  
54.         }  
55.     }  
56.    
57.     /// <summary>  
58.     /// 设置或获取底部空白  
59.     /// </summary>  
60.     public int Bottom {  
61.         get {  
62.             return this.bottom;  
63.         }  
64.         set {  
65.             this.bottom = value;  
66.             // 根据上下左右四个属性值是否相同设置all标志  
67.             this.all = (this.top == this.left) &&  
68.                 (this.left == this.right) &&  
69.                 (this.right == this.bottom) &&  
70.                 (this.bottom == this.top);  
71.         }  
72.     }  
73.    
74.     /// <summary>  
75.     /// 设置或获取左边空白  
76.     /// </summary>  
77.     public int Left {  
78.         get {  
79.             return this.left;  
80.         }  
81.         set {  
82.             this.left = value;  
83.             this.all = (this.top == this.left) &&  
84.                 (this.left == this.right) &&  
85.                 (this.right == this.bottom) &&  
86.                 (this.bottom == this.top);  
87.         }  
88.     }  
89.    
90.     /// <summary>  
91.     /// 设置或获取右边空白  
92.     /// </summary>  
93.     public int Right {  
94.         get {  
95.             return this.right;  
96.         }  
97.         set {  
98.             this.right = value;  
99.             this.all = (this.top == this.left) &&  
100.                 (this.left == this.right) &&  
101.                  (this.right == this.bottom) &&  
102.                  (this.bottom == this.top);  
103.         }  
104.     }  
105.    
106.     /// <summary>  
107.    
108. /// 设置或获取顶部空白  
109.     /// </summary>  
110.     public int Top {  
111.         get {  
112.             return this.top;  
113.         }  
114.         set {  
115.             this.top = value;  
116.             this.all = (this.top == this.left) &&  
117.                 (this.left == this.right) &&  
118.                 (this.right == this.bottom) &&  
119.                 (this.bottom == this.top);  
120.         }  
121.     }  
122.    
123.     /// <summary>  
124.     /// 获取水平空白总和  
125.     /// </summary>  
126.     public int Horizontal {  
127.         get {  
128.             return this.right + this.left;  
129.         }  
130.     }  
131.    
132.     /// <summary>  
133.     /// 获取垂直空白总和  
134.     /// </summary>  
135.     public int Vertical {  
136.         get {  
137.             return this.top + this.bottom;  
138.         }  
139.     }  
140.    
141.     /// <summary>  
142.     /// 获取以空白值为属性的Size类型对象  
143.     /// </summary>  
144.     public Size Size {  
145.         get {  
146.             return new Size(this.Horizontal, this.Vertical);  
147.         }  
148.     }  
149.    
150.     /// <summary>  
151.     /// 静态方法, 获取两个Padding对象的和  
152.     /// (即将两个对象的上下左右属性各自相加后得到的Padding对象)  
153.     /// </summary>  
154.     public static Padding Add(Padding p1, Padding p2) {  
155.         // 调用重载的+运算符  
156.         return (p1 + p2);  
157.     }  
158.    
159.     /// <summary>  
160.     /// 静态方法, 获取两个Padding对象的差  
161.     /// (即将两个对象的上下左右属性各自想减后得到的Padding对象)  
162.     /// </summary>  
163.     public static Padding Subtract(Padding p1, Padding p2) {  
164.    
165.     // 调用重载的-运算符  
166.         return (p1 - p2);  
167.     }  
168.    
169.     /// <summary>  
170.     /// 覆盖对象的比较方法  
171.     /// </summary>  
172.     public override bool Equals(object other) {  
173.         // 判断对象的类型后调用对象重载的==运算符  
174.         return ((other is Padding) && (((Padding)other) == this));  
175.     }  
176.    
177.     /// <summary>  
178.     /// 重载+运算符, 表示两个Padding类型对象相加  
179.     /// </summary>  
180.     public static Padding operator +(Padding p1, Padding p2) {  
181.         // 将两个对象的上下左右属性各自相加后得到的新的Padding对象  
182.         return new Padding(p1.Left + p2.Left,  
183.             p1.Top + p2.Top,  
184.             p1.Right + p2.Right,  
185.             p1.Bottom + p2.Bottom);  
186.     }  
187.    
188.     /// <summary>  
189.     /// 重载-运算符, 表示两个Padding类型对象相减  
190.     /// </summary>  
191.     public static Padding operator -(Padding p1, Padding p2) {  
192.         // 将两个对象的上下左右属性各自相减后得到的新的Padding对象  
193.         return new Padding(p1.Left - p2.Left,  
194.             p1.Top - p2.Top,  
195.             p1.Right - p2.Right,  
196.             p1.Bottom - p2.Bottom);  
197.     }  
198.    
199.     /// <summary>  
200.     /// 重载==运算符  
201.     /// </summary>  
202.     public static bool operator ==(Padding p1, Padding p2) {  
203.         if (p1.all && p2.all) { // 如果p1和p2的all字段都为true, 则比较它们的Top属性  
204.             return p1.Top == p2.Top;  
205.         } else { // 否则将它们对应属性一一比较  
206.             return (p1.Left == p2.Left) &&  
207.                 (p1.Top == p2.Top) &&  
208.    
209.             (p1.Right == p2.Right) &&  
210.                 (p1.Bottom == p2.Bottom);  
211.         }  
212.     }  
213.    
214.     /// <summary>  
215.     /// 重载!=运算符  
216.     /// </summary>  
217.     public static bool operator !=(Padding p1, Padding p2) {  
218.         return !(p1 == p2);  
219.     }  
220.    
221.     /// <summary>  
222.     /// 覆盖GetHashCode方法(因为覆盖了Equals方法)  
223.     /// </summary>  
224.     public override int GetHashCode() {  
225.         return this.left ^ this.Right ^ this.Top ^ this.Bottom;  
226.     }  
227.    
228.     /// <summary>  
229.     /// 覆盖ToString方法, 返回字符串表示  
230.     /// </summary>  
231.     public override string ToString() {  
232.         return string.Format("{ Left={0}, Top={1}, Right={2}, Bottom={3} }",  
233.             this.Left, this.Top, this.Right, this.Bottom);  
234.     }  
235. }  

通过Padding类的源码（猜想，非官方源码），可以了解Padding五个属性的工作方式，顺便复习一下值类型构造、比较、Empty字段以及运算符重载的知识。

4 流式布局

我们已经了解，控件都具备Dock方位布局能力，可以按照“上下左右中”五个方位将自身锚定在容器上进行布局。但我们也看到，如果要让容器内的控件进行其它形式的布局（例如上一节中控件成行列布局），则一般需要在容器的Resize事件处理方法内，为容器内的所有控件使用算法进行布局。其复杂度和代码量都不好控制。

除非有特殊需要，一般情况下我们尽量不要自己书写大段的控件布局代码，这些代码很不经济。.net Framework提供了若干个专门用来负责布局控件的容器，使用起来非常方便。

FlowLayoutPanel称为流式布局面板容器，它的作用是将容器内控件按照从左到右（或从右到左）以及从上到下（或从下到上）的顺序排列布局。几点重要属性：

• FlowDirection属性：FlowDirection枚举类型。表示容器内控件布局方向。分别为：LeftToRight（从左到右），TopDown（从上到下），RightToLeft（从右到左），BottomUp（从下到上）四个枚举项。
• WrapContents属性：bool类型。表示是否为容器内控件布局自动换行。对于属性值为true，当控件超出容器范围，则将控件自动排列到下一行；对于false，则忽略超出部分的显示。
• AutoScroll属性：bool类型。表示当WrapContents属性为false时，当控件超出容器范围时，容器是否显示一个滚动条。

好了，该容器使用起来很简单，我们通过实例来说明：

界面显示效果图如下：

图2 程序界面显示效果图

代码如下：

Program.cs

[c-sharp] view plain copy

1. using System;  
2. using System.Drawing;  
3. using System.Windows.Forms;  
4.    
5. namespace Edu.Study.Graphics.FlowLayout {  
6.     /// <summary>  
7.     /// 窗体类  
8.     /// </summary>  
9.     class MyForm : Form {  
10.    
11.         /************ 流式布局面板 ************/  
12.         // 顶部流式布局面板  
13.         private FlowLayoutPanel topPane;  
14.         // 底部流式布局面板  
15.         private FlowLayoutPanel bottomPane;  
16.    
17.         /************ 文字标签 ************/  
18.         // 布局方向标签  
19.         private Label flowDirectionComboBoxLabel;  
20.         // 容器Padding尺寸标签  
21.         private Label panddingTrackBarLabel;  
22.         // 控件Margin尺寸标签  
23.         private Label marginTrackBarLabel;  
24.    
25.         /************ 组合下拉列表框 ************/  
26.         // 选择流式布局方向的下拉列表框  
27.         private ComboBox flowDirectionComboBox;  
28.    
29.         /************ 复选框 ************/  
30.         // 布局容器是否自动换行复选框  
31.         private CheckBox wrapCheckBox;  
32.         // 容器是否自动换行复选框  
33.         private CheckBox autoScrollCheckBox;  
34.    
35.         /************ 数字调节块 ************/  
36.         // 设置容器Padding属性的调节块  
37.         private TrackBar panddingTrackBar;  
38.         // 设置容器内控件Margin属性的调节块  
39.         private TrackBar marginTrackBar;  
40.    
41.         /************ 文本框 ************/  
42.         // 显示容器Padding属性值的调节块  
43.         private TextBox pandingTrackBarValueTextBox;  
44.         // 显示容器内控件Margin属性值的调节块  
45.         private TextBox marginTrackBarValueTextBox;  
46.    
47.         /************ 按钮 ************/  
48.         // bottomPane内放置的按钮控件, 是一个Button类数组  
49.         private Button[] buttons;  
50.    
51.         /// <summary>  
52.         /// 构造器, 初始化所有控件  
53.         /// </summary>  
54.         public MyForm() {  
55.    
56.             /************ topPane控件初始化 ************/  
57.             this.topPane = new FlowLayoutPanel();  
58.             // 设置topPane容器停靠在窗体顶部  
59.             this.topPane.Dock = DockStyle.Top;  
60.             // 设置topPane容器布局方向: 从左到右  
61.             this.topPane.FlowDirection = FlowDirection.LeftToRight;  
62.             // 设置topPane容器的Padding属性  
63.             this.topPane.Padding = new Padding(30);  
64.             // 设置topPane容器的边框属性, 呈现3D效果  
65.             this.topPane.BorderStyle = BorderStyle.Fixed3D;  
66.             // 设置topPane容器不自动换行  
67.             this.topPane.WrapContents = false;  
68.             // 设置topPane容器具有自动滚动条  
69.             this.topPane.AutoScroll = true;  
70.    
71.             /************ flowDirectionComboBoxLabel控件初始化 ************/  
72.             this.flowDirectionComboBoxLabel = new Label();  
73.             // 设置flowDirectionComboBoxLabel控件Margin属性  
74.             this.flowDirectionComboBoxLabel.Margin = new Padding(2, 6, 0, 3);  
75.             // 设置flowDirectionComboBoxLabel控件呈现文本  
76.             this.flowDirectionComboBoxLabel.Text = "布局方向：";  
77.             // 设置flowDirectionComboBoxLabel控件自动调整尺寸  
78.             this.flowDirectionComboBoxLabel.AutoSize = true;  
79.             // 将flowDirectionComboBoxLabel控件增加在topPane容器内  
80.             this.topPane.Controls.Add(this.flowDirectionComboBoxLabel);  
81.    
82.             /************ flowDirectionComboBox控件初始化 ************/  
83.             this.flowDirectionComboBox = new ComboBox();  
84.             // 设置flowDirectionComboBox控件Margin属性  
85.             this.flowDirectionComboBox.Margin = new Padding(0, 3, 0, 3);  
86.             // 设置flowDirectionComboBox控件下拉列表内容  
87.             this.flowDirectionComboBox.Items.AddRange(new object[] {  
88.                 FlowDirection.LeftToRight,  
89.                 FlowDirection.RightToLeft,  
90.                 FlowDirection.TopDown,  
91.                 FlowDirection.BottomUp  
92.             });  
93.             // 设置flowDirectionComboBox控件下拉默认选中项  
94.             this.flowDirectionComboBox.SelectedIndex = 0;  
95.             // 设置flowDirectionComboBox控件选择项改变后通知事件  
96.             this.flowDirectionComboBox.SelectedIndexChanged +=  
97.                 new EventHandler(FlowDirectionComboBoxSelectedValueChanged);  
98.             // 将flowDirectionComboBox控件增加在topPane容器内  
99.             this.topPane.Controls.Add(this.flowDirectionComboBox);  
100.    
101.             /************ wrapCheckBox控件初始化 ************/  
102.             this.wrapCheckBox = new CheckBox();  
103.             // 设置wrapCheckBox控件Margin属性  
104.             this.wrapCheckBox.Margin = new Padding(20, 5, 0, 5);  
105.             // 设置wrapCheckBox控件自动调整尺寸  
106.             this.wrapCheckBox.AutoSize = true;  
107.             // 设置wrapCheckBox控件呈现文本  
108.             this.wrapCheckBox.Text = "是否自动换行";  
109.             // 设置wrapCheckBox控件选中状态改变通知事件  
110.             this.wrapCheckBox.CheckedChanged += new EventHandler(WarpCheckBoxCheckedChanged);  
111.             // 将wrapCheckBox控件增加在topPane容器内  
112.             this.topPane.Controls.Add(this.wrapCheckBox);  
113.    
114.             /************ autoScrollCheckBox控件初始化 ************/  
115.             this.autoScrollCheckBox = new CheckBox();  
116.             // 设置autoScrollCheckBox控件Margin属性  
117.             this.autoScrollCheckBox.Margin = new Padding(20, 5, 0, 5);  
118.             // 设置autoScrollCheckBox控件自动调整尺寸  
119.             this.autoScrollCheckBox.AutoSize = true;  
120.             // 设置autoScrollCheckBox控件呈现文本  
121.             this.autoScrollCheckBox.Text = "是否使用滚动条";  
122.             // 设置autoScrollCheckBox控件选中状态改变通知事件  
123.             this.autoScrollCheckBox.CheckedChanged += new EventHandler(AutoScrollCheckBoxChanged);  
124.             // 将autoScrollCheckBox控件增加在topPane容器内  
125.             this.topPane.Controls.Add(this.autoScrollCheckBox);  
126.    
127.             /************ panddingTrackBarLabel控件初始化 ************/  
128.             this.panddingTrackBarLabel = new Label();  
129.             // 设置panddingTrackBarLabel控件自动调整尺寸  
130.             this.panddingTrackBarLabel.AutoSize = true;  
131.             // 设置panddingTrackBarLabel控件Margin属性  
132.             this.panddingTrackBarLabel.Margin = new Padding(20, 5, 0, 5);  
133.             // 设置panddingTrackBarLabel控件呈现文本  
134.             this.panddingTrackBarLabel.Text = "更改容器的 Padding：";  
135.             // 将panddingTrackBarLabel控件增加在topPane容器内  
136.             this.topPane.Controls.Add(this.panddingTrackBarLabel);  
137.    
138.             /************ panddingTrackBar控件初始化 ************/  
139.             this.panddingTrackBar = new TrackBar();  
140.             // 设置panddingTrackBar控件Margin属性  
141.             this.panddingTrackBar.Margin = new Padding(0, 3, 3, 3);  
142.             // 设置panddingTrackBar控件宽度属性  
143.             this.panddingTrackBar.Width = 120;  
144.             // 设置panddingTrackBar控件数值最小值  
145.             this.panddingTrackBar.Minimum = 0;  
146.             // 设置panddingTrackBar控件数值最大值  
147.             this.panddingTrackBar.Maximum = 100;  
148.             // 设置panddingTrackBar控件单位数值  
149.             this.panddingTrackBar.TickFrequency = 1;  
150.             // 设置panddingTrackBar控件数值改变时通知事件  
151.             this.panddingTrackBar.ValueChanged += new EventHandler(PandingTrackBarValueChanged);  
152.             // 将panddingTrackBar控件增加在topPane容器内  
153.             this.topPane.Controls.Add(this.panddingTrackBar);  
154.    
155.             /************ pandingTrackBarValueTextBox控件初始化 ************/  
156.             this.pandingTrackBarValueTextBox = new TextBox();  
157.             // 设置pandingTrackBarValueTextBox控件Margin属性  
158.             this.pandingTrackBarValueTextBox.Margin = new Padding(0, 3, 3, 3);  
159.             // 设置pandingTrackBarValueTextBox控件只读  
160.             this.pandingTrackBarValueTextBox.ReadOnly = true;  
161.             // 设置pandingTrackBarValueTextBox控件宽度属性  
162.             this.pandingTrackBarValueTextBox.Width = 80;  
163.             // 设置pandingTrackBarValueTextBox控件背景色属性  
164.             this.pandingTrackBarValueTextBox.BackColor = SystemColors.Window;  
165.             // 将pandingTrackBarValueTextBox控件增加在topPane容器内  
166.             this.topPane.Controls.Add(this.pandingTrackBarValueTextBox);  
167.    
168.             /************ marginTrackBarLabel控件初始化 ************/  
169.             this.marginTrackBarLabel = new Label();  
170.             // 设置marginTrackBarLabel控件自动调整尺寸  
171.             this.marginTrackBarLabel.AutoSize = true;  
172.             // 设置marginTrackBarLabel控件Margin属性  
173.             this.marginTrackBarLabel.Margin = new Padding(20, 5, 0, 5);  
174.             // 设置marginTrackBarLabel控件呈现文本  
175.             this.marginTrackBarLabel.Text = "更改容器内控件的 Margin：";  
176.             // 将marginTrackBarLabel控件增加在topPane容器内  
177.             this.topPane.Controls.Add(this.marginTrackBarLabel);  
178.    
179.             /************ marginTrackBar控件初始化 ************/  
180.             this.marginTrackBar = new TrackBar();  
181.             // 设置marginTrackBar控件Margin属性  
182.             this.marginTrackBar.Margin = new Padding(0, 3, 3, 3);  
183.             // 设置marginTrackBar控件宽度属性  
184.             this.marginTrackBar.Width = 120;  
185.             // 设置marginTrackBar控件数值最小值  
186.             this.marginTrackBar.Minimum = 0;  
187.             // 设置marginTrackBar控件数值最大值  
188.             this.marginTrackBar.Maximum = 100;  
189.             // 设置marginTrackBar控件单位数值  
190.             this.marginTrackBar.TickFrequency = 1;  
191.             // 设置marginTrackBar控件数值改变时通知事件  
192.             this.marginTrackBar.ValueChanged += new EventHandler(MarginTrackBarValueChanged);  
193.             // 将marginTrackBar控件增加在topPane容器内  
194.             this.topPane.Controls.Add(this.marginTrackBar);  
195.    
196.             /************ marginTrackBarValueTextBox控件初始化 ************/  
197.             this.marginTrackBarValueTextBox = new TextBox();  
198.             // 设置marginTrackBarValueTextBox控件Margin属性  
199.             this.marginTrackBarValueTextBox.Margin = new Padding(0, 3, 3, 3);  
200.             // 设置marginTrackBarValueTextBox控件只读  
201.             this.marginTrackBarValueTextBox.ReadOnly = true;  
202.             // 设置marginTrackBarValueTextBox控件宽度属性  
203.             this.marginTrackBarValueTextBox.Width = 80;  
204.             // 设置marginTrackBarValueTextBox控件背景色属性  
205.             this.marginTrackBarValueTextBox.BackColor = SystemColors.Window;  
206.             // 将marginTrackBarValueTextBox控件增加在topPane容器内  
207.             this.topPane.Controls.Add(this.marginTrackBarValueTextBox);  
208.    
209.             // 将topPane容器增加到窗体上  
210.             this.Controls.Add(this.topPane);  
211.    
212.             /************ bottomPane容器初始化 ************/  
213.             this.bottomPane = new FlowLayoutPanel();  
214.             // 设置bottomPane容器停靠在窗体底部  
215.             this.bottomPane.Dock = DockStyle.Bottom;  
216.             // 设置bottomPane容器布局方向: 从左到右  
217.             this.bottomPane.FlowDirection = FlowDirection.LeftToRight;  
218.             // 设置bottomPane容器的Padding属性  
219.             this.bottomPane.Padding = new Padding(30);  
220.             // 设置bottomPane容器的边框属性, 呈现3D效果  
221.             this.bottomPane.BorderStyle = BorderStyle.Fixed3D;  
222.    
223.             /************ wrapCheckBox控件初始化 ************/  
224.             // 初始化200个Button对象的数组  
225.             this.buttons = new Button[200];  
226.             // 初始化数组中的每一项  
227.             for (int i = 0; i < this.buttons.Length; i++) {  
228.                 Button btn = new Button();  
229.                 // 设置按钮呈现文字  
230.                 btn.Text = i.ToString();  
231.                 // 设置按钮的尺寸  
232.                 btn.Size = new Size(100, 80);  
233.                 buttons[i] = btn;  
234.             }  
235.             // 将所有的按钮增加到bottomPane容器上  
236.             this.bottomPane.Controls.AddRange(buttons);  
237.    
238.             // 将bottomPane容器增加到窗体上  
239.             this.Controls.Add(this.bottomPane);  
240.    
241.             // 设置窗体最大化  
242.             this.WindowState = FormWindowState.Maximized;  
243.             // 设置窗体最小尺寸  
244.             this.MinimumSize = new Size(800, 600);  
245.         }  
246.    
247.         /// <summary>  
248.         /// 覆盖窗体OnLoad方法, 处理窗体第一次加载通知消息  
249.         /// </summary>  
250.         protected override void OnLoad(EventArgs e) {  
251.             base.OnLoad(e);  
252.    
253.             // 设置wrapCheckBox复选框Checked属性和bottomPane容器WrapContents属性值一致  
254.             this.wrapCheckBox.Checked = this.bottomPane.WrapContents;  
255.             // 设置autoScrollCheckBox复选框Checked属性和bottomPane容器AutoScroll属性值一致  
256.             this.autoScrollCheckBox.Checked = this.bottomPane.AutoScroll;  
257.             // 设置pandingTrackBarValueTextBox文本框文本为bottomPane容器Padding属性值  
258.             this.pandingTrackBarValueTextBox.Text = this.bottomPane.Padding.All.ToString();  
259.             // 设置marginTrackBarValueTextBox文本框文本为按钮控件Margin属性值  
260.             this.marginTrackBarValueTextBox.Text = this.buttons[0].Margin.All.ToString();  
261.    
262.             // 设置panddingTrackBar控件当前数值为bottomPane容器Padding属性值  
263.             this.panddingTrackBar.Value = this.bottomPane.Padding.All;  
264.             // 设置marginTrackBar控件当前数值为按钮控件Margin属性值  
265.             this.marginTrackBar.Value = this.buttons[0].Margin.All;  
266.         }  
267.    
268.         /// <summary>  
269.         /// 处理flowDirectionComboBox下拉列表控件选项改变事件  
270.         /// </summary>  
271.         private void FlowDirectionComboBoxSelectedValueChanged(object sender, EventArgs e) {  
272.             // 设置bottomPane容器布局方向与flowDirectionComboBox下拉列表选项一致  
273.             this.bottomPane.FlowDirection = (FlowDirection)this.flowDirectionComboBox.SelectedItem;  
274.         }  
275.    
276.         /// <summary>  
277.         /// 处理wrapCheckBox复选框选择状态改变事件  
278.         /// </summary>  
279.         private void WarpCheckBoxCheckedChanged(object sender, EventArgs e) {  
280.             // 设置bottomPane容器是否自动换行属性与wrapCheckBox复选框选中状态一致  
281.             this.bottomPane.WrapContents = this.wrapCheckBox.Checked;  
282.         }  
283.    
284.         /// <summary>  
285.         /// 处理autoScrollCheckBox复选框选择状态改变事件  
286.         /// </summary>  
287.         private void AutoScrollCheckBoxChanged(object sender, EventArgs e) {  
288.             // 设置bottomPane容器是否具备滚动条属性与autoScrollCheckBox复选框选中状态一致  
289.             this.bottomPane.AutoScroll = this.autoScrollCheckBox.Checked;  
290.         }  
291.    
292.         /// <summary>  
293.         /// 处理panddingTrackBar控件数值改变事件  
294.         /// </summary>  
295.         private void PandingTrackBarValueChanged(object sender, EventArgs e) {  
296.             // 设置bottomPane容器Padding属性与panddingTrackBar当前数值一致  
297.             this.bottomPane.Padding = new Padding(this.panddingTrackBar.Value);  
298.             // 设置pandingTrackBarValueTextBox文本框文本内容为bottomPane容器Padding属性值  
299.             this.pandingTrackBarValueTextBox.Text = this.bottomPane.Padding.All.ToString();  
300.         }  
301.    
302.         /// <summary>  
303.         /// 处理marginTrackBarValueTextBox控件数值改变事件  
304.         /// </summary>  
305.         private void MarginTrackBarValueChanged(object sender, EventArgs e) {  
306.             // 设置所有按钮控件的Margin属性与marginTrackBar当前数值一致  
307.             foreach (Button btn in this.buttons) {  
308.                 btn.Margin = new Padding(this.marginTrackBar.Value);  
309.             }  
310.             // 设置marginTrackBarValueTextBox文本框文本内容为按钮Margin属性值  
311.             this.marginTrackBarValueTextBox.Text = this.buttons[0].Margin.All.ToString();  
312.         }  
313.    
314.         /// <summary>  
315.         /// 覆盖父类OnResize方法, 处理窗体尺寸变化消息通知  
316.         /// </summary>  
317.         protected override void OnResize(EventArgs e) {  
318.             base.OnResize(e);  
319.    
320.             // 设置topPane容器高度为窗体客户区高度1/6  
321.             this.topPane.Height = this.ClientSize.Height / 6;  
322.             // 设置bottomPane容器高度为窗体客户区高度5/6  
323.             this.bottomPane.Height = this.ClientSize.Height - this.ClientSize.Height / 6;  
324.         }  
325.     }  
326.    
327.    
328.     /// <summary>  
329.     /// 包含住方法的类  
330.     /// </summary>  
331.     static class Program {  
332.         /// <summary>  
333.         /// 应用程序的主入口点。  
334.         /// </summary>  
335.         static void Main() {  
336.             Application.EnableVisualStyles();  
337.             Application.SetCompatibleTextRenderingDefault(false);  
338.             Application.Run(new MyForm());  
339.         }  
340.     }  
341. }  

本节代码下载

本次代码中，我们用到了一些其它控件，包括：

• 文本标签控件（Label类）；
• 文本框控件（TextBox类）；
• 组合下拉列表框控件（ComboBox类）；
• 数值调节滑块控件（TrackBar类）

代码中除了展示FlowLayoutPanel容器和上述控件的用法外（特别注意这些控件的事件处理），还展示了容器的Padding属性和控件（以Button为例）的Margin属性，仔细阅读代码，灵活的掌握上述内容。