Bài giảng Lập trình hướng đối tượng 2: Lập trình giao diện

Ậ

Ệ

L P TRÌNH GIAO DI N Graphical User Interface (GUI)

ộ

ộN i Dung 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

GUIGUI

Text user interface: TUI Text user interface: TUI Command line interface: CLI Command line interface: CLI

ươ ng tác qua

ự ứ ộ ươ ng tác cao

ầ ự T keyboard ự Th c thi tu n t GUI d a trên text M c đ t h nơ

GUIGUI

Graphical User Interface: GUI

ươ

ộ T giao di n đ h a đ phân gi ng tác qua ệ ồ ọ ả 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

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

GUI Application 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

Event Driven Programming Event Driven Programming

ố EventDriven Programming ề Cách truy n th ng

ự ố ượ

ệ Danh sách các l nh th c thi tu n tầ ự

ể ố ượ ữ ự ệ ớ ạ ng có th kích ho t Các đ i 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 chính là ệ l nh ti p theo trong danh sách

ệ ế ế ả ự ệ ụ Vi c k ti p x y ra ph thu c ế ế vào s ki n k ti p

ươ ượ Ch ự c th c thi Lu ng ch ng trình đ

ng trình đ ở b i máy tính ồ ươ ể ở ự ươ ki n b i s t ề ượ c đi u ng tác User

Computer

EventDriven Programming EventDriven 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

EventDriven Programming EventDriven Programming

 Minh họa xử lý trong form

Click

invoke

ậ User nh p text vào texbox > click ể Button đ add ậ ỗ chu i nh p vào listbox

ấ ữ ệ ừ L y d li u t textbox Add vào listbox

ư ự ệ

ủ Button đ a ra s ki n click Form có event handler cho click c a button

EventDriven Programming EventDriven 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

Windows Forms Application Windows Forms Application

Windows Form App 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à FormForm

Namespace

System.Windows.Forms. Form System.Windows.Forms. Form Class

ọ ọ

Minh h a WinForm App Minh h a WinForm App

ạ

ạT o WinForm App T o WinForm App

ạ T o project: Windows App

ạ ạ

ừ ừ

T o WinForm App t T o WinForm App t

VS VS

Windows App do ở ạ VS kh i t o

ụ

ứ 1: form ng d ng 2: control toolbox 3: Solution Explorer 4: Form properties

Ứ Ứ

ụ ụ

ơ ơ

ả ả

ng D ng WinForm đ n gi n ng D ng WinForm đ n gi n

Form1.cs ơ ở ớ L p Form c s

ể Control ki u Label

ế ế Thi t k form & control

Add control vào form

ạ ứ ụ ớ

Ch y ng d ng v i Form1 làm form chính

ụ ụ

ướ ạ ứ ướ ạ ứ

ơ ơ c t o ng d ng WinForm c c t o ng d ng WinForm c

c b CCáác b b nả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!

control Form vàà control Form v

 Tất cả các thành phần trên form đều là đối tượng  Các class control

object

 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

ủ ủ

CCáác thu c tộ

c thu c tộ íính c a Form 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

WindowsDefaultLocatio n

Nội dung hiển thị trên title bar

Form1, Form2, Form3

Text

Font cho form và mặc định cho các control

Font

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

ươ ươ

Ph Ph

ứ ủ ớ ứ ủ ớ ng th c c a l p Form 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

ủ ủ Event c a Form 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à

Tên event

user nhấn phím

Trình x ử lý n u cóế

ủ ủ Event c a Form 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

 Viết code cho event handler Form1_FormClosing

this.FormClosing += new FormClosingEventHandler( this.Form1_FormClosing this.FormClosing += new FormClosingEventHandler(

this.Form1_FormClosing ););

FormClosing

ổ

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  GroupBox, Panel & TabControl  PictureBox, ImageList 

TrackBar

 NumericUpDown  DomainUpDown  ProgressBar  MaskEditBox  DateTimePicker  MonthCalendar 



Timer ToolTip

 Mouse Event handling  Keyboard event handling

ổ

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

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 ng quan controls

 Gán giá trị cho thuộc tính của đối tượng

• Cú pháp

. = Giá trị;

ổ

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

Thu c tộ ính controls

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

Common Properties Description

ổ

T ng quan controls

