CHƢƠNG 6 ĐIỀU KHIỂN CHỨA CÁC ĐIỀU KHIỂN KHÁC 6 1 Điều khiển GroupBox GroupBox là dạng điều khiển chứa, có thể chứa các điều khiển khác hiển thị trên form, giúp cho việc thiết kế giao diện của form dễ[.]
CHƢƠNG 6: ĐIỀU KHIỂN CHỨA CÁC ĐIỀU KHIỂN KHÁC 6.1 Điều khiển GroupBox GroupBox dạng điều khiển chứa, chứa điều khiển khác hiển thị form, giúp cho việc thiết kế giao diện form dễ nhìn khoa học GroupBox khơng hỗ trợ trượt (ScrollBar) GroupBox có tiêu đề hiển thị, tiêu đề thiết lập thuộc tính Text Nếu khơng muốn hiển thị tiêu đề, lập trình viên thiết lập chuỗi rỗng thuộc tính Text Điều khiển GroupBox đặt nhóm Containers cửa sổ Toolbox hình 6.1 Hình 6.1: Điều khiển GroupBox cửa sổ Toolbox Thông thường GroupBox sử dụng để nhóm điều khiển RadioButton (xem mục 3.5.2 chương 3) Một số thuộc tính thường dùng GroupBox: Bảng 6.1: Bảng mơ tả thuộc tính GroupBox Thuộc tính Mơ tả Name Đặt tên cho GroupBox Text Chuỗi hiển thị Font Thiết lập kiểu chữ, kích thước chữ, ForeColor Thiết lập màu chữ hiển thị BackColor Thiết lập màu GroupBox Visible Mang giá trị True False - Nếu True: Hiển thị GroupBox - Nếu False: Không hiển thị GroupBox AutoSize Mang giá trị True False 176 - AutoSizeMode Nếu True: GroupBox tự động thay đổi kích thước để hiển thị hết điều khiển chứa bên Nếu False: GroupBox có kích thước lập trình viên thiết lập Quy định cách thức điều khiển thay đổi kích thước - GrowAndShrink: GroupBox co - giãn GrowOnly: Mặc định, giãn lớn Khi thiết lập giá trị thuộc tính cho GroupBox bảng 6.1, điều khiển như: RadioButton, TextBox, Label, … nằm GroupBox có giá trị thuộc tính tương tự GroupBox Ví dụ 6.1: Viết chương trình định dạng chuỗi văn bản, thiết kế giao diện chương trình hình 6.2 Hình 6.2: Giao diện forn định dạng chuỗi ví dụ 6.1 Yêu cầu: Khi người dùng nhập chuỗi văn TextBox Label “Chuỗi định dạng” hiển thị chuỗi văn vừa nhập Khi nhấp chuột chọn Radio GroupBox “Màu” GroupBox “Kiểu hiển thị” chuỗi định dạng thay đổi định dạng tương ứng với lựa chọn người dùng Bước 1: Thiết kế giao diện chương trình Kéo điều khiển: Label, GroupBox, RadioButton, TextBox từ cửa sổ Toolbox vào form hình 6.3 177 textBox1 Hình 6.3: Giao diện form sau thêm điều khiển vào form Bước 2: Thiết lập giá trị thuộc tính cho điều khiển cửa sổ Properties - label1: Thuộc tính Text: “Định dạng chuỗi” Thuộc tính Size: 14 Thuộc tính FontStyle: Bold - label2: Thuộc tính Text: “Nhập chuỗi muốn định dạng:” - label3: - Thuộc tính Text: “Chuỗi định dạng” Thuộc tính Name: lblChuoiDinhDang textBox1: Thuộc tính Name: txtNhapChuoi groupBox1: Thuộc tính Text: “Màu” groupBox2: Thuộc tính Text: “Kiểu hiển thị” groupBox3: Thuộc tính Text: “Chuỗi sau định dạng” - radioButton1: Thuộc tính Name: radXanh - radioButton2: Thuộc tính Name: radDo - radioButton3: 178 Thuộc tính Name: radDen - radioButton4: Thuộc tính Name: radInDam - radioButton5: Thuộc tính Name: radInNghieng - radioButton6: Thuộc tính Name: radGachChan - button1: Thuộc tính Name: btnThoat Thuộc tính Text: “Thốt” Bước 3: Viết mã lệnh cho điều khiển - Sự kiện Click nút btnThoat: privatevoid btnThoat_Click(object sender, EventArgs e) { Close(); } - Sự kiện TextChanged txtNhapChuoi: private void txtNhapChuoi_TextChanged(object sender, EventArgs e) { lblChuoiDinhDang.Text = txtNhapChuoi.Text; } - Sự kiện CheckedChanged radXanh: private void radXanh_CheckedChanged(object sender, EventArgs e) { if (radXanh.Checked == true) { lblChuoiDinhDang.ForeColor = Color.Blue; } } - Sự kiện CheckedChanged radDo: private void radDo_CheckedChanged(object sender, EventArgs e) { if (radDo.Checked == true) { lblChuoiDinhDang.ForeColor = Color.Red; } } 179 - Sự kiện CheckedChanged radDen: private void radDen_CheckedChanged(object sender, EventArgs e) { if (radDen.Checked == true) { lblChuoiDinhDang.ForeColor = Color.Black; } } - Sự kiện CheckedChanged radInDam: private void radInDam_CheckedChanged(object sender, EventArgs e) { if (radInDam.Checked == true) { lblChuoiDinhDang.Font = new System.Drawing.Font("Microsoft Sans Serif", 12F, System.Drawing.FontStyle.Bold); } } - Sự kiện CheckedChanged radInNghieng: private void radInNghieng_CheckedChanged(object sender, EventArgs e) { if (radInNghieng.Checked == true) { lblChuoiDinhDang.Font = new System.Drawing.Font("Microsoft Sans Serif", 12F, System.Drawing.FontStyle.Italic); } } - Sự kiện CheckedChanged radGachChan: private void radGachChan_CheckedChanged(object sender, EventArgs e) { if (radGachChan.Checked == true) { lblChuoiDinhDang.Font = new System.Drawing.Font("Microsoft Sans Serif", 12F, System.Drawing.FontStyle.Underline); } } 180 6.2 Điều khiển Panel Cũng GroupBox, Panel điều khiển dùng để chứa điều khiển khác Panel có thuộc tính AutoSize, AutoSizeMode GroupBox thuộc tính đường viền BorderStyle Label Điểm khác biệt Panel với GroupBox điều khiển Panel khơng có tiêu đề mơ tả (khơng có thuộc tính Text) có trượt ScrollBar ngang ScollBar dọc (có thuộc tính AutoScroll) Điều khiển Panel đặt nhóm Containers cửa sổ Toolbox hình 6.4 Hình 6.4: Điều khiển Panel cửa sổ Toolbox Một số thuộc tính thường dùng Panel: Bảng 6.2: Bảng mơ tả thuộc tính Panel Thuộc tính Mơ tả AutoScroll Mang giá trị True False - Nếu True: Panel tự động xuất trượt kích thước Panel hiển thị hết điều khiển chứa bên - Nếu False: Panel không hiển thị trượt BorderStyle Kiểu đường viền Panel hiển thị Có giá trị: None, FixedSingle Fixed3D - None: Không hiển thị đường viền - FixedSingle:Quanh Panel hiển thị đường viền đơn - Fixed3D: Hiển thị đường viền Panel dạng chiều 181 6.3 Điều khiển FlowLayoutPanel FlowLayoutPanel lớp điều khiển Panel, chứa điều khiển khác Panel Mục đích FlowLayoutPanel giúp bố trí điều khiển form cách có tổ chức khoa học Khi thêm điều khiển vào FlowLayoutPanel FlowLayoutPanel tự động xếp điều khiển đặt bên theo quy tắc định trước đồng thời thay đổi kích thước điều khiển bên cho phù hợp với kích thước FlowLayoutPanel Vì nói điều khiển FLowLayoutPanel điều khiển hỗ trợ tuyệt vời việc thiết kế giao diện người dùng Điều khiển FlowLayoutPanel nằm nhóm Containers cửa sổ Toolbox hình 6.5 Hình 6.5: Điều khiển FlowLayoutPanel cửa sổ Toolbox Điều khiển FlowLayoutPanel hỗ trợ dạng trượt (ScrollBar) Panel, thuộc tính AutoScroll thiết lập True kích thước điển khiển chứa vượt ngồi kích thước FlowLayoutPanel, FlowLayoutPanel hiển thị trượt Việc bố trí điều khiển thêm vào FlowLayoutPanel thuộc tính FlowDirection quy định Thuộc tính tính mang giá trị cho phép điều khiển thêm vào theo hướng: từ trái qua phải (LeftToRight), từ phải qua trái (RightToLeft), từ xuống (TopDown) từ lên (BottomUp) Các điều khiển thêm vào đến vượt ngoại phạm vi FlowLayoutPanel, muốn điều khiển tự động bố trí xuống dịng sang cột hình 6.6, hình 6.7, hình 6.8 hình 6.9, cần phải thiết lập thuộc tính WrapContents True Cịn thuộc tính WrapContents False FLowLayoutPanel hiển thị trượt (thuộc tính AutoScroll True) để hiển thị điều khiển nằm phạm vi Thuộc tính FlowDirection LeftToRight: 182 Hình 6.6: Bố trí điều khiển từ trái sang phải với WrapContents True Thuộc tính FlowDirection RightToLeft: Hình 6.7: Bố trí điều khiển từ phải sang trái với WrapContents True Thuộc tính FlowDirection TopDown: Hình 6.8: Bố trí điều khiển từ xuống với WrapContents True Thuộc tính FlowDirection BottomUp: Hình 6.9: Bố trí điều khiển từ lên với WrapContents True Một số thuộc tính thường dùng FLowLayoutPanel: 183 Bảng 6.3: Bảng mơ tả thuộc tính FLowLayoutPanel Thuộc tính Mô tả AutoScroll Mang giá trị True False - Nếu True: FLowLayoutPanel tự động xuất trượt kích thước Panel khơng thể hiển thị hết điều khiển chứa bên - Nếu False: FLowLayoutPanel không hiển thị trượt BorderStyle Kiểu đường viền FLowLayoutPanel hiển thị Có giá trị: None, FixedSingle Fixed3D - None: Không hiển thị đường viền - FixedSingle:Quanh FLowLayoutPanel hiển thị đường viền đơn - Fixed3D: Hiển thị đường viền FLowLayoutPanel dạng chiều FlowDirection Cách thức bổ trí điều khiển điều khiển nằm phạm vi FLowLayoutPanel Bao gồm giá trị: LeftToRight, RightToLeft, TopDown, BottomUp WrapContents Mang giá trị True False - Nếu True: Các điều khiển vượt ngồi kích thước FLowLayoutPanel tự động bố trí dịng - cột Nếu False: FLowLayoutPanel xuất trượt để hiển thị điều khiển ngồi kích thuốc FLowLayoutPanel (với thuộc tính AutoSroll True) Nếu thuộc tính AutoSroll False điều khiển nằm ngồi kích thước bị ẩn Phương thức thường dùng FLowLayoutPanel: Bảng 6.4: Bảng mô tả phương thức FLowLayoutPanel Phƣơng thức Mơ tả Controls.Add Phương thức có FlowLayoutPanel chức thêm điều khiển vào Ví dụ 6.2: Thiết kế giao diện chương trình gồm có PictureBox FlowLayoutPanel hình 6.10 Với FlowLayoutPanel chứa danh sách hình Khi người dùng nhấp chuột chọn hình FlowLayoutPanel hình hiển thị PictureBox 184 Hình 6.10: Giao diện form hiển thị hình ví dụ 6.2 Hướng dẫn: Bước 1: Thiết kế giao diện chương trình Kéo điều khiển FlowLayoutPanel, PictureBox ImageList form hình 6.11 Hình 6.11: Giao diện form sau thêm PictureBox, FlowLayoutPicture ImageList Bước 2: Thiết lập giá trị thuộc tính cho điều khiển cửa sổ Properties - Form1: Thuộc tính Text: “FlowLayoutPanel” - pictureBox1: Thuộc tính Name: myPictureBox - flowLayoutPanel1: Thuộc tính Name: myFlowLayoutPanel Thuộc tính BorderStyle: FixSingle Thuộc tính AutoScroll: True 185 Thuộc tính WrapContents: False - imageList1: Thuộc tính Name: myImageList Thuộc tính ImageSize: 256, 256 Thuộc tính Images: Thêm số hình ảnh vào myImageList hình 6.12 Hình 6.12: Cửa sổ thêm hình cho myImageList Bước 3: Viết mã lệnh cho điều khiển - Sự kiện Load Form1: private void Form1_Load(object sender, EventArgs e) { for (int i = 0; i < myImageList.Images.Count; i++) { PictureBox pic = new PictureBox(); pic.Image = myImageList.Images[i]; pic.Size = new Size(50, 50); pic.Click += new EventHandler(Form1_Click); myFlowLayoutPanel.Controls.Add(pic); } } 186 - Sự kiện Click Form1: private void Form1_Click(object sender, EventArgs e) { try { PictureBox pic = (PictureBox)sender; myPictureBox.Image = pic.Image; }catch (Exception ex) { } } 6.4 Điều khiển TableLayoutPanel Cũng điều khiển FlowLayoutPanel, TableLayoutPanel điều khiển dẫn xuất từ điều khiển Panel dùng cho mục đích thiết kế giao diện form TableLayoutPanel nằm nhóm Containers cửa sổ Toolbox hình 6.13 Hình 6.13: Điều khiển TableLayoutPanel cửa sổ Toolbox TableLayoutPanel bao gồm theo dịng cột để thêm điều khiển vào Lập trình viên thêm dịng cột cho TableLayoutPanel qua thuộc tính Columns Rows cửa sổ Properties hình 6.14, thêm dòng cột qua ContextMenuStrip nhấp chuột phải vào TableLayoutPanel hình 6.15 187 Hình 6.14: Thêm dịng cột cửa sổ Column and Rown Styles Hình 6.15: Thêm dòng cột ContextMenuStrip Trên cửa sổ Column and Rown Styles hình 6.14, dịng cột thêm vào xác định kích thước pixel (mục chọn Absolute), phần trăm (mục chọn Percent) tự động điều chỉnh kích thước (mục chọn AutoSize) 188 Với TableLayoutPanel, chứa điều khiển Tuy nhiên lập trình viên thêm nhiều điều khiển ô cách thêm điều khiển loại Containers như: GroupBox, Panel, … vào ô TableLayoutPanel, lập trình viên thêm nhiều điều khiển vào điều khiển loại Containers nằm ô TableLayoutPanel TableLayoutPanel cung cấp trượt (ScrollBar) thuộc tính AutoScroll True TableLayoutPanel điều khiển dạng bảng chia thành (cell) khơng có thuộc tính BorderStyle mà thay vào có thuộc tính CellBorderStyle Thuộc tính CellBorderStyle định kiểu đường viền cho TableLayoutPanel Thơng thường, thuộc tính TableLayoutStyle có giá trị mặc định None, nghĩa không hiển thị đường viền quanh TableLayoutPanel Lập trình thiết lập loại đường viền hổ trợ cho thuộc tính CellBorderStyle như: Single, Inset, InsetDouble, Outset, OutsetDouble, OutsetPartial Một số thuộc tính thường dùng TableLayoutStyle: Bảng 6.5: Bảng mơ tả thuộc tính TableLayoutStyle Thuộc tính Mơ tả AutoScroll Mang giá trị True False - Nếu True: TableLayoutStyle tự động xuất trượt kích thước Panel khơng thể hiển thị hết điều khiển chứa bên - Nếu False: TableLayoutStyle không hiển thị trượt CellBorderStyle Kiểu đường viền TableLayoutStyle hiển thị Có giá trị: None, Single Inset, InsetDouble, Outset, OutsetDouble, OutsetPartial ColumnCount Số cột TableLayoutPanel Lập trình viên thêm giảm số cột cách thay đổi giá trị thuộc tính ColumnCount Columns Thuộc tính giúp hiển thị bảng Column and Rown Styles để thêm, sửa xóa cột GrowStyle Thuộc tính định việc thay đổi kích thước TableLayoutPanel Gồm giá trị: - FixedSize: Cố định kích thước, khơng 189 RowCount - thay đổi AddRows: Thêm dòng - AddColumns: Thêm cột Số cột TableLayoutPanel Lập trình viên thêm giảm số dòng cách thay đổi giá trị thuộc tính RowCount Rows Thuộc tính giúp hiển thị bảng Column and Rown Styles để thêm, sửa xóa dịng Phương thức thường dùng TableLayoutStyle: Bảng 6.6: Bảng mô tả phương thức TableLayoutStyle Phƣơng thức Mơ tả Controls.Add Phương thức có chức thêm điều khiển vào TableLayoutStyle 6.5 Điều khiển TabControl TabControl điều khiển dạng Containers, chứa diều khiển khác Điểm đặc biệt TabControl cho phép thể nhiều page form Mỗi page chứa nhiều điều khiển khác bên Điều khiển TabControl nằm nhóm Containers cửa sổ Toolbox hình 6.16 Hình 6.16: Điều khiển TabControl cửa sổ Toolbox TabPage: Thuộc tính quan trọng TabControl TabPage Một TabControl có nhiều TabPage hình 6.17 Người dùng nhấp vào tab để chuyển đổi qua lại TabPage với 190 TabControl TabPage Hình 6.17: TabControl chứa nhiều TabPage TabPage điều khiển dạng Container nằm TabControl chứa điều khiển khác bên Mỗi TabPage có thuộc tính riêng, lập trình viên thiết lập giá trị thuộc tính khác TabPage TabControl cách nhấp chuột trái chọn thuộc tính TabPages cửa sổ Properties Khi cửa sổ TabPage Collection Editor hiển thị hình 6.18 Tại cửa sổ này, lập trình viên thêm xóa TabPage cách nhấn nút Add Remove Các thuộc tính TabPage Hình 6.18: Cửa sổ thiết lập giá trị thuộc tính cho TabPage Điều khiển TabPage có nhiều điểm giống với điều khiển Panel TabPage hỗ trợ trượt cần thuộc tính AutoScroll thiết lập True, có thuộc tính BorderStyle để thiết lập đường viền quanh TabPage với giá trị: None, FixedSingle, Fixed3D Tuy nhiên có điềm khác biệt với Panel TabPage hỗ trợ thuộc 191 tính Text, chuỗi mơ tả thiết lập thuộc tính Text hiển thị tab TabPage: Text TabPage1 MyTab1 Text TabPage2 MyTab2 Text TabPage3 MyTab3 Các thuộc tính thường dùng TabControl: Bảng 6.7: Bảng mơ tả thuộc tính TabControl Thuộc tính Mơ tả Appearance Thuộc tính định TabPage hiển thị hình dạng Có giá trị: Alignment - Normal: - Button: - FlatButtons: Thuộc tính xác định tab hiển thị trên, dưới, trái hay phải TabControl Gồm giá trị: - Top: 192 Multiline - Bottom: - Left: - Right: Mang hai giá trị True False - Nếu True: Cho phép hiển thị nhiều dòng để chứa tab số lượng tab vượt ngồi phạm vi kích thước TabControl - Nếu False: Chỉ cho phép tab hiển thị dịng 193 TabPages Chứa tập các TabPage có TabControl TabCount Trả số lượng TabPage mà TabControl có SelectedTab Trả điều khiển TabPage chọn SelectedIndex Trả vị trí TabPage chọn Các kiện thường dùng TabControl: Bảng 6.8: Bảng mô tả kiện TabControl Sự kiện Mô tả SelectedIndexChanged Phát sinh người dùng chọn TabPage khác TabControl Ví dụ 6.3: Viết chương trình quản lý nhân hình 6.19 6.20 Chương trình gồm TagPage: TagPage Quản lý nhân viên TagPage Quản lý giáo viên TagPage quản lý nhân viên: Cho phép thêm, sửa xóa nhân viên Thơng tinh nhân viên cần quản lý bao gồm: Họ tên nhân viên, chức vụ nhân viên, hệ số lương lương TagPage Quản lý giáo viên: Cho phép thêm sửa xóa giáo viên Thơng tin giáo viên cần quản lý gồm: Họ tên giáo viên, chức vụ giáo viên, tiền giảng tiết, số tiết dạy học vị giáo viên Hình 6.19: Giao diện TabPage Quản lý nhân viên 194 Hình 6.20: Giao diện TagPage Quản lý giáo viên Hướng dẫn: Tạo TagPage Quản lý nhân viên: Bước 1: Thiết kế giao diện ban đầu Thêm điều khiển Label, TextBox, TabControl ListView vào form hình 6.21 tabControl1 textBox3 textBox1 textBox3 textBox2 listView Hình 6.21: Giao diện TabPage Quản lý nhân viên sau thêm điều khiển Bước 2: Thiết lập giá trị thuộc tính cho điều khiển cửa sổ Properties - Form1: 195 ... đổi kích thư? ?c để hiển thị hết điều khiển chứa bên Nếu False: GroupBox c? ? kích thư? ?c lập trình viên thiết lập Quy định c? ?ch th? ?c điều khiển thay đổi kích thư? ?c - GrowAndShrink: GroupBox co - giãn... radXanh_CheckedChanged(object sender, EventArgs e) { if (radXanh.Checked == true) { lblChuoiDinhDang.ForeColor = Color.Blue; } } - Sự kiện CheckedChanged radDo: private void radDo_CheckedChanged(object... (radDen.Checked == true) { lblChuoiDinhDang.ForeColor = Color.Black; } } - Sự kiện CheckedChanged radInDam: private void radInDam_CheckedChanged(object sender, EventArgs e) { if (radInDam.Checked