lẬp trÌnh giao diỆn graphical user interface (gui)
DESCRIPTION
Chương 3. LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI). 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 - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/1.jpg)
1
LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)
Chương 3
![Page 2: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/2.jpg)
2
Nội DungNộ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
![Page 3: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/3.jpg)
3
GUIGUI
Command line interface: CLICommand line interface: CLI Text user interface: TUIText user interface: TUI
Tương tác qua keyboardThực thi tuần tự
GUI dựa trên textMức độ tương tác cao hơn
![Page 4: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/4.jpg)
4
GUIGUI
Tương tác qua giao diện đồ họa độ phân giải cao
Graphical User Interface: GUI
Đa số các hệ OS hiện đại đều dùng GUI
Cho phép user dễ dàng thao tác
![Page 5: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/5.jpg)
5
GUIsGUIs
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
![Page 6: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/6.jpg)
6
GUI ApplicationGUI 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
![Page 7: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/7.jpg)
7
Event- Driven Programming Event- Driven Programming
Danh sách các lệnh thực thi tuần tự
Việc kế tiếp xảy ra chính là lệnh tiếp theo trong danh sách
Chương trình được thực thi bởi máy tính
Các đối tượng có thể kích hoạt sự 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 phụ thuộc vào sự kiện kế tiếp
Luồng chương trình được điều kiển bởi sự tương tác User-
Computer
Cách truyền thống Event-Driven Programming
![Page 8: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/8.jpg)
8
Event-Driven ProgrammingEvent-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
![Page 9: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/9.jpg)
9
Event-Driven ProgrammingEvent-Driven Programming
Minh họa xử lý trong form
ClickUser nhập text vào texbox -> click Button để add chuỗi nhập vào listbox Lấy dữ liệu từ
textboxAdd vào listbox
invoke
Button đưa ra sự kiện clickForm có event handler cho click của button
![Page 10: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/10.jpg)
10
Event-Driven ProgrammingEvent-Driven Programming
GUI-based events Mouse move Mouse click Mouse double-click Key press Button click Menu selection Change in focus Window activation …
Event
Danh sách event cho Form
![Page 11: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/11.jpg)
11
Windows Forms ApplicationWindows Forms Application
![Page 12: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/12.jpg)
12
Windows Form AppWindows 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à FormForm
System.Windows.Forms. FormSystem.Windows.Forms. Form
Namespace Class
![Page 13: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/13.jpg)
13
Minh họa WinForm AppMinh họa WinForm App
![Page 14: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/14.jpg)
14
Tạo WinForm AppTạo WinForm App
Tạo project: Windows App
![Page 15: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/15.jpg)
15
Tạo WinForm App từ VS. 2005 Tạo WinForm App từ VS. 2005 (3)(3)
Windows App doVS.2005 khởi tạo12
3
4
1: form ứng dụng2: control toolbox3: Solution Explorer4: Form properties
![Page 16: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/16.jpg)
16
Ứng Dụng WinForm đơn giảnỨng Dụng WinForm đơn giản
Lớp Form cơ sở
Control kiểu Label
Chạy ứng dụng với Form1 làm form chính
Thiết kế form & control
Add control vào form
Form1.cs
![Page 17: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/17.jpg)
17
CCáác bước tạo ứng dụng WinForm cơ c bước tạo ứng dụng WinForm cơ bảnbả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!
![Page 18: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/18.jpg)
18
Form vForm vàà control 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 …
Các control là instance của các
lớp trên.object
object
object
object
object
object
![Page 19: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/19.jpg)
19
CCáác thuộc tc thuộc tíính của Formnh của Form
Property Description DefaultName 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 DescriptionClose Đóng form và free resource
Hide ẩn form
Show Hiển thị form đang ẩn
Event DescriptionLoad Xuất hiện trước khi form show
![Page 20: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/20.jpg)
20
Phương thức của lớp FormPhươ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
![Page 21: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/21.jpg)
21
Event của FormEvent 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 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
Tên event
Trình xử lý nếu có
![Page 22: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/22.jpg)
22
Event của FormEvent 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.FormClosing += new FormClosingEventHandler( this.Form1_FormClosingthis.Form1_FormClosing ););
![Page 23: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/23.jpg)
23
Property & layout của control Anchor Docking
Các control Label, textbox, button CheckBox, RadioButton, CheckedListBox, ListBox, Combobox, CheckListBox GroupBox, Panel & TabControlGroupBox, Panel & TabControl PictureBox, ImageList TrackBar NumericUpDown DomainUpDown ProgressBar MaskEditBox DateTimePicker MonthCalendar Timer ToolTip Mouse Event handling Keyboard event handling
Tổng quan controls
![Page 24: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/24.jpg)
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
![Page 25: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/25.jpg)
Windows Form
Fig. 12.3 Components and controls for Windows Forms.
![Page 26: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/26.jpg)
26
Tổng quan controls
Truy xuất đến thuộc tính của đối tượng
• Cú pháp
<Tên đối tượng>.<Thuộc tính>
![Page 27: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/27.jpg)
27
Tổng quan controls
Gán giá trị cho thuộc tính của đối tượng
• Cú pháp
<Tên đối tượng>.<Thuộc tính> = Giá trị;
![Page 28: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/28.jpg)
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
![Page 29: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/29.jpg)
29
Thuộc tính controls
Common Properties DescriptionBackColor 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
![Page 30: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/30.jpg)
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
<Tên đối tượng>.<Phương thức> ( [ Các tham sô ] ) Ví dụ
Phương thức di chuyển con trỏ vào 1 đối tượng
<Tên đối tượng>.Focus();
![Page 31: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/31.jpg)
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.<Hàm liên quan đến thời gian> ( [ 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
![Page 32: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/32.jpg)
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.<Thuộc tính màu sắc> Ví dụ
Màu xanh: Color.Blue Màu đỏ: Color.Red Màu trắng: Color.White Màu đen: Color.Black …
![Page 33: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/33.jpg)
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
<Tên Textbox>.BackColor = Color.Màu; Cách tô màu chữ của Textbox
<Tên Textbox>.ForeColor = Color.Màu;
![Page 34: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/34.jpg)
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 hàm tóan học> ( [ 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) …
![Page 35: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/35.jpg)
35
Tổng quan controls
Các hàm thường dùng Hàm xuất thông báo
MessageBox.Show (“<Noi dung>”); Ví dụ:
MessageBox.Show (“Xin chào!”); MessageBox.Show (“<Noi dung>”, “<Tiêu dê>”); Ví dụ:
MessageBox.Show (“Xin chào!”, “Welcome”); Hàm đổi chuỗi thành số nguyên
int.Parse(<chuoi sô>) Ví dụ: int.Parse (“123”) 123
![Page 36: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/36.jpg)
36
Control Layout - Anchor
None
FixedSingleFixed3D FixedDialog
Sizable
FormBorderStyle
![Page 37: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/37.jpg)
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
![Page 38: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/38.jpg)
38
Control Layout - Anchor
Button được neo biên trái
Button tự do
Vị trí tương đối với biên trái không đổi
Di chuyển tương ứng theo kích thước mới
![Page 39: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/39.jpg)
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
![Page 40: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/40.jpg)
40
Control Layout - Anchor
Neo theo bốn phía
![Page 41: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/41.jpg)
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
TreeView gắn bên trái
ListView gắn bên phải
![Page 42: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/42.jpg)
42
Control Layout - Docking
Left Right
Bottom
None
Fill
Top
![Page 43: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/43.jpg)
43
Control Layout - Docking
TextBox
Dock = None Dock = Top
Dock = FillTextBox.Multiline = True Dock = Bottom
![Page 44: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/44.jpg)
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
![Page 45: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/45.jpg)
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
45
![Page 46: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/46.jpg)
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
46
![Page 47: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/47.jpg)
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.
47
![Page 48: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/48.jpg)
48
Các Control
Label, TextBox, ButtonLabel, TextBox, Button
![Page 49: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/49.jpg)
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
![Page 50: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/50.jpg)
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
![Page 51: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/51.jpg)
51
Label, TextBox, Button
LabelThuộ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ế
![Page 52: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/52.jpg)
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";
this.Controls.Add(lb);
}
lb
btnPush
btnExit
![Page 53: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/53.jpg)
53
Label, TextBox, ButtonTextBox
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
![Page 54: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/54.jpg)
54
Label, TextBox, Button
TextBoxThuộ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
![Page 55: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/55.jpg)
55
Label, TextBox, Button
Demo TextBox
Chuyển thành chữ hoaDouble click vào textbox để tạo event handler cho event
TextChanged
![Page 56: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/56.jpg)
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";
this.Controls.Add(txt);
} txtHoLottxtHoLot
txtTentxtTen
lblHoLotlblHoLot
lblTenlblTen
btnHoLotbtnHoLot
lblHoVaTenlblHoVaTen
![Page 57: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/57.jpg)
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();
}
![Page 58: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/58.jpg)
58
Label, TextBox, Button
ButtonThuộ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
![Page 59: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/59.jpg)
59
Label, TextBox, Button
ButtonEvent 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ị
![Page 60: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/60.jpg)
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); }
![Page 61: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/61.jpg)
61
Thêm control vThêm control vàào formo form
Kéo thả control vào form
![Page 62: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/62.jpg)
62
Code của phần designCode của phần design
Phần code thiết kế Form1 được tạo tự động
Khai báo các đối tượng control trên Form1
Chứa code khởi tạo control
Form1.Designer.cs
![Page 63: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/63.jpg)
63
Code của phần designCode của phần design
Tạo đối tượng
Lần lượt khai báo các thuộc tính cho các control
InitializeComponent
![Page 64: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/64.jpg)
64
Code của phần designCode của phần design
InitializeComponent
Đưa các control vào danh sách control của Form1
![Page 65: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/65.jpg)
65
Sửa thuộc tSửa thuộc tíính của controlnh 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
![Page 66: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/66.jpg)
66
Phần xử lý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
![Page 67: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/67.jpg)
67
Khai bKhai bááo event handlero 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.
DClickCửa sổ quản lý event của BtnAdd
event
![Page 68: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/68.jpg)
68
Khai bKhai bááo event handlero event handler
Event handler cho button Add
Cùng signature method với System.EventHandler
![Page 69: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/69.jpg)
69
Khai bKhai bááo event handlero 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
![Page 70: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/70.jpg)
70
Viết phần xử lý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
![Page 71: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/71.jpg)
71
Kiểm tra dữ liệu nhậpKiể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!
![Page 72: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/72.jpg)
72
Bổ sung ErrorProviderBổ sung ErrorProvider
Kéo thả ErrorProvider vào design view
![Page 73: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/73.jpg)
73
Xử lý sự kiện TextChanged của Xử lý sự kiện TextChanged của textBoxtextBox
Phần kiểm tra
![Page 74: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/74.jpg)
74
ErrorProvider cảnh bErrorProvider cảnh bááoo
Icon hiển thị lỗi
Di chuyển chuột vào icon, tooltip xuất hiện
![Page 75: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/75.jpg)
Bài tập 1- Trang 1
txtHoLottxtHoLot
txtTentxtTen
lblHoLotlblHoLot
lblTenlblTen
btnHoLotbtnHoLot
lblHoVaTenlblHoVaTen
![Page 76: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/76.jpg)
76
CheckBox RadioButtonCheckBox RadioButton
Các Control
![Page 77: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/77.jpg)
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
Appearance
Checked CheckedChanged
ThreeStateText
PropertiesProperties
![Page 78: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/78.jpg)
78
CheckBox
CheckBoxThuộ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
![Page 79: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/79.jpg)
79
CheckBox
CheckBoxEvent 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ị
![Page 80: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/80.jpg)
80
CheckBox
ThreeStateThreeState = truetrue : 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
![Page 81: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/81.jpg)
81
CheckBox
Khai báo và khởi tạo đối tượng CheckBoxKhai 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);
}
![Page 82: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/82.jpg)
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.
Checked CheckedChanged Text
Appearance
![Page 83: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/83.jpg)
83
RadioButton
Nhóm RadioButton thứ 2 chứa trong
GroupBox2
Nhóm RadioButton thứ 1 chứa trong
GroupBox1
![Page 84: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/84.jpg)
84
RadioButtonThuộ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
RadioButton
![Page 85: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/85.jpg)
85
RadioButtonEvent 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ị
RadioButton
![Page 86: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/86.jpg)
86
Khai báo và khởi tạo đối tượng RadioButtonKhai 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);
}
RadioButton
![Page 87: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/87.jpg)
87
Bài Tập 2-3 trang 6
![Page 88: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/88.jpg)
88
ListBox & ComboBoxListBox & ComboBox
Các Control
![Page 89: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/89.jpg)
89
ListBox & ComboBox
ListBoxListBox Cung cấp một danh sách các itemdanh 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
Items MultiColumn
SelectedIndex SelectedItem
ListBoxListBox
SelectedItems
Sorted
Text
PropertiesProperties
![Page 90: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/90.jpg)
90
ListBox & ComboBox
Method & EventMethod & Event
ListBoxListBoxClearSelected
FindString
GetSelected
SetSelected
SelectedIndexChanged
SelectedValueChanged
MethodMethod
EventEvent
![Page 91: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/91.jpg)
91
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 ListBox
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
ListBox & ComboBox
![Page 92: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/92.jpg)
92
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
ListBox & ComboBox
![Page 93: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/93.jpg)
93
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ử
ListBox & ComboBox
![Page 94: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/94.jpg)
94
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
ListBox & ComboBox
![Page 95: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/95.jpg)
95
Khai báo và khởi tạo đối tượng ComboBoxKhai 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);
}
ListBox & ComboBox
![Page 96: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/96.jpg)
96
ListBox & ComboBox
Thuộc tính ItemsItems cho phép thêm item vào ListBox
Danh sách itemCho phép thêm item trong màn hình thiết kế form
![Page 97: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/97.jpg)
97
ListBox & ComboBox
ListBox hiển thị dạng Multi Column
Hiển thị nhiều cột
![Page 98: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/98.jpg)
98
ListBox & ComboBox
Demo ListBoxListBox
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
![Page 99: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/99.jpg)
99
ListBox & ComboBox
Sự kiện SelectedIndexChanged
SelectedIndexChangedSelectedIndexChanged
Mỗi khi kích chọn vào item trong listbox sẽ xóa item
được chọn tương ứng
Demo Frm57
![Page 100: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/100.jpg)
100
Số phần tử trong ListBoxSố phần tử trong ListBox TenListBox.Item.countTenListBox.Item.count
Lấy giá trị của 1 phần tử trong ListBoxLấy giá trị của 1 phần tử trong ListBox TenListBox.Items[i]
Thêm một phần tử vào ListBoxThêm một phần tử vào ListBox TenListBox.Items.Add(txtN.Text);
Xóa tất cả các phần tử trong ListBoxXóa tất cả các phần tử trong ListBox TenListBox.Items.Clear();
Xóa phần tử đầu tiên trong ListBoxXóa phần tử đầu tiên trong ListBox TenListBox.Items.RemoveAt(0);
Xóa phần tử cuối cùng của ListboxXóa phần tử cuối cùng của Listbox if (TenListBox.Items.Count !=0)
TenListBox.Items.RemoveAt(TenListBox.Items.Count-1);
ListBox & ComboBox
![Page 101: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/101.jpg)
101
Xóa 1 phần tử trong ListBox tại vị trí bất kỳXóa 1 phần tử trong ListBox tại vị trí bất kỳ int i = 0; while (i < lstlopA.Items.Count) { if (lstlopA.GetSelected(i) == true) lstlopA.Items.RemoveAt(i); i++; }
Chọn 1 phần tử trong listboxChọn 1 phần tử trong listbox TenListBox.SetSelected(i, true);
Kiểm tra 1 phần tử trong List box có đang chọn hay khôngKiểm tra 1 phần tử trong List box có đang chọn hay không TenListBox.GetSelected(i) == true
Gán giá trị cho 1 phần tử của ListBoxGán giá trị cho 1 phần tử của ListBox TenListBox.Items[i] = GiaTri.ToString();
ListBox & ComboBox
![Page 102: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/102.jpg)
102
ListBox & ComboBox
ComboBoxComboBox 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
ComboBoxComboBox
Items
DropDownStyle
Sorted
Text AutoCompleteMode
MaxDropDownItems
DropDownHeight
![Page 103: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/103.jpg)
103
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),DrodownList 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ê
ListBox & ComboBox
![Page 104: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/104.jpg)
104
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
ListBox & ComboBox
![Page 105: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/105.jpg)
105
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
ListBox & ComboBox
![Page 106: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/106.jpg)
106
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
ListBox & ComboBox
![Page 107: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/107.jpg)
107
Khai báo và khởi tạo đối tượng ComboBoxKhai 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);
}
ListBox & ComboBox
![Page 108: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/108.jpg)
108
Thêm một phần tử ngẫu nhiên vào trong ComboBoxThêm một phần tử ngẫu nhiên vào trong ComboBox int n; int i = 1; n = Convert.ToInt32(txtN.Text); Random rd = new Random(); while (i <= n) { cboSo.Items.Add(rd.Next(1, n+1).ToString()); i++; } Kiểm tra chọn phần tử trong Combo bằng Index cboSo.SelectedIndex == i
ListBox & ComboBox
![Page 109: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/109.jpg)
109
ListBox & ComboBox
DropDownStyleDropDownStyle
![Page 110: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/110.jpg)
110
ListBox & ComboBox
Bổ sung item trong màn hình design
view //Sử dụng phương thức ADD Combobox for(int i=1; i<=12;i++) cboThu.Items.Add("Mon "+i.ToString());
![Page 111: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/111.jpg)
111
ListBox & ComboBox
Mỗi khi kích chọn một item hiển thị item được chọn trên
MessageBox
![Page 112: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/112.jpg)
112
ListBox & ComboBox
Tính năng AutoCompleteAutoComplete Gõ “Ng”
AutoCompleteMode
AutoCompleteSource
AutoComplete
![Page 113: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/113.jpg)
113
ListBox & ComboBox
Sử dụng biến cố SelectionChangeCommittedSử dụng biến cố SelectionChangeCommittedprivate 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");
}
Demo DinhDangHoten(BaiTapTuan1)
![Page 114: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/114.jpg)
114
ListBox & ComboBox
Sử dụng phương thức AddRangeSử dụng phương thức AddRange
string[] week = new string[7] { "Sun", "Mon", "TUE", "Wed", string[] week = new string[7] { "Sun", "Mon", "TUE", "Wed", "Thu ", "Thu ", "Fri", "Sat" };"Fri", "Sat" };
cboTM.Items.AddRange(week);cboTM.Items.AddRange(week);
cboTM.DisplayMember = "Name";
cboTM.ValueMember = "Value";
Demo Frm58
![Page 115: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/115.jpg)
115
CheckedListBox
Tương tự như list box nhưng mỗi item sẽ có thêm check box.
CheckedItems CheckedIndices
SelectedIndices
SelectedIndices
MultiColumn
SelectionMode
PropertiesProperties
MethodMethodClearSelected
SetSelected
SelectedIndexChanged SelectedValueChanged
Items
![Page 116: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/116.jpg)
116
CheckedListBox
Thuộc tính thường dùng Ý nghĩa
BorderStyle Kiểu đường viền của điều khiển CheckedListBox
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ử được chọn
CheckedListBox
![Page 117: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/117.jpg)
117
CheckedListBox
Thuộc tính thường dùng Ý nghĩa
SelectedItem Gán hay 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 và lấy giá trị chỉ mục ứng với phần tử đang chọn
CheckedItems Trả về tập phần tử được Check
CheckedListBox
![Page 118: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/118.jpg)
118
CheckedListBox
Biến cố Ý nghĩa
Mouse Click Xảy ra khi người sử dụng Click trên điều khiển
Click Xảy ra khi người sử dụng Click vào điều khiển
ItemChecked Xảy ra khi người sử dụng Click vào biểu tượng CheckBox của từng phần tử
SelectedIndexChanged Xảy ra khi chỉ mục của phần tử được thay đổi
SelectedValueChanged Xảy ra khi giá trị của phần tử được thay đổi trên điều khiển
DoubleClick Xảy ra khi người sử dụng nhấn 2 lần chuột liên tiếp trên phần tử
EnabledChanged Xảy ra khi thuộc tính Enabledd thay đổi giá trị từ True sang False hay ngược lại
VisibleChanged Xảy ra khi thuộc tính Visible thay đổi giá trị
CheckedListBox
![Page 119: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/119.jpg)
119
CheckedListBox
Thuộc tính ItemsItems 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
![Page 120: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/120.jpg)
120
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);
}
![Page 121: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/121.jpg)
121
CheckedListBox
MultiColumn = trueMultiColumn = true
Các item được tổ chức theo nhiều cột
![Page 122: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/122.jpg)
122
CheckedListBox
Sự kiện SelectedIndexChangedSelectedIndexChanged
![Page 123: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/123.jpg)
123
Các Control
GroupBox, Panel & TabControlGroupBox, Panel & TabControl
![Page 124: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/124.jpg)
124
GroupBox & Panel
Bố trí controls trên GUI GroupBoxGroupBox
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
PanelPanel 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
![Page 125: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/125.jpg)
125
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
![Page 126: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/126.jpg)
126
GroupBox & Panel
Minh họa GroupBoxGroupBox
groupBox1 chứa 2 controltextBox1 và button1
textBox2 và button2 chứa trong Controls của Form
![Page 127: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/127.jpg)
127
GroupBox & Panel
Minh họa PanelPanel
scroll
![Page 128: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/128.jpg)
128
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Ý 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)
![Page 129: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/129.jpg)
129
TabControl
TabControlTabControl có thuộc tính TabPagesTabPages Chứa các đối tượng TabPageTabPage
TabControl
TabPage
TabPage
![Page 130: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/130.jpg)
130
ButtonsButtons
TabControl
Thuộc tính AppearanceAppearance
NormalNormal
FlatButtonFlatButton
![Page 131: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/131.jpg)
131
TabControl
Thuộc tính, phương thức & sự kiện thường dùng
Multiline
SelectedIndex
SelectedTab
TabCount
TabPages
SelectedIndexChanged
EventEvent
PropertiesPropertiesMethodMethodSelectTab
DeselectTab
![Page 132: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/132.jpg)
132
TabControl
Thêm/Xóa TabPageKích chuột phải
Thêm/Xóa TabPage
![Page 133: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/133.jpg)
133
TabControl
Chỉnh sửa các TabPage Chọn thuộc tính TabPagesTabPages của TabControl Sử dụng màn hình TabPage Collection EditorTabPage Collection Editor để chỉnh sửa
![Page 134: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/134.jpg)
134
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
![Page 135: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/135.jpg)
135
PictureBox
5 pictureBox với các SizeMode
tương ứng
![Page 136: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/136.jpg)
136
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
![Page 137: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/137.jpg)
137
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
![Page 138: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/138.jpg)
138
ImageList
Tạo ImageListImageList
![Page 139: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/139.jpg)
139
ImageList
Sử dụng ImageList trong ListView
Hiển thị dạng small icon
Khai báo ImageList cho
ListView
listView1
![Page 140: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/140.jpg)
140
ImageList
Thêm Item
Khai báo image cho item qua ImageIndex
![Page 141: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/141.jpg)
141
ImageList
Demo
Mỗi item sẽ có ảnh theo đúng thứ tự ImageIndex được
khai báo trong ImageList
![Page 142: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/142.jpg)
142
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
Methods
Maximum Minimum
TickFrequency
TickStyle
Value SetRange
Scroll ValueChanged
![Page 143: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/143.jpg)
143
TrackBar
public void AddTrackBar() { TrackBar tb1 = new TrackBar(); tb1.Location = new Point(10, 10); tb1.Size = new Size(250, 50);
tb1.Minimum = 0; tb1.Maximum = 100;
tb1.SmallChange = 1; tb1.LargeChange = 5; tb1.TickStyle = TickStyle.BottomRight;
tb1.TickFrequency = 10; tb1.Value = 10; Controls.Add(tb1); }
Tạo thể hiện
Thiết lập khoảng: 0 - 100
Số vị trí di chuyển khi dùng phím mũi tên
Số vị trí di chuyển khi dùng phím Page
Kiểu stick ở bên dưới/bên phải track
Số khoảng cách giữa các tick mark
![Page 144: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/144.jpg)
144
TrackBar
Bổ sung Label hiển thị giá trị của TrackBar
![Page 145: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/145.jpg)
145
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
![Page 146: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/146.jpg)
146
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}
![Page 147: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/147.jpg)
147
NumericUpDown
Demo
Nhập trực tiếp giá trị
Tăng giảm giá trị
Hiển thị giá trị Hexa
![Page 148: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/148.jpg)
148
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
![Page 149: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/149.jpg)
149
DomainUpDown
Nhập item cho DomainUpDown
String Collection EditorCho phép nhập item
![Page 150: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/150.jpg)
150
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
![Page 151: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/151.jpg)
151
ProgressBar
Khai báo thanh tiến độ 0-100, step = 10
Max = 100
Min = 0
Step = 10
![Page 152: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/152.jpg)
152
ProgressBar
![Page 153: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/153.jpg)
153
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
![Page 154: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/154.jpg)
154
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:
![Page 155: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/155.jpg)
155
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)
![Page 156: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/156.jpg)
156
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ộc 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
![Page 157: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/157.jpg)
157
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
Literals
Prompt
![Page 158: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/158.jpg)
158
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
![Page 159: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/159.jpg)
159
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); }
![Page 160: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/160.jpg)
160
DateTimePicker
Demo
Kích drop down để hiện thị hộp
chọn ngày
Chọn ngày trong khoảng cho trước
Định dạng xuất: 'Ngày' dd 'tháng' MM 'năm' yyyy
![Page 161: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/161.jpg)
161
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…
![Page 162: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/162.jpg)
162
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
MethodsEnabled Interval
Start
Stop Tick
![Page 163: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/163.jpg)
163
Timer
Hiển thị giờ hệ thống
Enable sự kiện Tick
Khoảng thời gian chờ giữa 2 lần gọi Tick
Hiển thị thời gian
![Page 164: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/164.jpg)
164
Timer
Sự kiện Tick
Khai báo trình xử lý sự
kiện Tick
![Page 165: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/165.jpg)
165
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
![Page 166: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/166.jpg)
166
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.
![Page 167: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/167.jpg)
167
ToolTip
Tạo ToolTip
![Page 168: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/168.jpg)
168
ToolTip
Khai báo Tooltip cho textbox trong Design View
Nội dung Tooltip
![Page 169: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/169.jpg)
169
ToolTip
Khai báo tooltip cho button
Nhập nội dung Tooltip cần hiển
thị
![Page 170: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/170.jpg)
170
ToolTip
Khai báo tooltip cho listbox bằng code
![Page 171: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/171.jpg)
171
ToolTip
Demo
ToolTip xuất hiện khi user di chuyển
chuột vào vùng control
![Page 172: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/172.jpg)
172
Các Event
Mouse EventMouse Event
![Page 173: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/173.jpg)
173
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 MouseEventArgsMouseEventArgs đượ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)
![Page 174: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/174.jpg)
174
Mouse Event
Tham số cho sự kiện liên quan đến mouse
Tọa độ (x,y) của Tọa độ (x,y) của con trỏ chuộtcon trỏ chuột
Button được nhấnButton được nhấnSố lần kích chuộtSố lần kích chuột
MouseEventArgsMouseEventArgs
![Page 175: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/175.jpg)
175
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/
MouseUp
Xuất hiện khi button được nhấn/thả và con trỏ chuột đ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
![Page 176: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/176.jpg)
176
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
![Page 177: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/177.jpg)
177
Mouse Event
MouseMove
![Page 178: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/178.jpg)
178
Mouse Event
Demo
Hiển thị tọa độ hiện tại của con trỏ chuột
Vị trí hiện tại của con trỏ chuột
![Page 179: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/179.jpg)
179
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
![Page 180: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/180.jpg)
180
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
![Page 181: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/181.jpg)
181
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
![Page 182: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/182.jpg)
182
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
![Page 183: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/183.jpg)
183
Các Event
Keyboard EventKeyboard Event
![Page 184: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/184.jpg)
184
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.
![Page 185: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/185.jpg)
185
Keyboard Event
Sự kiện với tham số kiểu KeyEventArgsSự 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 KeyPressEventArgsSự 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 KeyPressEventArgsThuộ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 KeyEventArgsThuộ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ý
![Page 186: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/186.jpg)
186
Keyboard Event
Thuộc tính của lớp KeyEventArgs (tt)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
![Page 187: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/187.jpg)
187
Keyboard Event
Keys Enumeration
![Page 188: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/188.jpg)
188
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
![Page 189: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/189.jpg)
189
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
![Page 190: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/190.jpg)
190
Keyboard Event
Bước 2: Tạo KeyPress Event Handling cho form
![Page 191: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/191.jpg)
191
Keyboard Event
Bước 3: Tạo KeyDown Event Handling cho form
![Page 192: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/192.jpg)
192
Keyboard Event
Demo
![Page 193: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/193.jpg)
193
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 KeyPreviewKeyPreview
cho Form để nhận sự kiện bàn phím.
![Page 194: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/194.jpg)
194
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
![Page 195: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/195.jpg)
195
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
![Page 196: LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)](https://reader036.vdocuments.site/reader036/viewer/2022081505/56815295550346895dc0bd02/html5/thumbnails/196.jpg)
196