Chương 3
LẬP TRÌNH GIAO DIỆN
Graphical User Interface (GUI)
1
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
2
GUI
Command line interface: CLI
Tương tác qua keyboard
Thực thi tuần tự
Text user interface: TUI
GUI dựa trên text
Mức độ tương tác cao hơn
3
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
4
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
5
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
6
Event- Driven Programming
Cách truyền thống
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
Event-Driven Programming
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 UserComputer
7
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
8
Event-Driven Programming

Minh họa xử lý trong form
Click
User nhập text vào
texbox -> click
Button để add
chuỗi nhập vào
listbox
invoke
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
9
Event-Driven Programming
Event

GUI-based events









Mouse move
Mouse click
Mouse double-click
Key press
Button click
Menu selection
Change in focus
Window activation
…
Danh sách
event cho
Form
10
Windows Forms Application
11
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
12
Minh họa WinForm App
13
Tạo WinForm App
Tạo project: Windows App
14
Tạo WinForm App từ VS. 2005 (3)
2
1
Windows App do
VS.2005 khởi tạo
3
4
1: form ứng dụng
2: control toolbox
3: Solution Explorer
4: Form properties
15
Ứng Dụng WinForm đơn giản
Lớp Form cơ sở
Form1.cs
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
16
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!
17
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
lớp trên.
object
object
object
object
object
18
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
19
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
20
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
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ó
21
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 );
22
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
23
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
24
Windows Form
Fig. 12.3 Components and controls for Windows Forms.
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>
26
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ị;
27
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




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:



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
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
28
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
29
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();
30
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
31
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
…
32
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;
33
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)
…
34
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
35
Control Layout - Anchor
None
Sizable
FormBorderStyle
Fixed3D
FixedDialog
FixedSingle
36
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
37
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
38
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
39
Control Layout - Anchor
Neo theo
bốn phía
40
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
41
Control Layout - Docking
Top
Left
Fill
Right
Bottom
None
42
Control Layout - Docking
Dock = None
Dock = Top
TextBox
Dock = Fill
TextBox.Multiline = True
Dock = Bottom
43
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
44
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
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
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
Các Control
Label, TextBox, Button
48
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


TextBox


Thuộc lớp TextBox
Vùng cho phép user nhập dữ liệu


Dẫn xuất từ Control
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
49
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
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ế
51
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
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
53
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
54
Label, TextBox, Button

Demo TextBox
Double click vào
textbox để tạo event
handler cho event
TextChanged
Chuyển thành chữ hoa
5
5
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);
}
lblHoLot
lblHoVaTen
txtHoLot
txtTen
lblTen
btnHoLot
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();
}
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
58
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ị
59
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);
Thêm control vào form

Kéo thả control vào form
61
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
62
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
63
Code của phần design
InitializeComponent
Đưa các control vào danh sách
control của Form1
64
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
65
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
66
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
67
Khai báo event handler
Event handler cho
button Add
Cùng signature method với System.EventHandler
68
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
69
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
70
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!
71
Bổ sung ErrorProvider
Kéo thả ErrorProvider vào design view
72
Xử lý sự kiện TextChanged của textBox
Phần kiểm tra
73
ErrorProvider cảnh báo
Icon hiển thị lỗi
Di chuyển chuột vào
icon, tooltip xuất hiện
74
Bài tập 1- Trang 1
lblHoVaTen
txtHoLot
lblHoLot
txtTen
lblTen
btnHoLot
Các Control
CheckBox RadioButton
76
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
Text
ThreeState
CheckedChanged
77
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
78
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ị
79
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
80
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
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
Text
CheckedChanged
82
RadioButton
Nhóm RadioButton
thứ 1 chứa trong
GroupBox1
Nhóm RadioButton
thứ 2 chứa trong
GroupBox2
83
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
84
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ị
85
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);
}
86
Bài Tập 2-3 trang 6
87
Các Control
ListBox & ComboBox
88
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
Items
MultiColumn
SelectedIndex
SelectedItem
Properties
SelectedItems
ListBox
Sorted
Text
89
ListBox & ComboBox

