P7 controls 2010

Windows Controls

ThS. Nguyễn Hà Giang
Khoa CNTT - Hutech
1

Nội Dung



Tổng quan controls
Property & layout của control





Các control thông dụng












Anchor
Docking
Label, textbox, button
ListBox, Combobox, ListView, TreeView
GroupBox, Panel & TabControl
CheckBox, RadioButton, CheckedListBox, TrackBar
PictureBox, ImageList
NumericUpDown, DomainUpDown
RichTextBox, DateTimePicker, MonthCalendar
Advanced controls

Mouse Event handling
Keyboard event handling

Nguyen Ha Giang - 2008

2




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


3



Một số thuộc tính của control




Text: nội dung caption, title…
Focus: 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

Neo giữ control ở vị trí xác định
Cho phép control di chuyển theo vị trí

Size: xác nhận kích thước của control


4

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


5

Control Layout - Anchor
None

Sizable

FormBorderStyle

Fixed3D


FixedDialog

FixedSingle

6



Khi FormBorderStyle = Sizable, form cho phép thay đổi
kích thước khi Runtime




Sự bố trí của control cũng thay đổi!

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


7

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

8



Thiết lập Anchor cho control

Chọn các
biên để neo
Biên được
chọn neo,
màu đậm


9


Neo theo
bốn phía


10

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


11


Top
Left

Fill

Right
Bottom

None

12


Dock = None

Dock = Top
TextBox

Dock = Fill
TextBox.Multiline = True


Dock = Bottom

13

Label, TextBox, Button


14



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



Checkbox và RadioButton

Dẫn xuất từ ButtonBase


15

Label
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ị

Enable

Trạng thái sử dụng hoặc không sử
dụng control


16

TextBox
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

PasswordChar

Chỉ hiển thị ký tự đại diện cho text

ReadOnly

Nếu true: textbox hiển thị nền xám, và ko
cho phép nhập liệu, 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 design view
17

Button
Text

Chuỗi hiển thị trên bề mặt 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.

18



Demo TextBox

Double click vào
textbox để tạo event
handler cho event
TextChanged


Chuyển thành chữ hoa

19



Chỉ cho nhập số

Sự kiện KeyPress


Sự kiện phát sinh khi
textbox nhận focus và
user nhấn 1 phím

20



Chức năng AutoComplete cho TextBox




AutoCompleteCustomSource:





Thiết lập các chuỗi hỗ trợ (dạng collection)
Được sử dụng khi AutoComleteSource là CustomSource

AutoCompleteMode:




Hỗ trợ hoàn thành nhanh chóng các chuỗi chứa trong một
nguồn nào đó.

Kiểu hỗ trợ: Append, Suggest

AutoCompleteSource:



Nguồn dữ liệu để hỗ trợ hoàn thành
FileSystem, HistoryList, CustomSource…


21

MaskedTextBox


Cho phép nhập theo định dạng được thiết lập:


Numeric, phone, date, custom…


22

MaskedTextBox


Thuộc tính Mask
Mask

Mô tả

0

Ký tự bắt buộc từ 0 – 9

9

Ký tự (không bắt buộc) từ 0 – 9

#

Ký tự (không bắt buộc) từ 0 – 9, khoảng
trắng, dấu + hoặc -

L

Yêu cầu ký tự a-z hoặc A-Z

?

Ký tự (không bắt buộc) a-z hoặc A-Z

&

Yêu cầu ký tự

C

Ký tự (không bắt buộc)

A, a

Ký tự (không bắt buộc) alphanumeric

.

Dấu thập phân

,

Dấu hàng ngàn


23

MaskedTextBox


Thuộc tính Mask
Mask

Mô tả

:

Dấu phân cách theo định dạng thời gian

/

Dấu phân cách theo định dạng ngày

$

Biểu tượng tiền tệ

<

Chuyển tất cả ký tự theo sau thành thường

>

Chuyển tất cả ký tự theo sau thành hoa

|

Disable hiệu lực của < hay > trước nó

Ký tự thoát

Tất cả các ký tự còn lại sẽ được giữ nguyên khi hiển thị!


24

MaskedTextBox


VD:












