图形界面编程（六）分组容器和卡片容器（1）

痛定思痛。 2022-07-14 23:54 131阅读 0赞

[点击打开链接][Link 1]

**——本节介绍了如何使用分组容器（GroupBox）以及一个分组RadioButton的实例**

**1 分组容器**

GroupBox容器使用起来就和一个基本的Panel容器一样，它不具备布局管理功能，仅仅是一个可以容纳其它控件的容器。

GroupBox的主要特点就是：该容器具有一个**外观优雅的边框**，并且可以具备**标题文本**。所以该容器的主要作用就是：将符合某一类功能特点的控件分组，使整个窗体看上去整齐一些。

**不要小看了分组，让整个界面看上去井井有条是一个图形化界面产品成败的关键！**

下图展示了一个用户注册界面，通过GroupBox将为数众多的控件根据功能分组。

![GroupBox应用示意图][GroupBox]图1 GroupBox应用示意图

GroupBox还有一个重要的功能：设定RadioButton控件的组别。

RadioButton控件称为单选按钮控件。这个控件具有一个bool类型的Checked属性，表示被选中和未被选中（通过一个小圆框是否有颜色来区分）。一组RadioButton控件同时只有一个可以处于被选中状态，所以称为**单选按钮控件**。.net Framework是这样来界定RadioButton控件的分组的：**处于同一个容器内的RadioButton控件属于一组，只有一个控件可以处于被选中状态**。所以我们有几组RadioButton控件，就得将它们放入多少个不同的容器中。

任何容器都可以作为分组RadioButton的依据，但界面设计者们更青睐于GroupBox容器，因为它不仅可以起到分组RadioButton的作用，还能进一步说明这一组RadioButton的含义是什么。

注意：GroupBox容器本身不具备布局管理功能，所以要想进行相对布局管理，请将GroupBox放入具备布局功能的容器中，并且在GroupBox容器内放入某种可以进行布局管理的容器。

下面我们通过一个简单的例子来说明GroupBox的使用方法，在设计例子时，我们选择了RadioButton控件作为容器内容：

![界面设计示意图][0_1272535986U88O.gif]图2 界面设计示意图

可以看到，为了布局的合理性，我们使用一个3行1列的表格布局面板（TableLayoutPanel）来布局整个窗体。在第2、3行放入分组容器（GroupBox），为了让分组容器内的一系列单选按钮控件合理布局，在分组容器内又放置了一个流式布局面板容器（FlowLayoutPanel）。下面我们看实现代码：

**Program.cs**

**\[c-sharp\]**  [view plain][]   [copy][view plain]