Method & Event
Method
ClearSelected
GetSelected
SetSelected
FindString
ListBox
Event
SelectedIndexChanged
SelectedValueChanged
9
0
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 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
91
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
92
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ử
93
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
94
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);
}
9
5
ListBox & ComboBox

Thuộc tính Items cho phép thêm item vào ListBox
Danh sách item
Cho phép thêm item
trong màn hình thiết
kế form
9
6
ListBox & ComboBox

ListBox hiển thị dạng Multi Column
Hiển thị nhiều cột
97
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
98
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
Demo Frm57
9
9
ListBox & ComboBox

Số phần tử trong ListBox


Lấy giá trị của 1 phần tử trong ListBox


TenListBox.Items.Clear();
Xóa phần tử đầu tiên trong ListBox


TenListBox.Items.Add(txtN.Text);
Xóa tất cả các phần tử trong ListBox


TenListBox.Items[i]
Thêm một phần tử vào ListBox


TenListBox.Item.count
TenListBox.Items.RemoveAt(0);
Xóa phần tử cuối cùng của Listbox

if (TenListBox.Items.Count !=0)

TenListBox.Items.RemoveAt(TenListBox.Items.Count-1);
10
0
ListBox & ComboBox

Xóa 1 phần tử trong ListBox tại vị trí bất kỳ







Chọ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ông


int i = 0;
while (i < lstlopA.Items.Count)
{ if (lstlopA.GetSelected(i) == true)
lstlopA.Items.RemoveAt(i);
i++;
}
TenListBox.GetSelected(i) == true
Gán giá trị cho 1 phần tử của ListBox

TenListBox.Items[i] = GiaTri.ToString();
10
1
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
Sorted
Items
DropDownStyle
ComboBox
MaxDropDownItems
AutoCompleteMode
Text
DropDownHeight
10
2
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),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ê
10
3
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
10
4
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
10
5
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
10
6
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);
}
10
7
ListBox & ComboBox

Thê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


10
8
ListBox & ComboBox

DropDownStyle
10
9
ListBox & ComboBox
//Sử dụng phương thức ADD Combobox
for(int i=1; i<=12;i++)
cboThu.Items.Add("Mon "+i.ToString());
Bổ sung item trong
màn hình design
view
11
0
ListBox & ComboBox
Mỗi khi kích chọn
một item  hiển thị
item được chọn trên
MessageBox
11
1
ListBox & ComboBox
AutoComplete

Tính năng AutoComplete
Gõ “Ng”
AutoCompleteMode
AutoCompleteSource
11
2
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");
}
Demo DinhDangHoten(BaiTapTuan1)
11
3
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";
Demo Frm58
11
4
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
SelectionMode
Items
Method
ClearSelected
SetSelected
11
5
CheckedListBox
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
11
6
CheckedListBox
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
11
7
CheckedListBox
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ị
11
8
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
11
9
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);
}
12
0
CheckedListBox

MultiColumn = true
Các item được tổ
chức theo nhiều cột
12
1
CheckedListBox

Sự kiện SelectedIndexChanged
12
2
Các Control
GroupBox, Panel & TabControl
12
3
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
12
4
GroupBox & Panel
Groupbox
Thuộc tính thường dùng
Controls
Text
Mô tả
Danh sách control chứa trong GroupBox.
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
12
5
GroupBox & Panel

Minh họa GroupBox
groupBox1 chứa 2 control
textBox1 và button1
textBox2 và button2 chứa
trong Controls của Form
12
6
GroupBox & Panel

Minh họa Panel
scroll
12
7
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)
12
8
TabControl

TabControl có thuộc tính TabPages

Chứa các đối tượng TabPage
TabPage
TabControl
TabPage
12
9
TabControl

Thuộc tính Appearance
Normal
Buttons
FlatButton
13
0
TabControl

Thuộc tính, phương thức & sự kiện thường dùng
Properties
TabPages
TabCount
SelectedTab
Multiline
SelectedIndex
Method
SelectTab
DeselectTab
Event
SelectedIndexChanged
13
1
TabControl

Thêm/Xóa TabPage
Kích chuột phải
Thêm/Xóa TabPage
13
2
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
13
3
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
13
4
PictureBox
5 pictureBox với
các SizeMode
tương ứng
13
5
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
13
6
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
13
7
ImageList