Mask string: (999)-000-0000
User Input: 1234567890
Display: (123)-456-7890
Mask string: 00/00/0000
User input: 12041978
Display: 12/04/1978
Mask string: LL>L|LLL<LL
User input: abcdABCD
Display: abCdABcd


25

ListBox & ComboBox


26

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

Properties

SelectedIndex
SelectedItem

SelectedItems
ListBox

Sorted
Text
27

ListBox & ComboBox


Method & Event

Method
ClearSelected
GetSelected
SetSelected
FindString

ListBox

Event
SelectedIndexChanged
SelectedValueChanged


28

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

29

ListBox & ComboBox


ListBox hiển thị dạng Multi Column

Hiển thị nhiều cột


30

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


31

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



32

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


33

ListBox & ComboBox


DropDownStyle


34

ListBox & ComboBox

Bổ sung item trong
màn hình design
view

35

ListBox & ComboBox

Mỗi khi kích chọn
một item ⇒ hiển
thị item được chọn
trên MessageBox


36

ListBox & ComboBox
AutoComplete


Tính năng AutoComplete

Gõ “Ng”

AutoCompleteMode
AutoCompleteSource


37

ListView


38

List View


Dạng control phổ biến hiện thị một danh sách item




Các item có thể có các item con gọi là subitem

Windows Explorer hiển thị thông tin thư mục, tập tin…


Có thể hiển thị thông tin theo nhiều dạng thông qua thuộc tính
View








Xem dạng chi tiết thông tin
Xem dạng icon nhỏ
Xem dạng icon lớn
Xem dạng tóm tắt
…

Lớp ListView dẫn xuất từ System.Windows.Forms.Control


39

List View


Properties

Sorting

GridLines

View

SmallImageList
Columns
LargeImageList
Items
MultiSelect


FullRowSelect

40

List View


Các dạng thể hiện của ListView

Details

Small Icons

List

Large Icons


Tile

41

List View

Large Icons
Mỗi item xuất hiện với 1
icon kích thước lớn và một
label bên dưới


42

List View

Small
Icons
Mỗi item xuất hiện với icon
nhỏ và một label bên phải


43

List View

List
Mỗi item xuất hiện với icon
nhỏ với label bên phải, item
được sắp theo cột nhưng
không có tiêu đề cột


44

List View

Tile
Mỗi item xuất hiện với
icon kích thước lớn, bên
phải có label chứa item
và subitem


45

List View

Detail
Mỗi item xuất hiện trên
một dòng, mỗi dòng có các
cột chứa thông tin chi tiết


46

List View


Tạo các cột cho ListView – Details qua



Cửa sổ properties → Columns để tạo.
Sử dụng code trong chương trình.
ColumnHeader columnHeader1 = new ColumnHeader();
columnHeader1.Text = "Name";
columnHeader2.Text = "Address";
columnHeader3.Text = "Telephone Number";
listView1.Columns.Add(columnHeader1);


47

List View
Dialog soạn thảo cột


48

List View


Thêm các item vào ListView





Thêm item trong màn hình thiết kế form
Thêm item thông qua code

Các lớp định nghĩa Item



System.Windows.Forms.ListViewItem
Mỗi item trong ListView có các item phụ gọi là subitem




Lớp ListViewItem.ListViewSubItem định nghĩa các subitem của
ListView
Lớp ListViewSubItem là inner class của ListViewItem
ColumnHeader
2

ColumnHeader
3

…

…

…

…

item 1

ColumnHeader
1

…

…

Subitem[0]

Subitem[1]

Subitem[2]
49

ListView


Minh họa thêm item qua code

ListViewItem item1 = new ListViewItem();
ListViewItem.ListViewSubItem subitem1;
subitem1 = new ListViewItem.ListViewSubItem();

item1.Text = "Hutech";
subitem1.Text = "144/24 DBP - F.25 - Q.BT";
item1.SubItems.Add(subitem1);
listView1.Items.Add(item1);


Thêm subitem vào item
Thêm item vào danh
sách items của ListView
50

ListView




51

TreeView





Thể hiện dữ liệu theo dạng cấu trúc cây
Thành phần chính trong cấu trúc cây là
“Node”
Node có thể có trạng thái






Selected
Expand & collapse

Text trên mỗi node có thể edit
Có thể add hoặc delete các node thông qua
code


52

TreeNode


TreeNode




