图形界面编程（六）分组容器和卡片容器（1）-蒲公英云

点击打开链接

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

1 分组容器

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

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

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

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

图1 GroupBox应用示意图

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

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

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

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

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

图2 界面设计示意图

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

Program.cs

[c-sharp] view plain copy

using System;
using System.Drawing;
using System.Windows.Forms;
namespace Edu.Study.Graphics.GroupBoxContainer {
///
/// 主窗体类
///
class MyForm : Form {
// 默认字体大小
private const float DEFAULT_FONT_SIZE = 40.0F;
// 表格布局面板容器
private TableLayoutPanel tablePane;
// 表格布局面板容器第一行内的文本标签
private Label textLable;
// 表格布局面板容器第二行内的分组容器
private GroupBox groupBox1;
// 表格布局面板容器第三行内的分组容器
private GroupBox groupBox2;
// 分组容器1中的流式布局面板
private FlowLayoutPanel flowPane1;
// 分组容器2中的流式布局面板
private FlowLayoutPanel flowPane2;
///
/// 构造器, 初始化控件
///
public MyForm() {
// 设定窗体标题
this.Text = “分组容器”;
// 设定窗体尺寸
this.Size = new Size(800, 600);
/***** 设定表格布局管理器布局 *****/
this.tablePane = new TableLayoutPanel();
this.tablePane.Dock = DockStyle.Fill;
// 表格布局面板分为3行1列
this.tablePane.RowCount = 3;
this.tablePane.ColumnCount = 1;
// 设置第1行的样式: 固定高度, 90单位
this.tablePane.RowStyles.Add(new RowStyle(SizeType.Absolute, 90.0F));
// 设定2, 3行的样式,
for (int i = 1; i < this.tablePane.RowCount; i++) {
this.tablePane.RowStyles.Add(new RowStyle(SizeType.Percent, 50.0F));
}
// 设定第1列的样式
this.tablePane.ColumnStyles.Add(new ColumnStyle(SizeType.AutoSize));
this.Controls.Add(this.tablePane);
/***** 初始化标签控件 *****/
this.textLable = new Label();
this.textLable.Text = “测试文本”;
// 设置文本字体
this.textLable.Font = new Font(this.Font.FontFamily, DEFAULT_FONT_SIZE);
// 设定文本居中对齐
this.textLable.TextAlign = ContentAlignment.MiddleCenter;
this.textLable.Dock = DockStyle.Fill;
// 设定标签具有3D效果边框
this.textLable.BorderStyle = BorderStyle.Fixed3D;
// 控件加入表格容器第1行第1列
this.tablePane.Controls.Add(this.textLable, 0, 0);
/***** 设定分组容器1 *****/
this.groupBox1 = new GroupBox();
this.groupBox1.Dock = DockStyle.Fill;
// 设定分组容器左上角文字
this.groupBox1.Text = “选项1”;
// 容器加入表格容器第2行第1列
this.tablePane.Controls.Add(this.groupBox1, 0, 1);
/***** 设定流式布局面板容器1 *****/
this.flowPane1 = new FlowLayoutPanel();
this.flowPane1.WrapContents = true;
this.flowPane1.FlowDirection = FlowDirection.LeftToRight;
this.flowPane1.Dock = DockStyle.Fill;
// 容器加入分主容器1内
this.groupBox1.Controls.Add(this.flowPane1);
/***** 设定分组容器2 *****/
this.groupBox2 = new GroupBox();
this.groupBox2.Dock = DockStyle.Fill;
this.groupBox2.Text = “选项2”;
// 容器加入表格容器第3行第1列
this.tablePane.Controls.Add(this.groupBox2, 0, 2);
/***** 设定流式布局面板容器1 *****/
this.flowPane2 = new FlowLayoutPanel();
this.flowPane2.WrapContents = true;
this.flowPane2.FlowDirection = FlowDirection.LeftToRight;
this.flowPane2.Dock = DockStyle.Fill;
// 容器加入分主容器2内
this.groupBox2.Controls.Add(this.flowPane2);
/***** 流式面板容器1中的单选按钮控件展示的Color颜色对象数组 *****/
Color[] colors = {
Color.Black,
Color.Blue,
Color.Orange,
Color.Red,
Color.Green,
Color.Gray,
Color.Pink,
Color.Black,
Color.Plum
};
// 保存默认被选中单选按钮控件引用
RadioButton radioButtonDefault = null;
// 根据Color数组生成单选按钮对象
foreach (Color c in colors) {
RadioButton rb = new RadioButton();
// 设定单选按钮中显示的文字
rb.Text = c.ToString();
// 设定单选按钮的前景色
rb.ForeColor = c;
// 设定控件根据内容自动调整尺寸
rb.AutoSize = true;
// 将Color对象保存在控件的Tag属性中
rb.Tag = c;
// 设定单选按钮选择状态变化时的事件委托
rb.CheckedChanged += new EventHandler(RadioButtonColorCheckedChanged);
// 令第1个RadioButton对象成为默认被选中对象
if (radioButtonDefault == null) {
radioButtonDefault = rb;
}
// 控件加入流式面板容器1内
this.flowPane1.Controls.Add(rb);
}
// 选中默认的单选按钮控件
radioButtonDefault.Checked = true;
radioButtonDefault = null;
/***** 流式面板容器2中的单选按钮控件展示的Font字体对象数组 *****/
Font[] fonts = {
new Font(new FontFamily(“宋体”), DEFAULT_FONT_SIZE),
new Font(new FontFamily(“楷体”), DEFAULT_FONT_SIZE),
new Font(new FontFamily(“幼圆”), DEFAULT_FONT_SIZE),
new Font(new FontFamily(“黑体”), DEFAULT_FONT_SIZE),
new Font(new FontFamily(“华文彩云”), DEFAULT_FONT_SIZE)
};
// 根据Font数组生成单选按钮对象
foreach (Font font in fonts) {
RadioButton rb = new RadioButton();
// 设定单选按钮中显示的文字
rb.Text = font.FontFamily.Name;
// 设定单选按钮文本字体
rb.Font = font;
// 将Font对象保存在控件的Tag属性中
rb.Tag = font;
// 设定控件根据内容自动调整尺寸
rb.AutoSize = true;
// 设定单选按钮选择状态变化时的事件委托
rb.CheckedChanged += new EventHandler(RadioButtonFontCheckedChanged);
// 令第1个RadioButton对象成为默认被选中对象
if (radioButtonDefault == null) {
radioButtonDefault = rb;
}
// 控件加入流式面板容器2内
this.flowPane2.Controls.Add(rb);
}
// 选中默认的单选按钮控件
radioButtonDefault.Checked = true;
}
///
/// 上边一组单选按钮选中状态变化事件委托方法
///
private void RadioButtonColorCheckedChanged(object sender, EventArgs e) {
// 根据sender参数获取触发事件的单选按钮对象
RadioButton rb = (RadioButton)sender;
// 判断触发事件的对象选中状态是否为被选中
if (rb.Checked) {
// 更改文本标签控件的前景色
this.textLable.ForeColor = (Color)rb.Tag;
}
}
///
/// 下边一组单选按钮选中状态变化事件委托方法
///
private void RadioButtonFontCheckedChanged(object sender, EventArgs e) {
// 根据sender参数获取触发事件的单选按钮对象
RadioButton rb = (RadioButton)sender;
// 判断触发事件的对象选中状态是否为被选中
if (rb.Checked) {
// 更改文本标签控件的字体
this.textLable.Font = (Font)rb.Tag;
}
}
}
///
/// 包含主方法的类
///
static class Program {
///
/// 应用程序的主入口点。
///
[STAThread]
static void Main() {
Application.EnableVisualStyles();
Application.SetCompatibleTextRenderingDefault(false);
Application.Run(new MyForm());
}
}
}