C#语言 第四部分 图形界面编程（六） 分组容器和卡片容器（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

using System; using System.Drawing; using System.Windows.Forms; namespace Edu.Study.Graphics.GroupBoxContainer { /// <summary> /// 主窗体类 /// </summary> 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; /// <summary> /// 构造器, 初始化控件 /// </summary> 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; } /// <summary> /// 上边一组单选按钮选中状态变化事件委托方法 /// </summary> private void RadioButtonColorCheckedChanged(object sender, EventArgs e) { // 根据sender参数获取触发事件的单选按钮对象 RadioButton rb = (RadioButton)sender; // 判断触发事件的对象选中状态是否为被选中 if (rb.Checked) { // 更改文本标签控件的前景色 this.textLable.ForeColor = (Color)rb.Tag; } } /// <summary> /// 下边一组单选按钮选中状态变化事件委托方法 /// </summary> private void RadioButtonFontCheckedChanged(object sender, EventArgs e) { // 根据sender参数获取触发事件的单选按钮对象 RadioButton rb = (RadioButton)sender; // 判断触发事件的对象选中状态是否为被选中 if (rb.Checked) { // 更改文本标签控件的字体 this.textLable.Font = (Font)rb.Tag; } } } /// <summary> /// 包含主方法的类 /// </summary> static class Program { /// <summary> /// 应用程序的主入口点。 /// </summary> [STAThread] static void Main() { Application.EnableVisualStyles(); Application.SetCompatibleTextRenderingDefault(false); Application.Run(new MyForm()); } } }

本节代码下载

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