Lệnh gọi thực hiện 1 phương thức (method) của đối tượng  Phương thức của đối tượng dùng để thực hiện một hành

động liên quan đến đối tượng đó

 Cú pháp

. ( [ Các tham số ] )

 Ví dụ

 Phương thức di chuyển con trỏ vào 1 đối tượng

.Focus();

ổ

T ng quan controls

Sử dụng thư viện các lớp đối tượng Thời gian:  Sử dụng lớp đối tượng DateTime  Cú pháp DateTime. ( [ Các tham số ] ) Ví dụ:  Lấy ngày giờ hiện hành của máy tính

DateTime.Now

 Lấy giờ hiện hành của máy tính

DateTime.Now.TimeOfDay

ổ

T ng quan controls

Sử dụng thư viện các lớp đối tượng Màu sắc:  Sử dụng lớp đối tượng Color  Cú pháp

Color.

 Ví dụ

 Màu xanh: Color.Blue  Màu đỏ: Color.Red  Màu trắng: Color.White  Màu đen: Color.Black  …

ổ

T ng quan controls

Sử dụng thư viện các lớp đối tượng Màu sắc:  Cách tô màu nền của Textbox

.BackColor = Color.Màu;

 Cách tô màu chữ của Textbox

.ForeColor = Color.Màu;

ổ

T ng quan controls

Các hàm toán học  Sử dụng lớp đối tượng Math

 Cú pháp

Math. ( [ Các tham số ] )

 Ví dụ

 Lấy căn bậc 2: Math.Sqrt(giá trị)  Lũy thừa x^y: Math.Pow(x,y)  Làm tròn số: Math.Round(giá trị)  Tìm Max 2 số: Math.Max(giá trị 1, giá trị 2)  Tìm Min 2 số: Math.Min(giá trị 1, giá trị 2)  …

ổ

T ng quan controls

Các hàm thường dùng  Hàm xuất thông báo

 MessageBox.Show (“”);  Ví dụ:

MessageBox.Show (“Xin chào!”);

 MessageBox.Show (“”, “”);  Ví dụ:

MessageBox.Show (“Xin chào!”, “Welcome”);

 Hàm đổi chuỗi thành số nguyên

 int.Parse()  Ví dụ: int.Parse (“123”) 123

Control Layout Anchor

None Sizable

FormBorderStyle

FixedDialog Fixed3D FixedSingle

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

Control Layout Anchor

ượ Button đ c neo biên trái

ị ươ ố ớ 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 Button t doự

Control Layout Anchor

 Thiết lập Anchor cho control

ọ Ch n các biên đ neoể

c ượ

Biên đ ọ ch n neo, màu đ mậ

Control Layout Anchor

Neo theo ố b n phía

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

Control Layout Docking

Top

Fill Left Right

Bottom

None

Control Layout Docking

Dock = None Dock = Top

TextBox

Dock = Fill TextBox.Multiline = True Dock = Bottom

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

Control Layout Alignment

nhẢ

Ý nghĩa

ắ

ế

ề

ượ

c s p canh li n ti p nhau theo

ề

ầ

ả

ạ

Các control đ chi u ngang. ố ữ ư L u ý: Kho ng cách gi a control đ u và cu i ẽ ượ s đ i cách c tính sao cho các control còn l đ 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

Control Layout Alignment

nhẢ

Ý nghĩa

ượ

ề

ế

ắ

c s p canh li n ti p nhau theo

ề

ọ

Các control đ 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

Control Layout Alignment

nhẢ

Ý nghĩa

ở ữ

ề

gi a form theo chi u ngang

Canh control (d c)ọ

ằ

ặ

ằ

ướ

i 2

ằ

ồ Xét control n m ch ng lên ho c n m d control n m lên nhau

ế ậ

Tab Index cho các control.

ứ ự ừ

0>N. ươ

t i dùng nh n Tab trong ch

c focus theo th t

ng trình ứ ự qui

ứ ự Thi t l p th t ẽ ượ c đánh th t Các control s đ ấ ườ Khi ng ẽ ượ thì các control s đ ị đ nh.

Các Control

Label, TextBox, Button Label, TextBox, Button

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

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ế

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() {

lb

Label lb = new Label(); lb.Text = "This is Lable Object"; this.Controls.Add(lb);

}

btnPush btnExit

