图形界面编程（六） 分组容器和卡片容器（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 {

     ///
     /// 主窗体类
     ///
     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());
         }
     }
 }

本节代码下载

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