Ltudql1 04 giao dien (tt)

9/15/2010

Khoa CNTT-ĐH.KHTN

Nội dung
Lập Trình Ứng Dụng Quản Lý 1
Chương 4:
Lập trình giao diện với VB.NET

1. ListBox
2. ListView
3. TreeView
4. User Control

GV. Trương Phước Lộc

GV. Trương Phước Lộc

Khoa CNTT-ĐH.KHTN

1. LISTBOX

3

ThS. Nguyễn Tấn Trần Minh Khang

Khoa CNTT-ĐH.KHTN

1.LISTBOX
1.2 Selecting Items

• Sử dụng thộc tính SelectedIndex, SelectItem
• Sự kiện SelectedIndexChanged
• Thuộc tính SelectionMode có giá trị
▫
▫
▫
▫

None: không chọn
One: chọn 1
MultiSimple: chọn nhiều (click là chọn)
MultiExtended: chọn nhiều (kết hợp với phím
shift và ctrl
=> SelectedIndices, SelectedItems (chỉ có thể lấy
giá trị)

GV. Trương Phước Lộc

ThS. Nguyễn Tấn Trần Minh Khang

Khoa CNTT-ĐH.KHTN

1. LISTBOX (tt)
1.1 Add Items

• Sử dụng hàm Add(), AddRange(), Insert()
• Ví dụ:
lbName.Items.Add("aaa")
Dim strMember As String() = {"bbb",
"ccc"}

lbName.Items.AddRange(strMember)
lbName.Items.Insert(2, "ddd")

1.1 Adding Items
1.2 Selecting Items
1.3 Removing Items
1.4 Sorting
1.5 Scroll bars

GV. Trương Phước Lộc

2

5

ThS. Nguyễn Tấn Trần Minh Khang

GV. Trương Phước Lộc

4

ThS. Nguyễn Tấn Trần Minh Khang

Khoa CNTT-ĐH.KHTN

1.LISTBOX
1.3 Removing Items

• Sử dụng hàm Remove(), RemoveAt()
• Xóa tồn bộ: Clear()

• Ví dụ
lbName.Items.Remove("aaa")
lbName.Items.RemoveAt(3)
lbName.Items.Clear()

GV. Trương Phước Lộc

6

ThS. Nguyễn Tấn Trần Minh Khang

1


9/15/2010

Khoa CNTT-ĐH.KHTN

1.LISTBOX
1.4 Sorting

• Sử dụng thuộc tính Sorted = true/false

GV. Trương Phước Lộc

7

ThS. Nguyễn Tấn Trần Minh Khang

Khoa CNTT-ĐH.KHTN

2. LISTVIEW
2.1 Creating items
2.2 View styles
2.3 List View Items and their Icons
2.4 The columns
2.5 Adding the items
2.6 Selecting Items
2.7 Sub Items
2.8 Editing a label
2.9 Font, text color & background color of item
2.10 Locating a ListViewItem
2.11 Deleting items
2.12 ListItems & CheckBoxes
GV. Trương Phước Lộc

9

ThS. Nguyễn Tấn Trần Minh Khang

• Sử dụng thuộc tính View
▫
▫
▫
▫

11

GV. Trương Phước Lộc

8

ThS. Nguyễn Tấn Trần Minh Khang

Khoa CNTT-ĐH.KHTN

2. LISTVIEW
2.1 Creating items

GV. Trương Phước Lộc

10

ThS. Nguyễn Tấn Trần Minh Khang

Khoa CNTT-ĐH.KHTN

2. LISTVIEW
2.3 List View Items and their Icons

• Sử dụng đối tượng ImageList
• Thuộc tính LargeImageList và SmallImageList
của ListView.
• Thuộc tính ImageIndex của Item.

LargeIcon
SmallIcon
List
Details

GV. Trương Phước Lộc

• Vertical scroll bar: tự động
• Horizontal scroll bar: dùng thuộc tính
HorizontalScrollbar

• Cửa sổ Properties => Items

Khoa CNTT-ĐH.KHTN

2. LISTVIEW
2.2 View styles

Khoa CNTT-ĐH.KHTN

1. LISTBOX
1.5 Scroll bars

ThS. Nguyễn Tấn Trần Minh Khang

GV. Trương Phước Lộc

12

ThS. Nguyễn Tấn Trần Minh Khang

2


9/15/2010

Khoa CNTT-ĐH.KHTN

2. LISTVIEW
2.4 The columns
• Giới thiệu

GV. Trương Phước Lộc

• Cửa sổ Properties => Columns

13

ThS. Nguyễn Tấn Trần Minh Khang

Khoa CNTT-ĐH.KHTN

2. LISTVIEW
2.4 The Columns
• Sử dụng hàm Add(), Insert()
• Cách 1:

ThS. Nguyễn Tấn Trần Minh Khang

Khoa CNTT-ĐH.KHTN

lvName.Select()
lvName.Items(index).Selected = True
• Sự kiện SelectedIndexChanged.
• Thuộc tính MultiSelect để chọn nhiều item =>

SelectedIndices, SelectedItems
17

Khoa CNTT-ĐH.KHTN

2. LISTVIEW
2.5 Adding an item

Dim lviCountries() As ListViewItem = _
{
New ListViewItem("Australia"), _
New ListViewItem("Mali"), _
New ListViewItem("Sweden"), _
New ListViewItem("Venezuela") }
lvName.Items.AddRange(lviCountries)

• Thuộc tính Selected của item được sử dụng khi
muốn chọn item.

GV. Trương Phước Lộc

ThS. Nguyễn Tấn Trần Minh Khang

Dim lviPortugal As ListViewItem = New
ListViewItem("Portugal")
lvName.Items.Add(lviPortugal)

Dim colArea As ColumnHeader = New
ColumnHeader()
colArea.Text = "Area"

colArea.Width = 80
colArea.TextAlign =
HorizontalAlignment.Right
lvName.Columns.Add(colArea)
lvName.Columns.Insert(index, colArea)

2. LISTVIEW
2.6 Selecting an item

14

lvName.Items.Add("Egypt")

• Cách 2:

15

GV. Trương Phước Lộc

• Sử dụng hàm Add(), AddRange()
• Ví dụ

lvName.Columns.Add("Name", 120,
HorizontalAlignment.Left)

GV. Trương Phước Lộc

Khoa CNTT-ĐH.KHTN

2. LISTVIEW

2.4 The colums

ThS. Nguyễn Tấn Trần Minh Khang

GV. Trương Phước Lộc

16

ThS. Nguyễn Tấn Trần Minh Khang

2.LISTVIEW
2.7 Sub Items of an item

Khoa CNTT-ĐH.KHTN

• Giới thiệu

• Tạo bằng giao diện: Properties của listview,
items, Listview collection editor, subitems.
• Sử dụng hàm Add() của ListViewItem
Dim lviPortugal As ListViewItem = New
ListViewItem("Portugal")
lviPortugal.SubItems.Add("92,391")
GV. Trương Phước Lộc

18

ThS. Nguyễn Tấn Trần Minh Khang

3

9/15/2010

2. LISTVIEW
2.7 Sub Items of an item

Khoa CNTT-ĐH.KHTN

• Thay đổi font, màu nền, màu chữ
▫ Khởi tạo thuộc tính UseItemStyleForSubItems
của ListViewItem là false
▫ Sử dụng các thuộc tính Font, ForeColor,
BackColor của sub item

GV. Trương Phước Lộc

19

ThS. Nguyễn Tấn Trần Minh Khang

Khoa CNTT-ĐH.KHTN

2. LISTVIEW
2.9 Editing a Label

• Sử dụng thuộc tính LabelEdit.
• Các sự kiện BeforeLabelEdit, AfterLabelEdit.
=> tham số LabelEditEventArgs (Item,
CancelEdit)

GV. Trương Phước Lộc

21

ThS. Nguyễn Tấn Trần Minh Khang

2. LISTVIEW
2.11 Locating a ListViewItem

Khoa CNTT-ĐH.KHTN

• Sử dụng hàm GetItemAt()
• Ví dụ:
lvName.GetItemAt(x, y)

Khoa CNTT-ĐH.KHTN

2. LISTVIEW
2.8 Deleting Items

• Sử dụng hàm Remove(), RemoveAt()
• Xóa tồn bộ: Clear()
• Ví dụ
lvName.Items.Remove("aaa")
lvName.Items.RemoveAt(3)
lvName.Items.Clear()

GV. Trương Phước Lộc

20

ThS. Nguyễn Tấn Trần Minh Khang

Khoa CNTT-ĐH.KHTN
2. LISTVIEW
2.10 Font, text color & background
color of item

• Sử dụng các thuộc tính Font, ForeColor,
BackColor của item

GV. Trương Phước Lộc

22

ThS. Nguyễn Tấn Trần Minh Khang

Khoa CNTT-ĐH.KHTN

2. LISTVIEW
2.12 ListItems & CheckBoxes
• Sử dụng thuộc tính CheckBoxes.

• Thuộc tính CheckedIndices, CheckedItems

GV. Trương Phước Lộc

23

ThS. Nguyễn Tấn Trần Minh Khang

GV. Trương Phước Lộc

24

ThS. Nguyễn Tấn Trần Minh Khang

4


9/15/2010

2. LISTVIEW
2.13 Một số thuộc tính khác

Khoa CNTT-ĐH.KHTN

3. TREEVIEW
3.1 Introduction
3.2 Creating the nodes
3.3 Creating child nodes
3.4 Number of child nodes
3.5 Selecting nodes
3.6 Editing a node
3.7 Locating a node
3.8 Deleting a node
3.9 Check Boxes
3.10 Icons
3.11 Other properties

• Thuộc tính HeaderStyle.
• Thuộc tính FullRowSelect.
• Thuộc tính GridLines.

GV. Trương Phước Lộc

25

ThS. Nguyễn Tấn Trần Minh Khang

Khoa CNTT-ĐH.KHTN

3. TREEVIEW
3.1 Introduction

Khoa CNTT-ĐH.KHTN

• Thể hiện dạng cây
• Từng node bên trong nó là 1 TreeNode
• Trong 1 TreeNode có thể có 1 hoặc nhiều
TreeNode con.

GV. Trương Phước Lộc

26

ThS. Nguyễn Tấn Trần Minh Khang

Khoa CNTT-ĐH.KHTN

3. TREEVIEW
3.1 Introduction
• Thuộc tính
▫ Nodes
▫ SelectedNode
▫ ImageList

• Sự kiện
▫ AfterSelect
▫ BeforeSelect

• Phương thức
▫ CollapseAll
▫ ExpandAll
GV. Trương Phước Lộc

27

3. TREEVIEW
3.2 Creating the nodes

ThS. Nguyễn Tấn Trần Minh Khang

Khoa CNTT-ĐH.KHTN

• Sử dụng hàm Add(), AddRange(), Insert()
• Ví dụ:
Dim node as TreeNode =
tvName.Nodes.Add("aaa")

Dim nodNum() As TreeNode = _
{ New TreeNode(“1"), _
New TreeNode(“2"), _
New TreeNode(“3"), _
New TreeNode(“4") }
tvName.Nodes.AddRange(nodNum)
GV. Trương Phước Lộc

29

ThS. Nguyễn Tấn Trần Minh Khang

GV. Trương Phước Lộc

28

ThS. Nguyễn Tấn Trần Minh Khang

3. TREEVIEW
3.3 Creating child nodes

Khoa CNTT-ĐH.KHTN

• Sử dụng hàm khởi tạo của biến TreeNode
• Ví dụ:
Dim nodeNum() As TreeNode = _
{ New TreeNode(“1"), _
New TreeNode(“2"), _
New TreeNode(“3"), _
New TreeNode(“4") }

Dim node As TreeNode = _
New TreeNode(“Numbers", nodeNum)
tvName.Nodes.Add(node)
GV. Trương Phước Lộc

30

ThS. Nguyễn Tấn Trần Minh Khang

5


9/15/2010

3. TREEVIEW
3.3 Creating child nodes

Khoa CNTT-ĐH.KHTN

• Sử dụng hàm Add(), AddRange(), Insert() của
biến TreeNode
• Ví dụ:
Dim node As TreeNode =
tvName.Nodes.Add(“num")
node.Nodes.Add("333")

GV. Trương Phước Lộc

31

3. TREEVIEW
3.5 Selecting Nodes

ThS. Nguyễn Tấn Trần Minh Khang

Khoa CNTT-ĐH.KHTN

• Sử dụng thộc tính SelectedNode
• Sự kiện AfterSelect, BeforeSelect
• Ngồi ra, có thể sử dụng thuộc tính IsSelected
của TreeNode để kiểm tra node có được chọn
hay khơng.

3. TREEVIEW
3.4 Number of child nodes

Khoa CNTT-ĐH.KHTN

• Số nodes của TreeView (TreeNode) sử dụng
hàm GetNodeCount() của TreeView
(TreeNode)
• Tham số là True: kể cả node cháu.
• Tham số là False: chỉ có node con.
• Ví dụ:
tvName.GetNodeCount(true)
4
tvName.GetNodeCount(false)
3

GV. Trương Phước Lộc

32

ThS. Nguyễn Tấn Trần Minh Khang

Khoa CNTT-ĐH.KHTN

3. TREEVIEW
3.6 Editing a node

• Sử dụng thuộc tính LabelEdit.
• Các sự kiện BeforeLabelEdit, AfterLabelEdit.
=> tham số LabelEditEventArgs (Item,
CancelEdit)

• Duyệt node: sử dụng các thuộc tính FirstNode,
PrevNode, NextNode, LastNode của
TreeNode
GV. Trương Phước Lộc

33

3. TREEVIEW
3.7 Locating a node

ThS. Nguyễn Tấn Trần Minh Khang

Khoa CNTT-ĐH.KHTN

• Sử dụng hàm GetNodeAt()

• Ví dụ:
tvName.GetNodeAt(x, y)

GV. Trương Phước Lộc

35

GV. Trương Phước Lộc

34

ThS. Nguyễn Tấn Trần Minh Khang

Khoa CNTT-ĐH.KHTN

3. TREEVIEW
3.8 Deleting a node

• Sử dụng hàm Remove(), RemoveAt()
• Xóa tồn bộ: Clear()

ThS. Nguyễn Tấn Trần Minh Khang

GV. Trương Phước Lộc

36

ThS. Nguyễn Tấn Trần Minh Khang

6

9/15/2010

Khoa CNTT-ĐH.KHTN

3. TREEVIEW
3.9 Check Boxes
• Sử dụng thuộc tính CheckBoxes.

Khoa CNTT-ĐH.KHTN

3. TREEVIEW
3.10 Icons
• Sử dụng đối tượng ImageList
• Thuộc tính ImageList TreeView.
• Thuộc tính ImageIndex của Item.

• Sử dụng thuộc tính Checked của biến
TreeNode
• Sử dụng sự kiện AfterChecked.

GV. Trương Phước Lộc

37

ThS. Nguyễn Tấn Trần Minh Khang

Thuộc
Thuộc

Thuộc
Thuộc
Thuộc
Thuộc

39

ThS. Nguyễn Tấn Trần Minh Khang

Khoa CNTT-ĐH.KHTN

4. USER CONTROL
4.1 Introduction
• Extended Control

▫ Kế thừa từ lớp đối tượng tương ứng
▫ Bổ sung hoặc override các phương thức.
▫ Vd: textbox mới, button mới

• Custom Control
▫ Kế thừa tứ lớp control
▫ Tự vẽ hình dáng và cách ứng xử
▫ Vd: đồng hồ

• Composite Control
▫ Kế thừa tứ lớp UserControl
▫ Xác định các control con, bổ sung hoặc override lại
các phương thức.
▫ Vd: nhập thong tin khách hàng
GV. Trương Phước Lộc

41

ThS. Nguyễn Tấn Trần Minh Khang

Khoa CNTT-ĐH.KHTN

4. USER CONTROL

tính HotTracking của TreeView
tính ShowLines của TreeView
tính ShowRootLines của TreeView
tính FullRowSelect của TreeView
tính Indent của TreeView
tính FullPath của TreeView

GV. Trương Phước Lộc

38

Khoa CNTT-ĐH.KHTN

3. TREEVIEW
3.11 Other properties
•
•
•
•
•
•

GV. Trương Phước Lộc

ThS. Nguyễn Tấn Trần Minh Khang

4.1 Introduction
4.2 Creating control
4.3 Delegate & event

GV. Trương Phước Lộc

40

4. USER CONTROL
4.2 Creating control

ThS. Nguyễn Tấn Trần Minh Khang

Khoa CNTT-ĐH.KHTN

• Extended control
▫ Chuột phải project => Add New Item … =>
Custom Control
▫ Mở file *.Designer.vb chỉnh lại thành control cần
thiết.

• Custom control
▫ Chuột phải project => Add New Item … =>
Custom Control

• Composite control
▫ Chuột phải project => Add New Item … => User
Control
GV. Trương Phước Lộc

42

ThS. Nguyễn Tấn Trần Minh Khang

7


9/15/2010

Khoa CNTT-ĐH.KHTN

4. USER CONTROL
4.3 Delegate & event

Khoa CNTT-ĐH.KHTN

Q&A

• Delegate:
▫ Tương tự con trỏ hàm
▫ Khai báo
Public Delegate Sub SoNhaChangedHandler(ByVal
str As String)

• Event

▫ Khai báo
Public Event SoNhaChanged As
SoNhaChangedHandler
▫ Phát sự kiện
RaiseEvent SoNhaChanged(…)
GV. Trương Phước Lộc

43

ThS. Nguyễn Tấn Trần Minh Khang

GV. Trương Phước Lộc

44

ThS. Nguyễn Tấn Trần Minh Khang

8