Label, TextBox, Button

TextBox

Thuộc tính thường dùng

Font hiển thị của text Font

Nội dung text hiển thị Text

Canh lề text TextAlign

Màu text ForeColor

Trạng thái hiển thị Visible

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

Label, TextBox, Button

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

ScrollBars

Thanh cuộn cho chế độ multiline

Thuộc tính 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

Event thường dùng

Label, TextBox, Button

 Demo TextBox

ữ ể Chuy n thành ch hoa

ể ạ

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

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

lblHoVaTen lblHoVaTen

void CreateControls() {

txtHoLot txtHoLot

lblHoLot lblHoLot

TextBox txt = new TextBox(); txt.Name = "txtHoLot"; txt.Text = "This is TextBox Object"; this.Controls.Add(txt);

txtTen txtTen

lblTen lblTen

btnHoLot 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

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ị

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 formo form Thêm control v

 Kéo thả control vào form

ủ ủ

ầ ầ

Code c a ph n design 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

ng control trên

Khai báo các đ i ố ượ t Form1

ủ ủ

ầ ầ

Code c a ph n design Code c a ph n design

InitializeComponent

ạ ố ượ T o đ i t ng

ầ ượ t

L n l khai báo các ộ thu c tính cho các control

ủ ủ

ầ ầ

Code c a ph n design Code c a ph n design

InitializeComponent

ủ Đ a các control vào danh sách control c a Form1

ử ử

S a thu c t S a thu c t

ủ ộ íính c a control ủ ộ nh c a control

ổ Đ i tên thành txtNum1

ổ

ự ậ ử c p

ậ ị Thay đ i các giá tr qua c a ổ s properties > VS t nh t code

ử ử

ầ ầ

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ý của form gọi là Event Handler  Form đóng vai trò là lớp subscribe

phần xử lý ngay khi button click.

o event handler Khai bááo event handler Khai b

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

DClick

event

ử ổ ả C a s qu n lý ủ event c a BtnAdd

o event handler Khai bááo event handler Khai b

Event handler cho button Add

ớ Cùng signature method v i System.EventHandler

o event handler Khai bááo event handler Khai b

InitializeComponent

ử c ự ệ S ki n click ượ ả ọ Trình x lý đ g i khi event x y ra

ẩ Delegate chu n cho event handler

ế ế

ử ử

ầ ầ

Vi Vi

t ph n x lý 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

ữ ệ ữ ệ

ể ể

ậ ậ

Ki m tra d li u nh p 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ừ

 Chặn xử lý sự kiện TextChanged khi user nhập liệu vào

ToolBox/Component vào form

 Nếu nhập sai thiết lập lỗi cho control ErrorProvider cảnh

textbox

báo!

ổ

ổB sung ErrorProvider B sung ErrorProvider

ả Kéo th ErrorProvider vào design view

ự ệ ự ệ

ủ ủ

ử ử

X lý s ki n TextChanged c a textBox X lý s ki n TextChanged c a textBox

ể ầ Ph n ki m tra

ả ả

ErrorProvider c nh b ErrorProvider c nh b

ááoo

ể Icon hi n th l ị ỗ i

ộ

ể Di chuy n chu t vào icon, tooltip xu t ấ hi nệ

ậ

Bài t p 1 Trang 1

lblHoVaTen lblHoVaTen

txtHoLot txtHoLot

lblHoLot lblHoLot

txtTen txtTen

lblTen lblTen

btnHoLot btnHoLot

Các Control

CheckBox RadioButton CheckBox RadioButton

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 Properties Appearance

CheckedChanged

Checked Text ThreeState

CheckBox

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

Thuộc tính thường dùng

CheckBox

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ị

Event thường dùng

CheckBox

 ThreeState

ThreeState = 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

CheckBox

Khai báo và khởi tạo đối tượng 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);

}

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

CheckedChanged

Checked Text

RadioButton

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

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

RadioButton

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

Thuộc tính thường dùng

RadioButton

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ị

Event thường dùng

RadioButton

Khai báo và khởi tạo đối tượng 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);

}

Bài T pậ

Các Control

ListBox & ComboBox ListBox & ComboBox

ListBox & ComboBox

danh sách các item cho phép user chọn

ListBox  ListBox  Cung cấp một danh sách các item  ListBox cho phép hiển thị scroll nếu các item vượt quá vùng

