Bài giảng Lập trình giao diện - Graphical user interface (GUI)

ppt 190 trang ngocly 15/05/2021 630
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Lập trình giao diện - Graphical user interface (GUI)", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pptbai_giang_lap_trinh_giao_dien_graphical_user_interface_gui.ppt

Nội dung text: Bài giảng Lập trình giao diện - Graphical user interface (GUI)

  1. LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)
  2. Nội Dung ◼ Graphical User Interface (GUI) ◼ Event Driven Programming ◼ Ứng dụng Windows Form dùng C# ◼ Khuôn mẫu của ứng dụng Windows Form chuẩn ◼ Cách tạo ứng dụng Windows Form ❑ Tạo ứng dụng Form ❑ Chỉnh sửa form ❑ Thêm component vào form ❑ Viết phần xử lý cơ bản
  3. GUI Command line interface: CLI Text user interface: TUI Tương tác qua keyboard GUI dựa trên text Thực thi tuần tự Mức độ tương tác cao hơn
  4. GUI Graphical User Interface: GUI Tương tác qua giao diện đồ họa độ phân giải cao Đa số các hệ OS hiện đại đều dùng GUI Cho phép user dễ dàng thao tác
  5. GUIs ◼ Chương trình hiện đại đều dùng GUI ◼ Graphical: text, window, menu, button ◼ User: người sử dụng chương trình ◼ Interface: cách tương tác chương trình ◼ Thành phần đồ họa điển hình ❑ Window: một vùng bên trong màn hình chính ❑ Menu: liệt kê những chức năng ❑ Button: nút lệnh cho phép click vào ❑ TextBox: cho phép user nhập dữ liệu text
  6. GUI Application ◼ Windows Form là nền tảng GUI cho ứng dụng desktop ❑ (Ngược với Web Form ứng dụng cho Web) ❑ Single Document Interface (SDI) ❑ Multiple Document Interface (MDI) ◼ Các namespace chứa các lớp hỗ trợ GUI trong .NET ❑ System.Windows.Forms: ◼ Chứa GUI components/controls và form ❑ System.Drawing: ◼ Chức năng liên quan đến tô vẽ cho thành phần GUI ◼ Cung cấp chức năng truy cập đến GDI+ cơ bản
  7. Event- Driven Programming Cách truyền thống Event-Driven Programming Danh sách các lệnh thực thi Các đối tượng có thể kích hoạt sự tuần tự kiện và các đối tượng khác phản ứng với những sự kiện đó Việc kế tiếp xảy ra chính là lệnh tiếp theo trong danh sách Việc kế tiếp xảy ra phụ thuộc vào sự kiện kế tiếp Chương trình được thực thi bởi Luồng chương trình được điều máy tính kiển bởi sự tương tác User- Computer
  8. Event-Driven Programming ◼ Chương trình GUI thường dùng Event-Drive Programming ◼ Chương trình chờ cho event xuất hiện và xử lý ◼ Ví dụ sự kiện: ◼ Firing an event: khi đối tượng khởi tạo sự kiện ◼ Listener: đối tượng chờ cho sự kiện xuất hiện ◼ Event handler: phương thức phản ứng lại sự kiện
  9. Event-Driven Programming ◼ Minh họa xử lý trong form Click User nhập text vào texbox -> click invoke Button để add chuỗi nhập vào listbox Lấy dữ liệu từ textbox Add vào listbox Button đưa ra sự kiện click Form có event handler cho click của button
  10. Event-Driven Programming Event ◼ GUI-based events ❑ Mouse move ❑ Mouse click ❑ Mouse double-click ❑ Key press Danh sách ❑ Button click event cho Form ❑ Menu selection ❑ Change in focus ❑ Window activation ❑
  11. Windows Forms Application
  12. Windows Form App ◼ Sử dụng GUI làm nền tảng ◼ Event-driven programming cho các đối tượng trên form ◼ Ứng dụng dựa trên một “form” chứa các thành phần ❑ Menu ❑ Toolbar ❑ StatusBar ❑ TextBox, Label, Button ◼ Lớp cơ sở cho các form của ứng dụng là Form System.Windows.Forms. Form Namespace Class
  13. Minh họa WinForm App
  14. Tạo WinForm App Tạo project: Windows App
  15. Tạo WinForm App từ VS Windows App do 2 VS khởi tạo 1 3 1: form ứng dụng 2: control toolbox 3: Solution Explorer 4 4: Form properties
  16. Ứng Dụng WinForm đơn giản Form1.cs Lớp Form cơ sở Control kiểu Label Thiết kế form & control Add control vào form Chạy ứng dụng với Form1 làm form chính
  17. Các bước tạo ứng dụng WinForm cơ bản ◼ Tạo lớp kế thừa từ lớp Form cơ sở ◼ Bổ sung các control vào form ❑ Thêm các label, menu, button, textbox ◼ Thiết kế layout cho form (bố trí control) ❑ Hiệu chỉnh kích thước, trình bày, giao diện cho ◼ form ◼ Control chứa trong form ◼ Viết các xử lý cho các control trên form và các xử lý khác ◼ Hiển thị Form ❑ Thông qua lớp Application gọi phương thức Run Nên sử dụng IDE hỗ trợ thiết kế GUI!
  18. Form và control ◼ Tất cả các thành phần trên form đều là đối tượng ◼ Các class control ❑ System.Windows.Forms.Label ❑ System.Windows.Forms.TextBox ❑ System.Windows.Forms.Button ❑ object ◼ Các control là instance của các object lớp trên. object object object object
  19. Các thuộc tính của Form Property Description Default Name Tên của form sử dụng trong project Form1,Form2 AcceptButton Thiết lập button là click khi user nhấn Enter CancelButton Thiết lập button là click khi user nhấn Esc ControlBox Hiển thị control box trong caption bar True FormBorderStyle Biên của form: none, single, 3D, sizable Sizable StartPosition Xác định vị trí xuất hiện của form trên màn hình WindowsDefaultLocation Text Nội dung hiển thị trên title bar Form1, Form2, Form3 Font Font cho form và mặc định cho các control Method Description Close Đóng form và free resource Hide ẩn form Show Hiển thị form đang ẩn Event Description Load Xuất hiện trước khi form show
  20. Phương thức của lớp Form ◼ Các hành động có thể thực hiện trên form ❑ Activate: cho form nhận focus ❑ Close: đóng và giải phóng resource ❑ Hide: ẩn form ❑ Refresh: tô vẽ lại ❑ Show: cho form show ra màn hình (modeless) và activate ❑ ShowDialog: hiển thị dạng modal ❑ Find Dialog chính là dạng modeless ❑ Font dialog dạng modal
  21. Event của Form ◼ Tạo xử lý cho event ❑ Trong cửa sổ properties ❑ Chọn biểu tượng event ❑ Kích đúp vào tên event ◼ Event thường dùng ❑ Load: xuất hiện trước khi form xuất hiện lần đầu tiên ❑ Closing: xuất hiện khi form đang chuẩn bị đóng ❑ Closed: xuất hiện khi form đã đóng ❑ Resize: xuất hiện sau khi user resize form Tên event ❑ Click: xuất hiện khi user click lên nền form ❑ KeyPress: xuất hiện khi form có focus và user nhấn phím Trình xử lý nếu có
  22. Event của Form ◼ Ví dụ chương trình sẽ hỏi user xác nhận trước khi đóng ứng dụng. ❑ Kích đúp vào item FormClosing trong cửa sổ event ❑ Hàm Form1_FormClosing được tạo và gắn với sự kiện FormClosing ❑ Viết code cho event handler Form1_FormClosing this.FormClosing += new FormClosingEventHandler( this.Form1_FormClosing );
  23. Tổng quan controls ◼ Property & layout của control ❑ Anchor ❑ Docking ◼ Các control ❑ Label, textbox, button ❑ CheckBox, RadioButton, CheckedListBox, ❑ ListBox, Combobox, CheckListBox ❑ GroupBox, Panel & TabControl ❑ PictureBox, ImageList ❑ TrackBar ❑ NumericUpDown ❑ DomainUpDown ❑ ProgressBar ❑ MaskEditBox ❑ DateTimePicker ❑ MonthCalendar ❑ Timer ❑ ToolTip ❑ Mouse Event handling ❑ Keyboard event handling
  24. Tổng quan controls ◼ Control là một thành phần cơ bản trên form ◼ Có các thành phần ❑ Thuộc tính ❑ Phương thức ❑ Sự kiện ◼ Tất cả các control chứa trong namespace: System.Windows.Forms
  25. Windows Form Fig. 12.3 Components and controls for Windows Forms.
  26. Tổng quan controls ◼ Truy xuất đến thuộc tính của đối tượng • Cú pháp .
  27. Tổng quan controls ◼ Gán giá trị cho thuộc tính của đối tượng • Cú pháp . = Giá trị;
  28. Tổng quan controls ◼ Một số thuộc tính của control ❑ Text: mô tả text xuất hiện trên control ❑ Focus: phương thức chuyển focus vào control ❑ TabIndex: thứ tự của control nhận focus ◼ Mặc định được VS.NET thiết lập – Tuy nhiên người lập trình có thể điểu chỉnh ❑ Enable: thiết lập trạng thái truy cập của control ❑ Visible: ẩn control trên form, có thể dùng phương thức Hide ❑ Anchor: ◼ Neo giữ control ở vị trí xác định ◼ Cho phép control di chuyển theo một vị trí khi kích thước của đối tượng chứa nó thay đổi ❑ Size: xác nhận kích thước của control
  29. Thuộc tính controls Common Properties Description BackColor Màu nền của control BackgroundImage Ảnh nền của control ForeColor Màu hiển thị text trên form Enabled Xác định khi control trạng thái enable Focused Xác định khi control nhận focus Font Font hiển thị text trên control TabIndex Thứ tự tab của control TabStop Nếu true, user có thể sử dụng tab để select control Text Text hiển thị trên form TextAlign Canh lề text trên control Visible Xác định hiển thị control
  30. Tổng quan controls Lệnh gọi thực hiện 1 phương thức (method) của đối tượng ◼ Phương thức của đối tượng dùng để thực hiện một hành động liên quan đến đối tượng đó ◼ Cú pháp . ( [ Các tham số ] ) ◼ Ví dụ ❑ Phương thức di chuyển con trỏ vào 1 đối tượng .Focus();
  31. Tổng quan controls Sử dụng thư viện các lớp đối tượng Thời gian: ◼ Sử dụng lớp đối tượng DateTime ◼ Cú pháp DateTime. ( [ Các tham số ] ) Ví dụ: ◼ Lấy ngày giờ hiện hành của máy tính DateTime.Now ◼ Lấy giờ hiện hành của máy tính DateTime.Now.TimeOfDay
  32. Tổng quan controls Sử dụng thư viện các lớp đối tượng Màu sắc: ◼ Sử dụng lớp đối tượng Color ◼ Cú pháp Color. ◼ Ví dụ ❑ Màu xanh: Color.Blue ❑ Màu đỏ: Color.Red ❑ Màu trắng: Color.White ❑ Màu đen: Color.Black ❑
  33. Tổng quan controls Sử dụng thư viện các lớp đối tượng Màu sắc: ◼ Cách tô màu nền của Textbox .BackColor = Color.Màu; ◼ Cách tô màu chữ của Textbox .ForeColor = Color.Màu;
  34. Tổng quan controls Các hàm toán học ◼ Sử dụng lớp đối tượng Math ❑ Cú pháp Math. ( [ Các tham số ] ) ◼ Ví dụ ❑ Lấy căn bậc 2: Math.Sqrt(giá trị) ❑ Lũy thừa x^y: Math.Pow(x,y) ❑ Làm tròn số: Math.Round(giá trị) ❑ Tìm Max 2 số: Math.Max(giá trị 1, giá trị 2) ❑ Tìm Min 2 số: Math.Min(giá trị 1, giá trị 2) ❑
  35. Tổng quan controls Các hàm thường dùng ◼ Hàm xuất thông báo ❑ MessageBox.Show (“ ”); ❑ Ví dụ: MessageBox.Show (“Xin chào!”); ❑ MessageBox.Show (“ ”, “ ”); ❑ Ví dụ: MessageBox.Show (“Xin chào!”, “Welcome”); ◼ Hàm đổi chuỗi thành số nguyên ❑ int.Parse( ) ❑ Ví dụ: int.Parse (“123”) 123
  36. Control Layout - Anchor None Sizable FormBorderStyle Fixed3D FixedDialog FixedSingle
  37. Control Layout - Anchor ◼ Khi FormBorderStyle = Sizable, form cho phép thay đổi kích thước khi Runtime ❑ Sự bố trí của control có thể thay đổi theo ◼ Sử dụng thuộc tính Anchor ❑ Cho phép control phản ứng lại với thao tác resize của form ◼ Control có thể thay đổi vị trí tương ứng với việc resize của form ◼ Control cố định không thay đổi theo việc resize của form ❑ Các trạng thái neo ◼ Left: cố định theo biên trái ◼ Right: cố định theo biên phải ◼ Top: cố định theo biên trên ◼ Bottom: cố định theo biên dưới
  38. Control Layout - Anchor Button được neo biên trái Vị trí tương đối với biên trái không đổi Button tự do Di chuyển tương ứng theo kích thước mới
  39. Control Layout - Anchor ◼ Thiết lập Anchor cho control Chọn các biên để neo Biên được chọn neo, màu đậm
  40. Control Layout - Anchor Neo theo bốn phía
  41. Control Layout - Docking ◼ Các control có thể gắn (dock) với một cạnh nào đó của form, hoặc container của control. Windows Explorer ListView gắn bên phải TreeView gắn bên trái
  42. Control Layout - Docking Top Left Fill Right Bottom None
  43. Control Layout - Docking Dock = None Dock = Top TextBox Dock = Fill TextBox.Multiline = True Dock = Bottom
  44. Control Layout - Alignment Ảnh Ý nghĩa Canh lề trái, phải, trên, dưới Canh khoảng cách đều theo chiều dọc, ngang giữa các control Canh đều kích thước các control. ❖ Lưu ý: Kích thước của control được chọn đầu tiên trong danh sách các control chọn sẽ quyết định kích thước cho toàn bộ control
  45. Control Layout - Alignment Ảnh Ý nghĩa Các control được sắp canh liền tiếp nhau theo chiều ngang. Lưu ý: Khoảng cách giữa control đầu và cuối sẽ được tính sao cho các control còn lại cách đều Xóa khoảng cách canh đều sắp liền tiếp nhau theo chiều ngang Tăng hoặc giảm khoảng cách canh liền tiếp nhau theo chiều ngang
  46. Control Layout - Alignment Ảnh Ý nghĩa Các control được sắp canh liền tiếp nhau theo chiều dọc Xóa khoảng cách canh đều sắp liền tiếp nhau theo chiều dọc Tăng hoặc giảm khoảng cách canh liền tiếp nhau theo chiều dọc
  47. Control Layout - Alignment Ảnh Ý nghĩa Canh control ở giữa form theo chiều ngang (dọc) Xét control nằm chồng lên hoặc nằm dưới 2 control nằm lên nhau Thiết lập thứ tự Tab Index cho các control. Các control sẽ được đánh thứ tự từ 0->N. Khi người dùng nhấn Tab trong chương trình thì các control sẽ được focus theo thứ tự qui định.
  48. Các Control Label, TextBox, Button
  49. Label, TextBox, Button ◼ Label ❑ Cung cấp chuỗi thông tin chỉ dẫn ◼ Chỉ đọc ◼ Được định nghĩa bởi lớp Label ❑ Dẫn xuất từ Control ◼ TextBox ❑ Thuộc lớp TextBox ❑ Vùng cho phép user nhập dữ liệu ◼ Cho phép nhập dạng Password ◼ Button ❑ Cho phép cài đặt 1 hành động. ❑ Dẫn xuất từ ButtonBase
  50. Labels, TextBoxes and Buttons ◼ Labels (lbl) ❑ Provide text instruction ◼ Read only text, cannot by modified by user. ❑ Defined with class Label1 ◼ Derived from class Control lblMessage btnPush btnExit
  51. Label, TextBox, Button Label Thuộc tính thường dùng Font Font hiển thị của Label Text Nội dung text hiển thị TextAlign Canh lề chuỗi trình bày trên điều khiển ForeColor Màu text Visible Trạng thái hiển thị BorderStyle Kiểu đường viền của điều khiển FlatStyle Kiểu hiển thị điều khiển theo hệ thống hay chuẩn như đã thiết kế
  52. Labels, TextBoxes and Buttons ◼ Labels (lbl) ❑ Khai báo và khởi tạo đối tượng Lable ❑ Cách 1: Thiết kế ❑ Cách 2: Code void CreateControls() { Label lb = new Label(); lb.Text = "This is Lable Object"; lb this.Controls.Add(lb); } btnPush btnExit
  53. Label, TextBox, Button TextBox Thuộc tính thường dùng Font Font hiển thị của text Text Nội dung text hiển thị TextAlign Canh lề text ForeColor Màu text Visible Trạng thái hiển thị Enabled Vô hiệu hóa hay cho phép sử dụng MaxLength Số lượng ký tự lớn nhất cho phép nhập Password Giá trị được nhập thay thế bởi ký tự bạn khai báo trong thuộc tính này Readonly Giá trị true chỉ cho phép đọc giá trị WordWrap Tự động xuống dòng nếu chuỗi giá trị dài hơn kích thước của điều khiển
  54. Label, TextBox, Button TextBox Thuộc tính thường dùng AcceptsReturn Nếu true: nhấn enter tạo thành dòng mới trong chế độ multiline Multiline Nếu true: textbox ở chế độ nhiều dòng, mặc định là false ScrollBars Thanh cuộn cho chế độ multiline Event thường dùng TextChanged Kích hoạt khi text bị thay đổi, trình xử lý được khởi tạo mặc định khi kích đúp vào textbox trong màn hình design view MouseClick Xảy ra khi người sử dụng Click trên điều khiển TextBox
  55. Label, TextBox, Button ◼ Demo TextBox Double click vào Chuyển thành chữ hoa textbox để tạo event handler cho event TextChanged
  56. Labels, TextBoxes and Buttons ◼ Khai báo và khởi tạo đối tượng Text ❑ Cách 1: Thiết kế ❑ Cách 2: Code void CreateControls() { TextBox txt = new TextBox(); txt.Name = "txtHoLot"; txt.Text = "This is TextBox Object"; lblHoVaTen this.Controls.Add(txt); txtHoLot } lblHoLot txtTen lblTen btnHoLot
  57. Labels, TextBoxes and Buttons ◼ Button ❑ Derived from ButtonBase ❑ Used to run/activate an Event Procedure ❑ Click event Ví dụ: private void btnThoat_Click(object sender, EventArgs e) { this.Close(); }
  58. Label, TextBox, Button Button Thuộc tính thường dùng Text Chuỗi hiển thị trên bề mặt button FlatStyle Kiểu đường viền của điều khiển Button Image Chọn Image trong phần Resource để trình bày hình trên điều khiển Button TextAlign Canh lề diễn giải trên điều khiển
  59. Label, TextBox, Button Button Event thường dùng Click Kích hoạt khi user kích vào button, khai báo mặc định khi người lập trình kích đúp vào button trong màn hình Design View của Form. MouseClick Xảy ra khi người sử dụng Click trên điều khiển button bằng chuột CheckChanged Xảy ra khi người sử dụng vào điều khiển button TextChanged Xảy ra khi giá trị diễn giải trên điều khiển bị thay đổi EnabledChanged Xảy ra khi thuộc tính Enabled thay đổi giá trị VisibleChanged Xảy ra khi thuộc tính Visible thay đổi giá trị
  60. Labels, TextBoxes and Buttons ◼ Khai báo và khởi tạo đối tượng Button void CreateControls() { Button btn = new Button(); btn.Name = "btnSave"; btn.Text = "&Save"; this.Controls.Add(btn); }
  61. Thêm control vào form ◼ Kéo thả control vào form
  62. Code của phần design ◼ Phần code thiết kế Form1 được tạo tự động Form1.Designer.cs Chứa code khởi tạo control Khai báo các đối tượng control trên Form1
  63. Code của phần design InitializeComponent Tạo đối tượng Lần lượt khai báo các thuộc tính cho các control
  64. Code của phần design InitializeComponent Đưa các control vào danh sách control của Form1
  65. Sửa thuộc tính của control Đổi tên thành txtNum1 Thay đổi các giá trị qua cửa sổ properties -> VS tự cập nhật code
  66. Phần xử lý ◼ Khi click vào Add -> cộng 2 giá trị và xuất kết quả ◼ Thực hiện ❑ Button Add cung cấp sự kiện click ❑ Form sẽ được cảnh báo khi Add được click ❑ Form sẽ lấy dữ liệu từ 2 textbox và cộng -> kết quả ◼ Cơ chế event ❑ Button đưa ra sự kiện click: đối tượng publish ❑ Form quan tâm đến sự kiện click của button, Form có sẽ phần xử lý ngay khi button click. ❑ Phần xử lý của form gọi là Event Handler ❑ Form đóng vai trò là lớp subscribe
  67. Khai báo event handler ◼ Kích đúp vào button Add trên màn hình thiết kế cho phép tạo event handler cho sự kiện này. event DClick Cửa sổ quản lý event của BtnAdd
  68. Khai báo event handler Event handler cho button Add Cùng signature method với System.EventHandler
  69. Khai báo event handler InitializeComponent Sự kiện click Trình xử lý được gọi khi event xảy ra Delegate chuẩn cho event handler
  70. Viết phần xử lý ◼ Phần xử lý của Form1 khi button click ❑ Lấy giá trị của 2 textbox, cộng kết quả và xuất ra MessageBox
  71. Kiểm tra dữ liệu nhập ◼ Nếu user nhập vào chuỗi thì chương trình trên sẽ lỗi! ◼ Khắc phục: ❑ Cảnh báo user nhập không đúng dạng ❑ Xóa những ký tự không hợp lệ đó ◼ Sử dụng control ErrorProvider để cảnh báo lỗi khi user nhập không đúng ❑ Trong Design View: kéo ErrorProvider từ ToolBox/Component vào form ❑ Chặn xử lý sự kiện TextChanged khi user nhập liệu vào textbox ❑ Nếu nhập sai thiết lập lỗi cho control ErrorProvider cảnh báo!
  72. Bổ sung ErrorProvider Kéo thả ErrorProvider vào design view
  73. Xử lý sự kiện TextChanged của textBox Phần kiểm tra
  74. ErrorProvider cảnh báo Icon hiển thị lỗi Di chuyển chuột vào icon, tooltip xuất hiện
  75. Bài tập 1- Trang 1 lblHoVaTen txtHoLot lblHoLot txtTen lblTen btnHoLot
  76. Các Control CheckBox RadioButton
  77. CheckBox ◼ Control đưa ra một giá trị cho trước và user có thể ❑ Chọn giá trị khi Checked = true ❑ Không chọn giá trị: Checked = false ◼ Lớp đại diện CheckBox Properties Appearance Checked CheckedChanged Text ThreeState
  78. CheckBox CheckBox Thuộc tính thường dùng FlatStyle Kiểu đường viền Appearance Hình dạng của CheckBox Checked Trạng thái chọn(True) hay không (False) CheckState Trạng thái của điều khiển CheckBox đang chọn. Text Chuỗi trình bày với diễn giải của tùy chọn TextAlign Canh lề chuỗi diễn giải trên điều khiển ThreeState Cho phép hay không ba trạng thái Checked, unChecked, Indeterminate của điều khiển CheckBox
  79. CheckBox CheckBox Event thường dùng CheckChanged Kích hoạt khi người sử dụng Click vào điều khiển CheckBox MouseClick Xảy ra khi người sử dụng Click trên điều khiển CheckBox Click Xảy ra khi người sử dụng Click vào điều khiển CheckBox CheckStateChanged Xảy ra khi thuộc tính CheckState bị thay đổi TextChanged Xảy ra khi giá trị diễn giải của điều khiển bị thay đổi Enabled Xảy ra khi thuộc tính Enabled thay đổi giá trị Visible Xảy ra khi thuộc tính Visible thay đổi giá trị
  80. CheckBox ◼ ThreeState = true : cho phép thiết lập 3 trạng thái: ❑ Checkstate = Indeterminate: không xác định ❑ CheckState= Checked: chọn ❑ CheckState= Unchecked: không chọn Chưa chọn
  81. CheckBox ◼ Khai báo và khởi tạo đối tượng CheckBox void CreateControl() { CheckBox chk = new CheckBox(); chk.Name = "chkID"; chk.Text = "Full Detail"; chk.Checked = true; this.Controls.Add(chk); } 81
  82. RadioButton ◼ Cho phép user chọn một option trong số nhóm option ◼ Khi user chọn 1 option thì tự động option được chọn trước sẽ uncheck ◼ Các radio button chứa trong 1 container (form, GroupBox, Panel, TabControl) thuộc một nhóm. ◼ Lớp đại diện: RadioButton ◼ Khác với nhóm CheckBox cho phép chọn nhiều option, còn RadioButton chỉ cho chọn một trong số các option. Appearance Checked CheckedChanged Text
  83. RadioButton Nhóm RadioButton thứ 1 chứa trong GroupBox1 Nhóm RadioButton thứ 2 chứa trong GroupBox2
  84. RadioButton RadioButton Thuộc tính thường dùng FlatStyle Kiểu đường viền Appearance Hình dạng của RadioButton Checked Trạng thái chọn(True) hay không (False) Text Chuỗi trình bày với diễn giải của tùy chọn TextAlign Canh lề chuỗi diễn giải trên điều khiển
  85. RadioButton RadioButton Event thường dùng CheckChanged Kích hoạt khi người sử dụng Click vào điều khiển RadioButton MouseClick Xảy ra khi người sử dụng Click trên điều khiển RadioButton Click Xảy ra khi người sử dụng Click vào điều khiển RadioButton CheckChanged Xảy ra khi người sử dụng Click vào điều khiển RadioButton TextChanged Xảy ra khi giá trị diễn giải của điều khiển bị thay đổi Enabled Xảy ra khi thuộc tính Enabled thay đổi giá trị Visible Xảy ra khi thuộc tính Visible thay đổi giá trị
  86. RadioButton ◼ Khai báo và khởi tạo đối tượng RadioButton void CreateControl() { RadioButton rd = new RadioButton(); rd.Name = "rdMale"; rd.Text = "Male"; rd.Checked = true; this.Controls.Add(rd); }
  87. Bài Tập
  88. Các Control ListBox & ComboBox
  89. ListBox & ComboBox ◼ ListBox ❑ Cung cấp một danh sách các item cho phép user chọn ❑ ListBox cho phép hiển thị scroll nếu các item vượt quá vùng thể hiện của ListBox Properties Items SelectedItems MultiColumn ListBox Sorted SelectedIndex Text SelectedItem
  90. ListBox & ComboBox ◼ Method & Event Method ClearSelected ListBox GetSelected SetSelected Event FindString SelectedIndexChanged SelectedValueChanged
  91. ListBox & ComboBox ListBox & ComboBox Thuộc tính thường dùng BorderStyle Kiểu đường viền DataSource Tập dữ liệu vào điều khiển DisplayMember Tên của trường tương ứng với chuỗi trình bày trên điều khiển MultiColumn Cho phép trình bày danh sách phần tử trên điều khiển có nhiều cột Items Tập các phần tử trong điều khiển,bạn có thể sử dụng phương thức Add và AddRange để thêm chuỗi hay phần tử với khóa và giá trị vào điều khiển ComboBox ColumnWidth Chiều rộng của mỗi cột nếu phần tử trình bày trên điều khiển có nhiều cột
  92. ListBox & ComboBox ListBox & ComboBox Thuộc tính thường dùng Sorted Nếu chọn True thì danh sách xếp tăng dần theo giá trị ValueMember Giá trị ứng với khóa nếu phần tử có khóa và giá trị SelectionMode Cho phép chọn một hay nhiều phần tử cùng một lúc SelectedItems Trả về tập phần tử được chọn SelectedItem Gán và lấy giá trị object ứng với phần tử đang chọn SelectedValue Gán hay lấy giá trị ứng với phần tử kiểu object đang chọn SelectedIndex Gán hay lấy giá trị chỉ mục tương ứng với phần tử đang chọn
  93. ListBox & ComboBox ListBox & ComboBox Event thường dùng DoubleClick Xảy ra khi người sử dụng Double Click trên phần tử MouseClick Xảy ra khi người sử dụng Click trên điều khiển MouseDoubleClick Xảy ra khi người sử dụng Double Click trên điều khiển SelectedIndexChanged Xảy ra khi chỉ mục của phần tử thay đổi SelectedValueChange Xảy ra khi thay đổi giá trị của phần tử
  94. ListBox & ComboBox ListBox & ComboBox Event thường dùng DisplayMemberChanged Xảy ra khi tên cột khai báo trong thuộc tính DisplayMember thay đổi ValueMemberChanged Xảy ra khi tên cột khai báo trong thuộc tính ValueMember thay đổi EnabledChanged Xảy ra khi thuộc tính Enabled thay đổi giá trị VisibleChanged Xảy ra khi thuộc tính Visible thay đổi giá trị Phương thức Add Thêm chuỗi hay đối tượng vào điều khiển AddRange Thêm tập gồm chuỗi hay nhiều đối tượng vào điều khiển
  95. ListBox & ComboBox ◼ Khai báo và khởi tạo đối tượng ComboBox void CreateControls() { ListBox lst = new ListBox(); lst.Name = "lstMonHoc"; lst.Text = "Lập Trinh C#"; lst.Items.Add("Console"); lst.Items.Add("Window Form"); lst.Items.Add("Hướng đối tượng"); lst.Location = new System.Drawing.Point(200, 300); this.Controls.Add(lst); }
  96. ListBox & ComboBox ◼ Thuộc tính Items cho phép thêm item vào ListBox Cho phép thêm item Danh sách item trong màn hình thiết kế form
  97. ListBox & ComboBox ◼ ListBox hiển thị dạng Multi Column Hiển thị nhiều cột
  98. ListBox & ComboBox ◼ Demo ListBox Kiểm tra xem chuỗi nhập có trong list box? - Nếu có: select item đó - Ngược lại: thêm chuỗi mới vào list box
  99. ListBox & ComboBox ◼ Sự kiện SelectedIndexChanged Mỗi khi kích chọn vào item trong listbox sẽ xóa item được chọn tương ứng SelectedIndexChanged
  100. ListBox & ComboBox ◼ ComboBox ❑ Kết hợp TextBox với một danh sách dạng drop down ❑ Cho phép user kích chọn item trong danh sách drop down Items Sorted DropDownStyle ComboBox MaxDropDownItems Text AutoCompleteMode DropDownHeight
  101. ListBox & ComboBox ListBox & ComboBox Thuộc tính thường dùng FlatStyle Kiểu đường viền DataSource Tập dữ liệu vào điều khiển DisplayMember Tên của trường tương ứng với chuỗi trình bày trên điều khiển DropDownStyle Kiểu trình bày danh sách phần tử, mặc định là Dropdown(cho phép thêm mới chuỗi),Dro[downList chỉ cho phép chọn trong danh sách, Simple(dạng danh sách) Items Tập các phần tử trong điều khiển, bạn có thể sử dụng phương thức Add và AddRange để thêm chuỗi hay phần tử với khóa và giá trị vào điều khiển ComboBox MaxDropDownItems Số phần tử lớn nhất có thể liệt kê
  102. ListBox & ComboBox ListBox & ComboBox Thuộc tính thường dùng MaxLength Số lượng ký tự lớn nhất cho phép nhập, nếu giá trị nhập vào <0 thì mặc định là 0 ValueMember Giá trị ứng với khóa nếu phần tử có khóa và giá trị Text Giá trị chuỗi ứng với nhãn đang chọn SelectedText Gán hay lấy giá trị chuỗi ứng với nhãn đang chọn SelectedItem Gán và lấy giá trị object ứng với phần tử đang chọn SelectedValue Gán hay lấy giá trị ứng với phần tử object đang chọn SelectedIndex Gán hay lấy giá trị chỉ mục tương ứng với phần tử đang chọn
  103. ListBox & ComboBox ListBox & ComboBox Event thường dùng TextChanged Xảy ra khi chuỗi trên điều khiển thay đổi MouseClick Xảy ra khi người sử dụng Click trên điều khiển MouseDoubleClick Xảy ra khi người sử dụng Double Click trên điều khiển SelectedIndexChanged Xảy ra khi chỉ mục của phần tử thay đổi TextChanged Xảy ra khi chuỗi trên điều khiển bị thay đổi SelectedValueChange Xảy ra khi thay đổi giá trị của phần tử SelectedChangeCommited Xảy ra khi người sử dụng kết thúc quá trình chọn phần tử trên điều khiển
  104. ListBox & ComboBox ListBox & ComboBox Event thường dùng DisplayMemberChanged Xảy ra khi tên cột khai báo trong thuộc tính DisplayMember thay đổi ValueMemberChanged Xảy ra khi tên cột khai báo trong thuộc tính ValueMember thay đổi EnabledChanged Xảy ra khi thuộc tính Enabled thay đổi giá trị VisibleChanged Xảy ra khi thuộc tính Visible thay đổi giá trị Phương thức Add Thêm chuỗi hay đối tượng vào điều khiển AddRange Thêm tập gồm chuỗi hay nhiều đối tượng vào điều khiển
  105. ListBox & ComboBox ◼ Khai báo và khởi tạo đối tượng ComboBox void CreateControls() { ComboBox cb = new ComboBox(); cb.Name = "cboCountry"; cb.Text = "Viet Nam"; this.Controls.Add(cb); }
  106. ListBox & ComboBox ◼ DropDownStyle
  107. ListBox & ComboBox Bổ sung item trong màn hình design //Sử dụng phương thức ADD Combobox view for(int i=1; i<=12;i++) cboThu.Items.Add("Mon "+i.ToString());
  108. ListBox & ComboBox Mỗi khi kích chọn một item hiển thị item được chọn trên MessageBox
  109. ListBox & ComboBox AutoComplete ◼ Tính năng AutoComplete Gõ “Ng” AutoCompleteMode AutoCompleteSource
  110. ListBox & ComboBox ◼ Sử dụng biến cố SelectionChangeCommitted private void cboThu_SelectionChangeCommitted(object sender, EventArgs e) { MessageBox.Show(cboThu.SelectedText, "LẬP TRÌNH C#"); MessageBox.Show(cboThu.SelectedItem.ToString(), "C# căn bản"); }
  111. ListBox & ComboBox ◼ Sử dụng phương thức AddRange string[] week = new string[7] { "Sun", "Mon", "TUE", "Wed", "Thu ", "Fri", "Sat" }; cboTM.Items.AddRange(week); cboTM.DisplayMember = "Name"; cboTM.ValueMember = "Value"; ◼ Sử dụng thuộc tính SelectedValue private void cboThu_SelectedValueChanged(object sender, EventArgs e) { MessageBox.Show("Value := " + Convert.ToString(cboThu.SelectedValue), "ComBo Box"); }
  112. CheckedListBox ◼ Tương tự như list box nhưng mỗi item sẽ có thêm check box. Properties CheckedItems CheckedIndices SelectedIndexChanged SelectedIndices SelectedValueChanged SelectedIndices MultiColumn Method SelectionMode ClearSelected Items SetSelected
  113. CheckedListBox CheckedListBox Thuộc tính thường dùng Ý nghĩa BorderStyle Kiểu dường viền của điều khiển ChoobcaLasiBox MultiColumn Cho phép trình bày danh sách phân tử trên điều khiển có nhiều cột ColumnWidth Chiều rộng của mỗi cột nếu phần tử trình bày trên điều khiển có nhiều cột Items Tập các phần tử có trong điều khiển, bạn có thể sử dụng phương thức Add và AddRange để thêm chuỗi hay phần tử với khóa và giá trị vào điều khiển CheckedListBox SelectionMode Cho phép chọn một hay nhiều phần tử cùng một lúc Sorted Nếu chọn True thì danh sách sắp xếp tăng dần theo giá trị SelectedItems Trả về tập phần tử chọn
  114. CheckedListBox ◼ Thuộc tính Items lưu trữ danh sách item ◼ Có thể bổ sung vào thời điểm ❑ Design time ❑ Run time Item được check Item được select
  115. CheckedListBox ◼ Khởi tạo và khai báo đối tượng CheckedListBox void CreateControls() { CheckedListBox chkl = new CheckedListBox(); chkl.Name = "chkCertificate"; chkl.Sorted = true; chkl.Items.Add("B.A"); chkl.Items.Add("M.B.A"); chkl.Location = new System.Drawing.Point(300, 400); this.Controls.Add(chkl); }
  116. CheckedListBox ◼ MultiColumn = true Các item được tổ chức theo nhiều cột
  117. CheckedListBox ◼ Sự kiện SelectedIndexChanged
  118. Các Control GroupBox, Panel & TabControl
  119. GroupBox & Panel ◼ Bố trí controls trên GUI ◼ GroupBox ❑ Hiển thị một khung bao quanh một nhóm control ❑ Có thể hiển thị một tiêu đề ◼ Thuộc tính Text ❑ Khi xóa một GroupBox thì các control chứa trong nó bị xóa theo ❑ Lớp GroupBox kế thừa từ System.Windows.Forms.Control ◼ Panel ❑ Chứa nhóm các control ❑ Không có caption ❑ Có thanh cuộn (scrollbar) ◼ Xem nhiều control khi kích thước panel giới hạn
  120. GroupBox & Panel Groupbox Mô tả Thuộc tính thường dùng Controls Danh sách control chứa trong GroupBox. Text Caption của GroupBox Panel Thuộc tính thường dùng AutoScroll Xuất hiện khi panel quá nhỏ để hiển thị hết các control, mặc định là false BorderStyle Biên của panel, mặc định là None, các tham số khác như Fixed3D, FixedSingle Controls Danh sách control chứa trong panel
  121. GroupBox & Panel ◼ Minh họa GroupBox groupBox1 chứa 2 control textBox1 và button1 textBox2 và button2 chứa trong Controls của Form
  122. GroupBox & Panel ◼ Minh họa Panel scroll
  123. TabControl ◼ Dạng container chứa các control khác ◼ Cho phép thể hiện nhiều page trên một form duy nhất ◼ Mỗi page chứa các control tương tự như group control khác. ❑ Mỗi page có tag chứa tên của page ❑ Kích vào các tag để chuyển qua lại giữa các page ◼ Ý nghĩa: ❑ Cho phép thể hiện nhiều control trên một form ❑ Các control có cùng nhóm chức năng sẽ được tổ chức trong một tab (page)
  124. TabControl ◼ TabControl có thuộc tính TabPages ❑ Chứa các đối tượng TabPage TabPage TabControl TabPage
  125. TabControl ◼ Thuộc tính Appearance Normal Buttons FlatButton
  126. TabControl ◼ Thuộc tính, phương thức & sự kiện thường dùng Properties TabPages Method TabCount SelectTab SelectedTab DeselectTab Multiline Event SelectedIndex SelectedIndexChanged
  127. TabControl ◼ Thêm/Xóa TabPage Kích chuột phải Thêm/Xóa TabPage
  128. TabControl ◼ Chỉnh sửa các TabPage ❑ Chọn thuộc tính TabPages của TabControl ❑ Sử dụng màn hình TabPage Collection Editor để chỉnh sửa
  129. PictureBox ◼ Sử dụng để hiển thị ảnh dạng bitmap, metafile, icon, JPEG, GIF. ◼ Sử dụng thuộc tính Image để thiết lập ảnh lúc design hoặc runtime. ◼ Các thuộc tính ❑ Image: ảnh cần hiển thị ❑ SizeMode: ◼ Normal ◼ StretchImage ◼ AutoSize ◼ CenterImage ◼ Zoom
  130. PictureBox 5 pictureBox với các SizeMode tương ứng
  131. ImageList ◼ Cung cấp tập hợp những đối tượng image cho các control khác sử dụng ❑ ListView ❑ TreeView ◼ Các thuộc tính thường dùng ❑ ColorDepth: độ sâu của màu ❑ Images: trả về ImageList.ImageCollection ❑ ImageSize: kích thước ảnh ❑ TransparentColor: xác định màu sẽ transparent
  132. ImageList ◼ Các bước sử dụng ImageList ❑ Kéo control ImageList từ ToolBox thả vào Form ❑ Thiết lập kích thước của các ảnh: ImageSize ❑ Bổ sung các ảnh vào ImageList qua thuộc tính Images ❑ Sử dụng ImageList cho các control ◼ Khai báo nguồn image là image list vừa tạo cho control ❑ Thường là thuộc tính ImageList ◼ Thiết lập các item/node với các ImageIndex tương ứng ❑ Việc thiết lập có thể ở màn hình design view hoặc code view
  133. ImageList ◼ Tạo ImageList
  134. ImageList ◼ Sử dụng ImageList trong ListView listView1 Khai báo ImageList cho ListView Hiển thị dạng small icon
  135. ImageList ◼ Thêm Item Khai báo image cho item qua ImageIndex
  136. ImageList ◼ Demo Mỗi item sẽ có ảnh theo đúng thứ tự ImageIndex được khai báo trong ImageList
  137. TrackBar ◼ Cho phép user thiết lập giá trị trong khoảng cố định cho trước ◼ Thao tác qua thiết bị chuột hoặc bàn phím Properties Minimum Maximum ValueChanged Scroll TickFrequency TickStyle Value SetRange
  138. TrackBar public void AddTrackBar() { TrackBar tb1 = new TrackBar(); Tạo thể hiện tb1.Location = new Point(10, 10); tb1.Size = new Size(250, 50); tb1.Minimum = 0; Thiết lập khoảng: 0 - 100 tb1.Maximum = 100; Số vị trí di chuyển khi dùng tb1.SmallChange = 1; phím mũi tên tb1.LargeChange = 5; Số vị trí di chuyển tb1.TickStyle = TickStyle.BottomRight; khi dùng phím Page Kiểu stick ở bên tb1.TickFrequency = 10; dưới/bên phải track tb1.Value = 10; Controls.Add(tb1); Số khoảng cách giữa } các tick mark
  139. TrackBar ◼ Bổ sung Label hiển thị giá trị của TrackBar
  140. NumericUpDown ◼ Cho phép user chọn các giá trị trong khoảng xác định thông qua ❑ Nút up & down ❑ Nhập trực tiếp giá trị ◼ Các thuộc tính ❑ Minimum ❑ Maximum ❑ Value ❑ Increment ◼ Sự kiện ❑ ValueChanged ◼ Phương thức ❑ DownButton ❑ UpButton
  141. NumericUpDown ◼ Đoạn code thêm control NumericUpDown public void AddNumericUpDown() { NumericUpDown numUpDn = new NumericUpDown(); numUpDn.Location = new Point(50, 50); numUpDn.Size = new Size(100, 25); numUpDn.Hexadecimal = true; // hiển thị dạng hexa numUpDn.Minimum = 0; // giá trị nhỏ nhất numUpDn.Maximum = 255; // giá trị lớn nhất numUpDn.Value = 0xFF; // giá trị khởi tạo numUpDn.Increment = 1; // bước tăng/giảm Controls.Add(numUpDn); // thêm control vào ds control của form }
  142. NumericUpDown ◼ Demo Tăng giảm giá trị Hiển thị giá trị Hexa Nhập trực tiếp giá trị
  143. DomainUpDown ◼ Cho phép user chọn item trong số danh sách item thông qua ❑ Button Up & Down ❑ Nhập từ bàn phím ◼ Properties ❑ Items: danh sách item ❑ ReadOnly: true chỉ cho phép thay đổi giá trị qua Up & Down ❑ SelectedIndex: chỉ mục của item đang chọn ❑ SelectedItem: item đang được chọn ❑ Sorted: sắp danh sách item ❑ Text: text đang hiển thị trên DomainUpDown. ◼ Event ❑ SelectedItemChanged
  144. DomainUpDown ◼ Nhập item cho DomainUpDown String Collection Editor Cho phép nhập item
  145. ProgressBar ◼ Hiển thị tiến độ thực hiện của một công việc nào đó ◼ Các thuộc tính ❑ Minimum: giá trị nhỏ nhất ❑ Maximum: giá trị lớn nhất ❑ Step: số bước tăng khi gọi hàm PerformStep ❑ Value: giá trị hiện tại ❑ Style: kiểu của progress bar ◼ Phương thức ❑ PerformStep(): tăng thêm step ❑ Increment(int value): tăng vị trí hiện tại của tiến độ với giá trị xác định
  146. ProgressBar ◼ Khai báo thanh tiến độ 0-100, step = 10 Max = 100 Min = 0 Step = 10
  147. ProgressBar
  148. ProgressBar ◼ Demo Thể hiện trực quan tiến độ Tăng tiến độ theo step và cập nhật lại % hoàn thành lên label
  149. MaskEditBox ◼ Control này được sử dụng để qui định dạng thức cho dữ liệu nhập. ◼ Properties: ❑ Mask: Thiết lập mặt nạ cho MaskEditBox. ◼ Sử dụng các Mark có sẳn:
  150. MaskEditBox • Custom: Thiết lập giá trị Mask tùy ý Thành phần mask Ý nghĩa 0 Số. Yêu cầu bắt buộc phải nhập số từ 0-9 9 Số hoặc khoảng trắng (Optional) # Số hoặc khoảng trắng (Optional). Có thể nhập dấu + hoặc - L Kí tự [a z] hoặc [A Z] (Bắt buộc) ? Kí tự [a z] hoặc [A Z] (Không bắt buộc) , Đơn vị phần ngàn (1,234) . Đơn vị phần lẻ (0.32)
  151. MaskEditBox ◼ Properties: ❑ Mask: Thiết lập mặt nạ cho MaskEditBox. ❑ MaskCompleted: trả về giá trị true/false cho biết các ký tự bắt buột trong mark có nhập đủ hay không ❑ MaskFull: trả về giá trị true/false cho biết các ký tự tùy chọn và bắt buột trong mark có nhập đủ hay không ❑ Prompt Char: ký tự hiển thị trong textbox giúp người sử dụng biết nơi cần nhập nội dung
  152. MaskEditBox ◼ Properties: ❑ TextMaskFormat: Qui định nội dung của textbox có bao gồm các literal và prompt hay không: ◼ ExcludePromptAndLiterals: chỉ lấy nội dung do user nhập vào ◼ IncludeLiterals: nội dung bao gồm dữ liệu do user nhập và literal có trong Mark ◼ IncludePrompt: nội dung bao gồm dữ liệu do user nhập và promt có trong Mark ◼ IncludePromptAndLiterals: nội dung bao gồm dữ liệu do user nhập, literal và promt có trong Mark Prompt Literals
  153. DateTimePicker ◼ Cho phép chọn ngày trong khoảng xác định thông qua giao diện đồ họa dạng calendar ◼ Kết hợp ComboBox và MonthCalendar ◼ Properties ❑ Format: định dạng hiển thị ◼ long, short, time, custom ❑ CustomFormat: ◼ dd: hiển thị 2 con số của ngày ◼ MM: hiển thị 2 con số của tháng ◼ yyyy: hiển thị 4 con số của năm ◼ (xem thêm MSDN Online) ❑ MaxDate: giá trị ngày lớn nhất ❑ MinDate: giá trị ngày nhỏ nhất ❑ Value: giá trị ngày hiện tại đang chọn
  154. DateTimePicker private void AddDateTimePicker() { DateTimePicker DTPicker = new DateTimePicker(); DTPicker.Location = new Point(40, 80); DTPicker.Size = new Size(160, 20); DTPicker.DropDownAlign = LeftRightAlignment.Right; DTPicker.Value = DateTime.Now; DTPicker.Format = DateTimePickerFormat.Custom; DTPicker.CustomFormat = "'Ngày' dd 'tháng' MM 'năm' yyyy"; this.Controls.Add(DTPicker); }
  155. DateTimePicker ◼ Demo Định dạng xuất: 'Ngày' dd 'tháng' MM 'năm' yyyy Kích drop down để hiện thị hộp chọn ngày Chọn ngày trong khoảng cho trước
  156. MonthCalendar ◼ Cho phép user chọn một ngày trong tháng hoặc nhiều ngày với ngày bắt đầu và ngày kết thúc. ◼ Một số thuộc tính thông dụng ❑ MaxDate, MinDate ❑ SelectionStart: ngày bắt đầu chọn ❑ SelectionEnd: ngày kết thúc ◼ Sinh viên tự tìm hiểu thêm
  157. Timer ◼ Bộ định thời gian, thiết lập một khoảng thời gian xác định (interval) và khi hết khoảng thời gian đó Timer sẽ phát sinh sự kiện tick. Properties Enabled Interval Stop Tick
  158. Timer ◼ Hiển thị giờ hệ thống Hiển thị thời gian Enable sự kiện Tick Khoảng thời gian chờ giữa 2 lần gọi Tick
  159. Timer ◼ Sự kiện Tick Khai báo trình xử lý sự kiện Tick
  160. Timer ◼ Demo Mỗi giây sự kiện Tick phát sinh. Trình xử lý của Tick sẽ lấy giờ hệ thống và hiển thị lên Label
  161. ToolTip ◼ Cung cấp chức năng hiển thị một khung text nhỏ khi user di chuyển chuột vào control bất kỳ ◼ Khung text chứa nội dung mô tả ý nghĩa của control ◼ Cách sử dụng ❑ Từ ToolBox kéo ToolTip thả vào form ❑ Kích chọn control muốn thêm tooltip ❑ Trong cửa sổ Properties của control sẽ có thuộc tính ToolTip. Thêm text vào thuộc tính này để hiển thị khi tooltip xuất hiện.
  162. ToolTip ◼ Tạo ToolTip
  163. ToolTip ◼ Khai báo Tooltip cho textbox trong Design View Nội dung Tooltip
  164. ToolTip ◼ Khai báo tooltip cho button Nhập nội dung Tooltip cần hiển thị
  165. ToolTip ◼ Khai báo tooltip cho listbox bằng code
  166. ToolTip ◼ Demo ToolTip xuất hiện khi user di chuyển chuột vào vùng control
  167. Các Event Mouse Event
  168. Mouse Event ◼ Mouse là thiết bị tương tác thông dụng trên GUI ◼ Một số các thao tác phát sinh từ mouse ❑ Di chuyển ❑ Kích chuột ◼ Ứng dụng cần xử lý sự kiện chuột nào sẽ khai báo trình xử lý tương ứng ◼ Lớp MouseEventArgs được sử dụng để chứa thông tin truyền vào cho trình xử lý sự kiện mouse. ◼ Mỗi trình xử lý sự kiện sẽ có tham số là đối tượng object và đối tượng MouseEventArgs (hoặc EventArgs)
  169. Mouse Event ◼ Tham số cho sự kiện liên quan đến mouse MouseEventArgs Số lần kích chuột Button được nhấn Tọa độ (x,y) của con trỏ chuột
  170. Mouse Event Sự kiện chuột với tham số kiểu EventArgs MouseEnter Xuất hiện khi con trỏ chuột đi vào vùng biên của control MouseLeave Xuất hiện khi con trỏ chuột rời khỏi biên của control Sự kiện chuột với tham số kiểu MouseEventArgs MouseDown/ Xuất hiện khi button được nhấn/thả và con trỏ chuột MouseUp đang ở trong vùng biên của control MouseMove Xuất hiện khi chuột di chuyển và con trỏ chuột ở trong vùng biên của control
  171. Mouse Event Thuộc tính của lớp MouseEventArgs Button Button được nhấn {Left, Right, Middle, none} có kiểu là MouseButtons Clicks Số lần button được nhấn X Tọa độ x của con trỏ chuột trong control Y Tọa độ y của con trỏ chuột trong control
  172. Mouse Event ◼ MouseMove
  173. Mouse Event ◼ Demo Vị trí hiện tại của con trỏ chuột Hiển thị tọa độ hiện tại của con trỏ chuột
  174. Mouse Event ◼ Demo thao tác: kích chuột trái tại một điểm A, giữ chuột trái và di chuyển chuột, chương trình sẽ vẽ đường thẳng từ điểm A đến vị trí hiện tại chuột. ◼ Các sự kiện cần xử lý ❑ MouseDown: ◼ Xác định điểm A ban đầu ❑ MouseMove ◼ Kiểm tra nếu Left button của chuột đang giữ ❑ Sử dụng Graphics để vẽ đường thẳng từ A đến vị trí hiện tại
  175. Mouse Event ◼ Bước 1: ❑ Tạo biến lưu trữ điểm A khi user kích chuột trái ❑ Biến pA có kiểu Point là biến thành viên của Form1 Lớp Form1 Biến pA lưu giữ tọa độ khi chuột trái được click
  176. Mouse Event ◼ Bước 2 ❑ Khai báo xử lý sự kiện MouseDown trong Form1 ◼ Trong cửa sổ event của Form1, kích đúp vào sự kiện MouseDown Lưu lại điểm được nhấn chuột
  177. Mouse Event ◼ Bước 3 ❑ Cài đặt xử lý sự kiện MouseMove ◼ Kiểm tra nếu LeftButton được nhấn ❑ Vẽ đường thẳng từ pA đến vị trí hiện tại
  178. Các Event Keyboard Event
  179. Keyboard Event ◼ Phát sinh khi một phím được nhấn hoặc thả ◼ Có 3 sự kiện ❑ KeyPress ❑ KeyUp ❑ KeyDown ◼ KeyPress phát sinh kèm theo với mã ASCII của phím được nhấn ◼ KeyPress không cho biết trạng thái các phím bổ sung {Shift, Alt, Ctrl } ◼ Sử dụng KeyUp & KeyDown để xác định trạng thái các phím bổ sung.
  180. Keyboard Event Sự kiện với tham số kiểu KeyEventArgs KeyDown Phát sinh khi phím được nhấn KeyUp Phát sinh khi phím được thả Sự kiện với tham số kiểu KeyPressEventArgs KeyPress Khởi tạo khi phím được nhấn Thuộc tính của lớp KeyPressEventArgs KeyChar Chứa ký tự ASCII của phím được nhấn Handled Cho biết sự kiện KeyPress có được xử lý chưa Thuộc tính của lớp KeyEventArgs Alt, Control, Shift Trạng thái các phím bổ sung Handled Cho biết sự kiện đã xử lý
  181. Keyboard Event Thuộc tính của lớp KeyEventArgs (tt) KeyCode Trả về mã ký tự được định nghĩa trong Keys enumeration KeyData Chứa mã ký tự với thông tin phím bổ sung KeyValue Trả về số int, đây chính là mã Windows Virtual Key Code Modifier Trả về giá trị của phím bổ sung
  182. Keyboard Event ◼ Keys Enumeration
  183. Keyboard Event ◼ Minh họa các sự kiện: KeyPress, KeyDown, KeyUp ❑ Khi user nhấn một phím ◼ Bắt sự kiện KeyPress: xuất ra phím được nhấn ◼ Bắt sự kiện KeyDown: xuất ra các tham số trong KeyEventArgs ❑ Khi user thả phím ◼ Xóa các thông tin mô tả phím được nhấn trong các label ◼ Cách thực hiện ❑ Tạo một form minh họa ❑ Thiết kế trên form có 2 Label: ◼ lblChar: hiển thị ký tự được nhấn trong KeyPress ◼ lblKeyInfo: hiển thị các thông tin của KeyEventArgs khi KeyDown
  184. Keyboard Event ◼ Bước 1: tạo Windows Form như hình mô tả Label chứa ký tự được nhấn trong sự kiện KeyPress Label chứa thông tin mã ký tự được nhấn trong sự kiện KeyDown
  185. Keyboard Event ◼ Bước 2: ❑ Tạo KeyPress Event Handling cho form
  186. Keyboard Event ◼ Bước 3: ❑ Tạo KeyDown Event Handling cho form
  187. Keyboard Event ◼ Demo
  188. Keyboard Event ◼ CT Calculator (BT3) mở rộng cho phép xử lý các phím ❑ Form nhận xử lý thông điệp KeyDown ◼ Xác định các phím tương ứng rồi gọi sự kiện click của button ◼ VD: user gõ phím 1, tương tự như button “1” được nhấn ◼ Cách thực hiện ❑ Khai báo trình xử lý sự kiện KeyDown cho Form chính ❑ Thiết lập thuộc tính KeyPreview cho Form để nhận sự kiện bàn phím.
  189. Keyboard Event ◼ Viết phần xử lý cho sự kiện KeyDown ❑ Xác định các phím tương ứng để gọi sự kiện click của các button. Gọi event Click của button “1” Phím '=' được nhấn Phím ‘+' được nhấn
  190. Tóm tắt ◼ Thiết kế layout trên form ❑ Anchor ❑ Dock các control ◼ Các control trên form ❑ Control nhập liệu ❑ Control chọn giá trị ❑ Container control ❑ Component ❑ Advanced control ◼ Mouse event ◼ Keyboard event