圖形介面程式設計(六) 分組容器和卡片容器(1)

NO IMAGE

點選開啟連結

——本節介紹瞭如何使用分組容器(GroupBox)以及一個分組RadioButton的例項

1 分組容器

GroupBox容器使用起來就和一個基本的Panel容器一樣,它不具備佈局管理功能,僅僅是一個可以容納其它控制元件的容器。

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控制元件作為容器內容:

介面設計示意圖圖2 介面設計示意圖

可以看到,為了佈局的合理性,我們使用一個3行1列的表格佈局面板(TableLayoutPanel)來佈局整個窗體。在第2、3行放入分組容器(GroupBox),為了讓分組容器內的一系列單選按鈕控制元件合理佈局,在分組容器內又放置了一個流式佈局面板容器(FlowLayoutPanel)。下面我們看實現程式碼:

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.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. }  

本節程式碼下載

GroupBox的使用沒有太多難度,大家通過程式碼學習即可。