Tất cả các node trên TreeView là các thể hiện của lớp
TreeNode
Constructor của TreeNode




TreeNode(string displayText)

Những thuộc tính









Nodes: chứa tập hợp các đối tượng TreeNode là con của Node
này.
Text: nhãn hiển thị trên node
Checked: true nếu node được check
FullPath: nhãn của các node từ root đến node này, phân cách
bởi “”
NextNode: trả về node tiếp theo
PrevNode: trã về node trước


53

TreeNode


Phương thức





Collapse: collapse tất cả các node
Expand: expand tất cả các node
ExpandAll: expand tất cả node con của node này
GetNodeCount: trả về số lượng node con của node này.


54

TreeView



TreeView có đầy đủ tính chất của một control
Thuộc tính







Nodes: lấy tất cả node con của node này
CheckBoxes: nếu true thì hiển thị checkbox bên cạnh node
SelectedNode: trả về các node được chọn
LabelEdit: nếu true, node được edit

Sự kiện





AfterSelect: sau khi một node được chọn
AfterExpanded: sau khi node được expand
AfterCollapsed: sau khi node được collapse
AfterEdited: sau khi node được edit


55

TreeView


Các bước tạo TreeView






Tạo một node gốc (root)
Add node gốc vào danh sách Nodes của TreeView
Tạo node con và add vào Nodes của node gốc
Làm tương tự để add các node mới vào cây
…
TreeView tv = new TreeView();
TreeNode root = new TreeNode(root);
tv.Nodes.Add(root);
root.Nodes.Add(new TreeNode(“Vegetables”));
root.Nodes.Add(new TreeNode(“Fruit”));
root.Nodes.Add(new TreeNode(“Meat”));
root.Nodes.Add(new TreeNode(“Poultry”));


56

TreeViewEventArg


Trình xử lý thường có dạng






void EventHandler(object sender, EventArgs e)

Sự kiện TreeView thường dùng một lớp con của
EventArgs là TreeViewEventArg
Thuộc tính


Node: tham chiếu đến node nơi sự kiện phát sinh


57

GroupBox, Panel & TabControl


58

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


59

GroupBox & Panel
Mô tả
GroupBox
Controls
Text

Danh sách control chứa trong GroupBox.
Caption của GroupBox

Panel
Xuất hiện khi panel quá nhỏ để hiển thị hết
AutoScroll
các control, mặc định là false
Biên của panel, mặc định là None, các tham
BorderStyle
số khác như Fixed3D, FixedSingle
Danh sách control chứa trong panel
Controls


60

GroupBox & Panel


Minh họa GroupBox

groupBox1 chứa 2 control
textBox1 và button1

textBox2 và button2 chứa
trong Controls của Form


61

GroupBox & Panel


Minh họa Panel

scroll


62

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)


63

TabControl


TabControl có thuộc tính TabPages


Chứa các đối tượng TabPage

TabPage

TabControl
TabPage


64

TabControl


Thuộc tính Appearance

Normal

Buttons


FlatButton

65

TabControl


Thuộc tính, phương thức & sự kiện thường dùng

Properties

Method

TabPages
TabCount

SelectTab

SelectedTab

DeselectT
ab

Multiline
SelectedIndex


Event
66

TabControl


Thêm/Xóa TabPage
Kích chuột phải

Thêm/Xóa TabPage


67

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


68

TabControl


Bổ sung Control vào TabControl



Chọn TabPage cần thêm control
Kéo control từ ToolBox thả vào TabPage đã chọn

Chọn TabPage
cần thêm


69

TabControl


Sử dụng code để thêm các TabPage vào TabControl
private void AddTabControl()
{
TabControl tabControl1 = new TabControl();
TabPage tabPageGeneral = new TabPage("General");
TabPage tabPageView = new TabPage("View");
tabControl1.TabPages.Add(tabPageGeneral);
tabControl1.TabPages.Add(tabPageView);
tabControl1.Location = new Point(20, 20);
this.Controls.Add(tabControl1);
}


70

CheckBox, CheckedListBox
RadioButton & TrackBar


71

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

72

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


73

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
74

RadioButton

Nhóm RadioButton
thứ 1 chứa trong
GroupBox1

Nhóm RadioButton
thứ 2 chứa trong
GroupBox2

75

CheckedListBox