thể hiện của ListBox

Properties Properties

ListBox ListBox

SelectedItems Sorted Text

Items MultiColumn SelectedIndex SelectedItem

ListBox & ComboBox

Method & Event  Method & Event

Method Method ClearSelected

ListBox ListBox

GetSelected

Event Event

SetSelected FindString

SelectedIndexChanged

SelectedValueChanged

ListBox & ComboBox

BorderStyle

Kiểu đường viền

DataSource

Tập dữ liệu vào điều khiển

DisplayMember

Tên của trường tương ứng với chuỗi trình bày trên điều khiển

MultiColumn

Cho phép trình bày danh sách phần tử trên điều khiển có nhiều cột

Items

Tập các phần tử trong điều khiển,bạn có thể sử dụng phương thức Add và AddRange để thêm chuỗi hay phần tử với khóa và giá trị vào điều khiển ComboBox

ColumnWidth

Chiều rộng của mỗi cột nếu phần tử trình bày trên điều khiển có nhiều cột

Thuộc tính thường dùng

ListBox & ComboBox

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

Thuộc tính thường dùng

ListBox & ComboBox

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ử

Event thường dùng

ListBox & ComboBox

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ị

Xảy ra khi thuộc tính Visible thay đổi giá trị

VisibleChanged

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

Event thường dùng

ListBox & ComboBox

Khai báo và khởi tạo đối tượng 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);

}

ListBox & ComboBox

Items cho phép thêm item vào ListBox

 Thuộc tính Items

Danh sách item

Cho phép thêm item t ế trong màn hình thi k formế

ListBox & ComboBox

 ListBox hiển thị dạng Multi Column

ể ị ề ộ Hi n th nhi u c t

ListBox & ComboBox

ListBox  Demo ListBox

ể ỗ ậ

Ki m tra xem chu i nh p có trong list box? ế N u có: select item đó Ng ỗ ớ i: thêm chu i m i vào list box ượ ạ c l

ListBox & ComboBox

 Sự kiện SelectedIndexChanged

ỗ

SelectedIndexChanged SelectedIndexChanged

ượ ọ M i khi kích ch n vào item trong listbox (cid:0) ẽ s xóa item ọ ươ ứ ng ng c ch n t đ

ListBox & ComboBox

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

MaxDropDownItems

ComboBox ComboBox

DropDownStyle

AutoCompleteMode

Text

DropDownHeight

ListBox & ComboBox

FlatStyle

Kiểu đường viền

DataSource

Tập dữ liệu vào điều khiển

DisplayMember

Tên của trường tương ứng với chuỗi trình bày trên điều khiển

DropDownStyle

Kiểu trình bày danh sách phần tử, mặc định là Dropdown(cho phép thêm mới chuỗi),Dro[downList chỉ cho phép chọn trong danh sách, Simple(dạng danh sách)

Items

Tập các phần tử trong điều khiển, bạn có thể sử dụng phương thức Add và AddRange để thêm chuỗi hay phần tử với khóa và giá trị vào điều khiển ComboBox

MaxDropDownItems

Số phần tử lớn nhất có thể liệt kê

Thuộc tính thường dùng

ListBox & ComboBox

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

Thuộc tính thường dùng

ListBox & ComboBox

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

Event thường dùng

ListBox & ComboBox

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ị

Xảy ra khi thuộc tính Visible thay đổi giá trị

VisibleChanged

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

Event thường dùng

ListBox & ComboBox

Khai báo và khởi tạo đối tượng 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);

}

ListBox & ComboBox

DropDownStyle  DropDownStyle

ListBox & ComboBox

ổ B sung item trong màn hình design view ứ ử ụ ng th c ADD Combobox

ươ //S d ng ph for(int i=1; i<=12;i++) cboThu.Items.Add("Mon "+i.ToString());

ListBox & ComboBox

(cid:0)

ượ ỗ ộ th item đ

ọ M i khi kích ch n hi n ể m t item ị ọ c ch n trên MessageBox

ListBox & ComboBox

AutoComplete

Gõ “Ng”

AutoComplete  Tính năng AutoComplete

AutoCompleteMode

AutoCompleteSource

ListBox & ComboBox