Tạo ImageList
13
8
ImageList

Sử dụng ImageList trong ListView
listView1
Khai báo
ImageList cho
ListView
Hiển thị dạng
small icon
13
9
ImageList

Thêm Item
Khai báo image
cho item qua
ImageIndex
14
0
ImageList

Demo
Mỗi item sẽ có ảnh
theo đúng thứ tự
ImageIndex được
khai báo trong
ImageList
14
1
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
14
2
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;
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
tb1.SmallChange = 1;
tb1.LargeChange = 5;
tb1.TickStyle = TickStyle.BottomRight;
tb1.TickFrequency = 10;
tb1.Value = 10;
Controls.Add(tb1);
}
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
14
3
TrackBar

Bổ sung Label hiển thị giá trị của TrackBar
14
4
NumericUpDown

Cho phép user chọn các giá trị trong khoảng xác định
thông qua



Các thuộc tính





Minimum
Maximum
Value
Increment
Sự kiện


Nút up & down
Nhập trực tiếp giá trị
ValueChanged
Phương thức


DownButton
UpButton
14
5
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;
numUpDn.Minimum = 0;
numUpDn.Maximum = 255;
numUpDn.Value = 0xFF;
numUpDn.Increment = 1;
Controls.Add(numUpDn);
// hiển thị dạng hexa
// giá trị nhỏ nhất
// giá trị lớn nhất
// giá trị khởi tạo
// bước tăng/giảm
// thêm control vào ds control của form
}
14
6
NumericUpDown

Demo
Tăng giảm giá trị
Hiển thị giá
trị Hexa
Nhập trực tiếp giá trị
14
7
DomainUpDown

Cho phép user chọn item trong số danh sách item thông
qua



Properties







Button Up & Down
Nhập từ bàn phím
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
14
8
DomainUpDown

Nhập item cho DomainUpDown
String Collection Editor
Cho phép nhập item
14
9
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
15
0
ProgressBar

Khai báo thanh tiến độ 0-100, step = 10
Max = 100
Min = 0
Step = 10
15
1
ProgressBar
15
2
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
15
3
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:
15
4
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)
15
5
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
15
6
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
15
7
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ị


CustomFormat:







long, short, time, custom
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
15
8
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);
}
15
9
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
16
0
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…
16
1
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
Stop
Interval
Tick
16
2
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
16
3
Timer

Sự kiện Tick
Khai báo
trình xử lý sự
kiện Tick
16
4
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
16
5
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.
16
6
ToolTip

Tạo ToolTip
16
7
ToolTip

Khai báo Tooltip cho textbox trong Design View
Nội dung Tooltip
16
8
ToolTip

Khai báo tooltip cho button
Nhập nội dung
Tooltip cần hiển
thị
16
9
ToolTip

Khai báo tooltip cho listbox bằng code
17
0
ToolTip

Demo
ToolTip xuất hiện
khi user di chuyển
chuột vào vùng
control
17
1
Các Event
Mouse Event
17
2
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)
17
3
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
17
4
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
17
5
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
17
6
Mouse Event

MouseMove
17
7
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
17
8
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
17
9
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
18
0
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
18
1
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
18
2
Các Event
Keyboard Event
18
3
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.
18
4
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
Khởi tạo khi phím được nhấn
KeyPress
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ý
18
5
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
18
6
Keyboard Event

Keys Enumeration
18
7
Keyboard Event

Minh họa các sự kiện: KeyPress, KeyDown, KeyUp

Khi user nhấn một phím



Khi user thả 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
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
18
8
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
18
9
Keyboard Event

Bước 2:

Tạo KeyPress Event Handling cho form
19
0
Keyboard Event

Bước 3:

Tạo KeyDown Event Handling cho form
191
Keyboard Event

Demo
19
2
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.
19
3
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
19
4
Tóm tắt

Thiết kế layout trên form



Các control trên form







Anchor
Dock các control
Control nhập liệu
Control chọn giá trị
Container control
Component
Advanced control
Mouse event
Keyboard event
19
5
19
6