Tương tự như list box nhưng mỗi item sẽ có thêm check
box.

Properties
CheckedItems
CheckedIndices
SelectedIndices
SelectedIndices
MultiColumn
SelectionMode
Items

SelectedValueChanged

Method
ClearSelected
SetSelected
76

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


77

CheckedListBox


MultiColumn = true

Các item được tổ
chức theo nhiều cột


78

CheckedListBox




79

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

Maximum

Minimum

TickFrequency

ValueChanged

Scroll

TickStyle

Methods

Value

SetRange


80

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
81

TrackBar


Bổ sung Label hiển thị giá trị của TrackBar


82

PictureBox & ImageList


83

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


84

PictureBox

5 pictureBox với
các SizeMode
tương ứng


85

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 là transparent


86

ImageList


Các bước sử dụng ImageList





Kéo component 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


87

ImageList


Tạo ImageList


88

ImageList


Sử dụng ImageList trong ListView
listView1

Khai báo
ImageList cho
ListView

Hiển thị dạng
small icon


89

ImageList


Thêm Item

Khai báo image
cho item qua
ImageIndex

90

ImageList


Demo

Mỗi item sẽ có ảnh
theo đúng thứ tự
ImageIndex được
khai báo trong
ImageList


91

NumericUpDown & DomainUpDown


92

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


93

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

}


94

NumericUpDown


Demo
Tăng giảm giá trị

Hiển thị giá
trị Hexa

Nhập trực tiếp giá trị


95

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


96

DomainUpDown


Nhập item cho DomainUpDown

String Collection Editor
Cho phép nhập item


97

Graphic & RichText Controls


98

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


99

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);
}

100

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


101

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…


102

RichTextBox



Chức năng mở rộng từ TextBox, có thể hiển thị text dạng
rich text format (RTF)
Các text có thể có các font chữ và màu sắc khác nhau.
Đoạn text có thể được canh lề
Có thể chứa các ảnh
Ứng dụng WordPad là dạng RichTextBox



Sinh viên tự tìm hiểu thêm…








103

Advanced Controls


104

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
Methods

Interval

Start

Stop

Tick
105

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


106

Timer


Sự kiện Tick

Khai báo
trình xử lý sự
kiện Tick


107

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


108

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


109

ProgressBar


Khai báo thanh tiến độ 0-100, step = 10

Max = 100
Min = 0

Step = 10


110

ProgressBar


111

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


112

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.


113

ToolTip


Tạo ToolTip


114

ToolTip


Khai báo Tooltip cho textbox trong Design View

Nội dung Tooltip


115

ToolTip


Khai báo tooltip cho button

Nhập nội dung
Tooltip cần hiển
thị


116

ToolTip


Khai báo tooltip cho listbox bằng code


117

ToolTip


Demo

ToolTip xuất hiện
khi user di chuyển
chuột vào vùng
control


118

Mouse Event


119

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)


120

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


121

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


122

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


123

Mouse Event


MouseMove


124

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

125

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


126

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

127

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


128

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


129

Mouse Event
Tại sao có hiệu
ứng vậy?
SV tự cải tiến


130

Keyboard Event


131

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.


132

Keyboard Event
Sự kiện với tham số kiểu KeyEventArgs
KeyDown

Phát sinh khi phím được nhấn

KeyUp

Phát sinh khi phím được thả
Sự kiện với tham số kiểu KeyPressEventArgs

KeyPress

Khởi tạo khi phím được nhấn
Thuộc tính của lớp KeyPressEventArgs

KeyChar

Chứa ký tự ASCII của phím được nhấn

Handled

Cho biết sự kiện KeyPress có được xử lý chưa
Thuộc tính của lớp KeyEventArgs

Alt, Control, Shift Trạng thái các phím bổ sung
Handled


Cho biết sự kiện đã xử lý
133

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


134

Keyboard Event


Keys Enumeration


135

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


136

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


137

Keyboard Event


Bước 2:


Tạo KeyPress Event Handling cho form


138

Keyboard Event


Bước 3:


Tạo KeyDown Event Handling cho form


139

Keyboard Event


Demo


140

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.


141

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

142

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


143

P7 controls 2010

More Related Content

What's hot (19)

Viewers also liked (20)

Similar to P7 controls 2010 (20)

P7 controls 2010