Sử dụng biến cố SelectionChangeCommitted  Sử dụng biến cố SelectionChangeCommitted private void cboThu_SelectionChangeCommitted(object sender,

EventArgs e)

MessageBox.Show(cboThu.SelectedItem.ToString(), "C#

căn bản");

{ MessageBox.Show(cboThu.SelectedText, "LẬP TRÌNH C#");

}

ListBox & ComboBox

Sử dụng phương thức AddRange  Sử 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"; SelectedValue Sử dụng thuộc tính SelectedValue  Sử dụng thuộc tính private void cboThu_SelectedValueChanged(object sender,

EventArgs e)

{ MessageBox.Show("Value := " +

Convert.ToString(cboThu.SelectedValue),

"ComBo Box");

}

CheckedListBox

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

box.

Properties Properties

SelectedIndexChanged

CheckedItems CheckedIndices

SelectedIndices

SelectedValueChanged

SelectedIndices

Method Method ClearSelected

MultiColumn SelectionMode Items

SetSelected

CheckedListBox

BorderStyle

Kiểu dường viền của điều khiển ChoobcaLasiBox

MultiColumn

Cho phép trình bày danh sách phân tử trên điều khiển có nhiều cột

ColumnWidth

Chiều rộng của mỗi cột nếu phần tử trình bày trên điều khiển có nhiều cột

Items

Tập các phần tử có trong điều khiển, bạn có thể sử dụng phương thức Add và AddRange để thêm chuỗi hay phần tử với khóa và giá trị vào điều khiển CheckedListBox

SelectionMode

Cho phép chọn một hay nhiều phần tử cùng một lúc

Sorted

Nếu chọn True thì danh sách sắp xếp tăng dần theo giá trị

SelectedItems

Trả về tập phần tử chọn

Thuộc tính thường dùng Ý nghĩa

CheckedListBox

Items lưu trữ danh sách item

 Thuộc tính Items  Có thể bổ sung vào thời điểm

 Design time  Run time

ượ Item đ c check

ượ Item đ c select

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

}

CheckedListBox

MultiColumn = true  MultiColumn = true

ứ

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

CheckedListBox

SelectedIndexChanged  Sự kiện SelectedIndexChanged

Các Control

GroupBox, Panel & TabControl GroupBox, Panel & TabControl

GroupBox & Panel

 Bố trí controls trên GUI GroupBox  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  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

GroupBox & Panel

Groupbox

Mô tả

ộ

ườ

Thu c tính th

ng dùng

Controls Text

Panel ườ

ộ

ng dùng

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

ấ ệ

ỏ ể ể

Thu c tính th AutoScroll

ặ ị

ủ

BorderStyle

ứ

ị ế Xu t hi n khi panel quá nh đ hi n th h t các control, m c đ nh là false Biên c a panel, m c đ nh là None, các tham ố s khác nh Fixed3D, FixedSingle Danh sách control ch a trong panel

Controls

GroupBox & Panel

GroupBox  Minh họa GroupBox

ứ

groupBox1 ch a 2 control textBox1 và button1

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

GroupBox & Panel

Panel  Minh họa Panel

scroll

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)

TabControl

 TabControl

TabPages TabControl có thuộc tính TabPages TabPage  Chứa các đối tượng TabPage

TabPage

TabControl

TabPage

TabControl

Appearance  Thuộc tính Appearance

Normal Normal

FlatButton FlatButton

Buttons Buttons

TabControl

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

Properties Properties TabPages

Method Method SelectTab

TabCount

DeselectTab

SelectedTab

Multiline

Event Event

SelectedIndex

SelectedIndexChanged

TabControl

 Thêm/Xóa TabPage

ộ ả Kích chu t ph i

Thêm/Xóa TabPage

TabControl

 Chỉnh sửa các TabPage

TabPages của TabControl

 Chọn thuộc tính TabPages  Sử dụng màn hình TabPage Collection Editor

TabPage Collection Editor để chỉnh sửa

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

PictureBox

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

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

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

ImageList

ImageList  Tạo ImageList

ImageList

 Sử dụng ImageList trong ListView

listView1

Khai báo ImageList cho ListView

ị ạ ể Hi n th d ng small icon

ImageList

 Thêm Item

Khai báo image cho item qua ImageIndex

ImageList

 Demo

ẽ ỗ

ả

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