1.  **using** System;  
2.  **using** System.Drawing;  
3.  **using** System.Windows.Forms;  
4.     
5.  **namespace** Edu.Study.Graphics.GroupBoxContainer \{  
6.     
7.      /// <summary>  
8.      /// 主窗体类  
9.      /// </summary>  
10.     **class** MyForm : Form \{  
11.           
12.         // 默认字体大小  
13.         **private** **const** **float** DEFAULT\_FONT\_SIZE = 40.0F;  
14.    
15.         // 表格布局面板容器  
16.         **private** TableLayoutPanel tablePane;  
17.    
18.         // 表格布局面板容器第一行内的文本标签  
19.         **private** Label textLable;  
20.    
21.         // 表格布局面板容器第二行内的分组容器  
22.         **private** GroupBox groupBox1;  
23.    
24.         // 表格布局面板容器第三行内的分组容器  
25.         **private** GroupBox groupBox2;  
26.    
27.         // 分组容器1中的流式布局面板  
28.         **private** FlowLayoutPanel flowPane1;  
29.    
30.         // 分组容器2中的流式布局面板  
31.         **private** FlowLayoutPanel flowPane2;  
32.    
33.         /// <summary>  
34.         /// 构造器, 初始化控件  
35.         /// </summary>  
36.         **public** MyForm() \{  
37.    
38.             // 设定窗体标题  
39.             **this**.Text = "分组容器";  
40.             // 设定窗体尺寸  
41.             **this**.Size = **new** Size(800, 600);  
42.    
43.             /\*\*\*\*\* 设定表格布局管理器布局 \*\*\*\*\*/  
44.             **this**.tablePane = **new** TableLayoutPanel();  
45.             **this**.tablePane.Dock = DockStyle.Fill;  
46.             // 表格布局面板分为3行1列  
47.             **this**.tablePane.RowCount = 3;  
48.             **this**.tablePane.ColumnCount = 1;  
49.             // 设置第1行的样式: 固定高度, 90单位  
50.             **this**.tablePane.RowStyles.Add(**new** RowStyle(SizeType.Absolute, 90.0F));  
51.             // 设定2, 3行的样式,   
52.             **for** (**int** i = 1; i < **this**.tablePane.RowCount; i++) \{  
53.                 **this**.tablePane.RowStyles.Add(**new** RowStyle(SizeType.Percent, 50.0F));  
54.             \}  
55.             // 设定第1列的样式  
56.             **this**.tablePane.ColumnStyles.Add(**new** ColumnStyle(SizeType.AutoSize));  
57.             **this**.Controls.Add(**this**.tablePane);  
58.    
59.             /\*\*\*\*\* 初始化标签控件 \*\*\*\*\*/  
60.             **this**.textLable = **new** Label();  
61.             **this**.textLable.Text = "测试文本";  
62.             // 设置文本字体  
63.             **this**.textLable.Font = **new** Font(**this**.Font.FontFamily, DEFAULT\_FONT\_SIZE);  
64.             // 设定文本居中对齐  
65.             **this**.textLable.TextAlign = ContentAlignment.MiddleCenter;  
66.             **this**.textLable.Dock = DockStyle.Fill;  
67.             // 设定标签具有3D效果边框  
68.             **this**.textLable.BorderStyle = BorderStyle.Fixed3D;  
69.             // 控件加入表格容器第1行第1列  
70.             **this**.tablePane.Controls.Add(**this**.textLable, 0, 0);  
71.    
72.             /\*\*\*\*\* 设定分组容器1 \*\*\*\*\*/  
73.             **this**.groupBox1 = **new** GroupBox();  
74.             **this**.groupBox1.Dock = DockStyle.Fill;  
75.             // 设定分组容器左上角文字  
76.             **this**.groupBox1.Text = "选项1";  
77.             // 容器加入表格容器第2行第1列  
78.             **this**.tablePane.Controls.Add(**this**.groupBox1, 0, 1);  
79.    
80.             /\*\*\*\*\* 设定流式布局面板容器1 \*\*\*\*\*/  
81.             **this**.flowPane1 = **new** FlowLayoutPanel();  
82.             **this**.flowPane1.WrapContents = **true**;  
83.             **this**.flowPane1.FlowDirection = FlowDirection.LeftToRight;  
84.             **this**.flowPane1.Dock = DockStyle.Fill;  
85.             // 容器加入分主容器1内  
86.             **this**.groupBox1.Controls.Add(**this**.flowPane1);  
87.    
88.             /\*\*\*\*\* 设定分组容器2 \*\*\*\*\*/  
89.             **this**.groupBox2 = **new** GroupBox();  
90.             **this**.groupBox2.Dock = DockStyle.Fill;  
91.             **this**.groupBox2.Text = "选项2";  
92.             // 容器加入表格容器第3行第1列  
93.             **this**.tablePane.Controls.Add(**this**.groupBox2, 0, 2);  
94.    
95.             /\*\*\*\*\* 设定流式布局面板容器1 \*\*\*\*\*/  
96.             **this**.flowPane2 = **new** FlowLayoutPanel();  
97.             **this**.flowPane2.WrapContents = **true**;  
98.             **this**.flowPane2.FlowDirection = FlowDirection.LeftToRight;  
99.             **this**.flowPane2.Dock = DockStyle.Fill;  
100.             // 容器加入分主容器2内  
101.             **this**.groupBox2.Controls.Add(**this**.flowPane2);  
102.    
103.             /\*\*\*\*\* 流式面板容器1中的单选按钮控件展示的Color颜色对象数组 \*\*\*\*\*/  
104.             Color\[\] colors = \{  
105.                 Color.Black,  
106.                 Color.Blue,  
107.                 Color.Orange,  
108.                 Color.Red,  
109.                 Color.Green,  
110.                 Color.Gray,  
111.                 Color.Pink,  
112.                 Color.Black,  
113.                 Color.Plum  
114.             \};  
115.    
116.             // 保存默认被选中单选按钮控件引用  
117.             RadioButton radioButtonDefault = **null**;  
118.    
119.             // 根据Color数组生成单选按钮对象  
120.             **foreach** (Color c **in** colors) \{  
121.                 RadioButton rb = **new** RadioButton();  
122.                 // 设定单选按钮中显示的文字  
123.                 rb.Text = c.ToString();  
124.                 // 设定单选按钮的前景色  
125.                 rb.ForeColor = c;  
126.                 // 设定控件根据内容自动调整尺寸  
127.                 rb.AutoSize = **true**;  
128.                 // 将Color对象保存在控件的Tag属性中  
129.                 rb.Tag = c;  
130.                 // 设定单选按钮选择状态变化时的事件委托  
131.                 rb.CheckedChanged += **new** EventHandler(RadioButtonColorCheckedChanged);  
132.    
133.                 // 令第1个RadioButton对象成为默认被选中对象  
134.                 **if** (radioButtonDefault == **null**) \{  
135.                     radioButtonDefault = rb;  
136.                 \}  
137.                 // 控件加入流式面板容器1内  
138.                 **this**.flowPane1.Controls.Add(rb);  
139.             \}  
140.             // 选中默认的单选按钮控件  
141.             radioButtonDefault.Checked = **true**;  
142.    
143.             radioButtonDefault = **null**;  
144.    
145.             /\*\*\*\*\* 流式面板容器2中的单选按钮控件展示的Font字体对象数组 \*\*\*\*\*/  
146.             Font\[\] fonts = \{  
147.                 **new** Font(**new** FontFamily("宋体"), DEFAULT\_FONT\_SIZE),  
148.                 **new** Font(**new** FontFamily("楷体"), DEFAULT\_FONT\_SIZE),  
149.                 **new** Font(**new** FontFamily("幼圆"), DEFAULT\_FONT\_SIZE),  
150.                 **new** Font(**new** FontFamily("黑体"), DEFAULT\_FONT\_SIZE),  
151.                 **new** Font(**new** FontFamily("华文彩云"), DEFAULT\_FONT\_SIZE)  
152.             \};  
153.    
154.             // 根据Font数组生成单选按钮对象  
155.             **foreach** (Font font **in** fonts) \{  
156.                 RadioButton rb = **new** RadioButton();  
157.                 // 设定单选按钮中显示的文字  
158.                 rb.Text = font.FontFamily.Name;  
159.                 // 设定单选按钮文本字体  
160.                 rb.Font = font;  
161.                 // 将Font对象保存在控件的Tag属性中  
162.                 rb.Tag = font;  
163.                 // 设定控件根据内容自动调整尺寸  
164.                 rb.AutoSize = **true**;  
165.                 // 设定单选按钮选择状态变化时的事件委托  
166.                 rb.CheckedChanged += **new** EventHandler(RadioButtonFontCheckedChanged);  
167.    
168.                 // 令第1个RadioButton对象成为默认被选中对象  
169.                 **if** (radioButtonDefault == **null**) \{  
170.                     radioButtonDefault = rb;  
171.                 \}  
172.                 // 控件加入流式面板容器2内  
173.                 **this**.flowPane2.Controls.Add(rb);  
174.             \}  
175.             // 选中默认的单选按钮控件  
176.             radioButtonDefault.Checked = **true**;  
177.         \}  
178.    
179.         /// <summary>  
180.         /// 上边一组单选按钮选中状态变化事件委托方法  
181.         /// </summary>  
182.         **private** **void** RadioButtonColorCheckedChanged(**object** sender, EventArgs e) \{  
183.             // 根据sender参数获取触发事件的单选按钮对象  
184.             RadioButton rb  = (RadioButton)sender;  
185.               
186.             // 判断触发事件的对象选中状态是否为被选中  
187.             **if** (rb.Checked) \{  
188.                 // 更改文本标签控件的前景色  
189.                 **this**.textLable.ForeColor = (Color)rb.Tag;  
190.             \}  
191.         \}  
192.    
193.         /// <summary>  
194.         /// 下边一组单选按钮选中状态变化事件委托方法  
195.         /// </summary>  
196.         **private** **void** RadioButtonFontCheckedChanged(**object** sender, EventArgs e) \{  
197.             // 根据sender参数获取触发事件的单选按钮对象  
198.             RadioButton rb = (RadioButton)sender;  
199.    
200.             // 判断触发事件的对象选中状态是否为被选中  
201.             **if** (rb.Checked) \{  
202.                 // 更改文本标签控件的字体  
203.                 **this**.textLable.Font = (Font)rb.Tag;  
204.             \}  
205.         \}  
206.     \}  
207.    
208.     /// <summary>  
209.     /// 包含主方法的类  
210.     /// </summary>  
211.     **static** **class** Program \{  
212.         /// <summary>  
213.         /// 应用程序的主入口点。  
214.         /// </summary>  
215.         \[STAThread\]  
216.         **static** **void** Main() \{  
217.             Application.EnableVisualStyles();  
218.             Application.SetCompatibleTextRenderingDefault(**false**);  
219.             Application.Run(**new** MyForm());  
220.         \}  
221.     \}  
222. \}

本节代码[下载][Link 2]

GroupBox的使用没有太多难度，大家通过代码学习即可。

[Link 1]: http://blog.csdn.net/mousebaby808/article/details/5543565
[GroupBox]: /images/20220715/1ea76d040d3b4ad3a6da9fc6fd5291fe.png
[0_1272535986U88O.gif]: /images/20220715/8646f83d19c54c179388ca9798467584.png
[view plain]: http://blog.csdn.net/mousebaby808/article/details/5543565#
[Link 2]: http://cid-79da10bb7cf16b34.skydrive.live.com/self.aspx/Code/C%5E3/Study/Edu.Study.Graphics.GroupBoxContainer.rar