TrackBar

 Cho phép user thiết lập giá trị trong khoảng cố định cho

 Thao tác qua thiết bị chuột hoặc bàn phím

Properties

Minimum

Maximum

ValueChanged Scroll

TickFrequency

Methods

TickStyle

Value

SetRange

TrackBar

ể ệ

ạ

T o th hi n

public void AddTrackBar() { TrackBar tb1 = new TrackBar(); tb1.Location = new Point(10, 10); tb1.Size = new Size(250, 50);

ế ậ

Thi

ả t l p kho ng: 0 100

tb1.Minimum = 0; tb1.Maximum = 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

tb1.SmallChange = 1; tb1.LargeChange = 5; tb1.TickStyle = TickStyle.BottomRight;

ở

bên ả

i/bên ph i

ể Ki u stick ướ d track

ố ữ

ả S kho ng cách gi a các tick mark

tb1.TickFrequency = 10; tb1.Value = 10; Controls.Add(tb1); }

TrackBar

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

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

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

ể ị ạ // hi n th d ng hexa

ỏ

ướ numUpDn.Hexadecimal = true; numUpDn.Minimum = 0; numUpDn.Maximum = 255; numUpDn.Value = 0xFF; numUpDn.Increment = 1; ấ ị // giá tr nh nh t ấ ị ớ // giá tr l n nh t ở ạ ị // giá tr kh i t o ả c tăng/gi m // b

ủ // thêm control vào ds control c a form

Controls.Add(numUpDn); }

NumericUpDown

 Demo

ị ả Tăng gi m giá tr

ị

ể Hi n th giá ị tr Hexa

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

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

DomainUpDown

 Nhập item cho DomainUpDown

ậ String Collection Editor Cho phép nh p item

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

ProgressBar

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

Max = 100 Min = 0

Step = 10

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

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:

MaskEditBox

ế ậ • Custom: Thi ị t l p giá tr Mask tùy ý

ầ

Thành ph n mask

Ý nghĩa ả

ộ

ố

ầ

ậ ố ừ

ắ

S . Yêu c u b t bu c ph i nh p s t ắ

ả

ặ

ố

S ho c kho ng tr ng (Optional)

ả

ặ ấ

ố ậ

ặ

ể ắ S ho c kho ng tr ng (Optional). Có th nh p d u + ho c

ự

ặ

ắ

ộ

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)

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ự

 MaskFull: trả về giá trị true/false cho biết các ký tự tùy chọn

bắt buột trong mark có nhập đủ hay không

 Prompt Char: ký tự hiển thị trong textbox giúp người sử

và bắt buột trong mark có nhập đủ hay không

dụng biết nơi cần nhập nội dung

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

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

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

DateTimePicker

 Demo

ị ấ 'Ngày' dd 'tháng' MM 'năm' yyyy ạ Đ nh d ng xu t:

ị ộ

Kích drop down ể ệ đ hi n th h p ọ ch n ngày

ọ ả Ch n ngày trong ướ c kho ng cho tr

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…

Timer

 Bộ định thời gian, thiết lập một khoảng thời gian xác định (interval) và khi hết khoảng thời gian đó Timer sẽ phát sinh sự kiện tick.

Properties

Enabled

Interval

Methods

Start

Stop

Tick

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

Timer

 Sự kiện Tick

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

Timer

 Demo

ỗ ự ệ

ủ

ẽ ấ ể

M i giây s ki n Tick phát sinh. Trình ử x lý c a Tick s l y ờ ệ ố h th ng và hi n gi ị th lên Label

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.

ToolTip

 Tạo ToolTip

ToolTip

 Khai báo Tooltip cho textbox trong Design View

ộ N i dung Tooltip

ToolTip

 Khai báo tooltip cho button

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

ToolTip

 Khai báo tooltip cho listbox bằng code

ToolTip

 Demo

ấ ệ

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

Các Event

Mouse Event Mouse Event

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

MouseEventArgs được sử dụng để chứa thông tin

 Lớp MouseEventArgs

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)

Mouse Event

 Tham số cho sự kiện liên quan đến mouse

MouseEventArgs MouseEventArgs

ố ầ ố ầ ộ ộ S l n kích chu t S l n kích chu t ượ ượ ấ ấ Button đ Button đ c nh n c nh n

ủ ọ ộ ủ ọ ộ T a đ (x,y) c a T a đ (x,y) c a ộ ỏ ộ ỏ con tr chu t con tr chu t

Mouse Event

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 EventArgs

Xuất hiện khi button được nhấn/thả và con trỏ chuột đang ở trong vùng biên của control

MouseDown/ MouseUp

MouseMove

Xuất hiện khi chuột di chuyển và con trỏ chuột ở trong vùng biên của control

Sự kiện chuột với tham số kiểu MouseEventArgs

Mouse Event

Button

Button được nhấn {Left, Right, Middle, none} có kiểu là MouseButtons

Clicks

Số lần button được nhấn

Tọa độ x của con trỏ chuột trong control

Tọa độ y của con trỏ chuột trong control

Thuộc tính của lớp MouseEventArgs

Mouse Event

 MouseMove

Mouse Event

 Demo

ệ ạ ị V trí hi n t ỏ ủ c a con tr chu tộ

ị ọ ộ ệ ể Hi n th t a đ hi n ộ ỏ ạ ủ i c a con tr chu t t

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

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 ộ khi chu t trái đ ữ ọ ộ t a đ ượ c click

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

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

Các Event

Keyboard Event Keyboard Event

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.

Keyboard Event

Sự kiện với tham số kiểu KeyEventArgs 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 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 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 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ý

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

Keyboard Event

 Keys Enumeration

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

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

Keyboard Event

 Bước 2:

 Tạo KeyPress Event Handling cho form

Keyboard Event

 Bước 3:

 Tạo KeyDown Event Handling cho form

Keyboard Event

 Demo

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

KeyPreview  Thiết lập thuộc tính KeyPreview

cho Form để nhận sự kiện bàn phím.

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

tắ

Tóm 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

Bài giảng Lập trình hướng đối tượng 2: Lập trình giao diện - ĐH Kinh tế TP.HCM

Ậ

Ệ

L P TRÌNH GIAO DI N Graphical User Interface (GUI)

ộ

ộN i Dung N i Dung

GUIGUI

GUIGUI

GUIsGUIs

GUI Application GUI Application

Event­ Driven Programming Event­ Driven Programming

Event­Driven Programming Event­Driven Programming

Event­Driven Programming Event­Driven Programming

Event­Driven Programming Event­Driven Programming

Windows Forms Application Windows Forms Application

Windows Form App Windows Form App

System.Windows.Forms. Form System.Windows.Forms. Form Class

ọ ọ

Minh h a WinForm App Minh h a WinForm App

ạ

ạT o WinForm App T o WinForm App

ạ ạ

ừ ừ

T o WinForm App t T o WinForm App t

VS VS

Ứ Ứ

ụ ụ

ơ ơ

ả ả

ng D ng WinForm đ n gi n ng D ng WinForm đ n gi n

ụ ụ

ướ ạ ứ ướ ạ ứ

ơ ơ c t o ng d ng WinForm c c t o ng d ng WinForm c

c b CCáác b b nảb nả  Tạo lớp kế thừa từ lớp Form cơ sở  Bổ sung các control vào form

form

ỗ ợ ế ế

ử ụ

control Form vàà control Form v

lớp trên.

ủ ủ

CCáác thu c tộ

c thu c tộ íính c a Form nh c a Form

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

WindowsDefaultLocatio n

Nội dung hiển thị trên title bar

Form1, Form2, Form3

Text

Font cho form và mặc định cho các control

Font

Close

Đóng form và free resource

Hide

ẩn form

Show

Hiển thị form đang ẩn

Load

Xuất hiện trước khi form show

ươ ươ

Ph Ph

ứ ủ ớ ứ ủ ớ ng th c c a l p Form ng th c c a l p Form

ủ ủ Event c a Form Event c a Form

lần đầu tiên

đóng

user nhấn phím

ủ ủ Event c a Form Event c a Form

ứ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

Event Driven Programming Event Driven Programming

EventDriven Programming EventDriven Programming

EventDriven Programming EventDriven Programming

EventDriven Programming EventDriven Programming

Control Layout Anchor

Control Layout Anchor

Control Layout Anchor

Control Layout Anchor

Control Layout Anchor

Control Layout Docking

Control Layout Docking

Control Layout Docking

Control Layout Alignment

Control Layout Alignment

Control Layout Alignment

Control Layout Alignment