Bài giảng Lập trình hướng đối tượng - Chương 7: Tương tác với người dùng trong ứng dụng C#

Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 1
7.0 Dẫn nhập 
7.1 Tổng quát về tương tác giữa người dùng & chương trình
7.2 Đối tượng vẽ và cơ chế vẽ nội dung
7.3 Xuất chuỗi văn bản
7.4 Xuất ảnh bitmap
7.5 Xuất hình ₫ồ họa toán học
7.6 Thí dụ viết ứng dụng vẽ ₫ối tượng phức hợp
7.7 Xây dựng ₫ối tượng giao diện có hình dạng tùy ý
7.8 Kết chương
Chương 7
Tương tác với người dùng trong ứng dụng C#
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 2
7.0 Dẫn nhập 
 Chương này giới thiệu cách thức tương tác giữa người dùng và
chương trình ₫ể nhập/xuất dữ liệu.
 Chương này cũng giới thiệu các ₫ối tượng giao diện cùng các tác
vụ xuất dữ liệu dạng chuỗi, dạng bitmap, dạng hình ₫ồ họa toán
học. Kết hợp 3 loại dữ liệu này, ta có thể tạo kết xuất bất kỳ.
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 3
7.1 Tổng quát về tương tác người dùng/chương trình
 Trong lúc chương trình chạy, nó thường phải tương tác với người
dùng. Sự tương tác gồm 2 hoạt ₫ộng chính :
 chờ nhận dữ liệu do người dùng cung cấp hay chờ nhận lệnh
của người dùng ₫ể thực thi 1 chức năng nào ₫ó.
 hiển thị thông báo và/hoặc kết quả tính toán ra màn hình/máy
in ₫ể người dùng biết và sử dụng.
 Sự tương tác giữa người dùng và máy tính ₫ược thực hiện thông
qua các thiết bị nhập/xuất (thiết bị I/O - input/output) như bàn
phím/chuột ₫ể nhập dữ liệu hay lệnh, màn hình/máy in ₫ể xuất kết
quả hay thông báo...
 Hiện có hàng trăm hãng chế tạo thiết bị I/O, mỗi hãng chế tạo rất
nhiều model của cùng 1 thiết bị (td. hãng HP chế rất nhiều model
máy in phun mực, máy in laser,...). Mỗi model thiết bị của từng
hãng có những tính chất vật lý riêng và khác với các model khác.
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 4
7.1 Tổng quát về tương tác người dùng/chương trình
 Để giúp người lập trình truy xuất các thiết bị I/O dễ dàng, ₫ộc lập
với tính chất phần cứng của thiết bị, HĐH Windows và VC# ₫ã che
dấu mọi tính chất phần cứng của các thiết bị và cung cấp cho người
lập trình 1 giao tiếp sử dụng duy nhất, ₫ộc lập với thiết bị : người
dùng sẽ tương tác với chương trình thông qua các ₫ối tượng giao
diện :
 người dùng ra lệnh bằng cách kích hoạt sự kiện xác ₫ịnh của 1
₫ối tượng giao diện. Thí dụ click chuột vào button "Bắt ₫ầu giải"
₫ể ra lệnh chương trình giải dùm phương trình bậc 2 có 3 tham
số a, b, c ₫ã nhập.
 nhập giá trị ₫úng/sai thông qua chọn/cấm chọn RadioButton
hay checkbox.
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 5
7.1 Tổng quát về tương tác người dùng/chương trình
 nhập chọn lựa 1/n thông qua chọn RadioButton tương ứng
trong GroupBox, hay chọn mục tương ứng trong Listbox,
ComboBox.
 nhập số nguyên, số thực, chuỗi thông qua TextBox...
 xuất kết quả ra màn hình thông qua các ₫ối tượng RadioButton,
Checkbox, TextBox, ListBox, ComboxBox, TreeView...
 Trong trường hợp cần xuất kết quả phức tạp bất kỳ, ta xem nó như
là tập hợp nhiều chuỗi văn bản, nhiều phần tử ảnh bitmap, nhiều
phần tử ₫ồ họa toán học như hình chữ nhật, hình tròn,... Xuất kết
quả phức tạp là quá trình lặp vẽ từng phần tử cấu thành kết quả
phức tạp.
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 6
7.2 Đối tượng vẽ và cơ chế vẽ nội dung
 Các ₫ối tượng Form, PictureBox, Printer cho phép vẽ nội dung bất
kỳ lên chúng.
 Mỗi lần cần vẽ lại nội dung của ₫ối tượng (lúc bắt ₫ầu hiển thị, lúc
thay ₫ổi vị trí, kích thước của ₫ối tượng), máy sẽ tạo sự kiện Paint,
sự kiện này sẽ kích hoạt hàm xử lý tương ứng của ₫ối tượng. Như
vậy, nếu muốn vẽ thông tin chi tiết lên ₫ối tượng, người lập trình
phải ₫ịnh nghĩa hàm xử lý sự kiện Paint của ₫ối tượng và hiện
thực thuật giải ₫ể vẽ chi tiết thông tin lên ₫ối tượng.
 Khi cần thiết, người lập trình có thể gọi tác vụ Refresh() của ₫ối
tượng ₫ể nhờ máy tạo dùm sự kiện Paint hầu vẽ lại ₫ối tượng.
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 7
7.2 Đối tượng vẽ và cơ chế vẽ nội dung
 Template của hàm xử lý sự kiện Paint của ₫ối tượng như sau :
private void Form1_Paint(object sender, PaintEventArgs e) {
//xác ₫ịnh ₫ối tượng mục tiêu
Control control = (Control)sender;
//thay ₫ổi kích thước, vị trí nếu cần
//xác ₫ịnh ₫ối tượng graphics (₫ối tượng vẽ) của ₫ối tượng
Graphics g = e.Graphics;
//gọi các tác vụ vẽ của ₫ối tượng vẽ như DrawImage,
//DrawString, DrawLine,... ₫ể xuất các thông tin bitmap,
//chuỗi văn bản, hình ₫ồ họa toán học.
}
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 8
7.3 Xuất chuỗi văn bản
 Đối tượng vẽ (graphics) cung cấp khoảng 70 tác vụ vẽ khác nhau,
mỗi tác vụ gồm nhiều biến thể (overloaded) ₫ể giúp ta ₫iều khiển
vẽ nội dung dễ dàng, tiện lợi. Ở ₫ây chúng ta chỉ giới thiệu 1 số tác
vụ phổ dụng.
 Tác vụ DrawString cho phép xuất chuỗi văn bản theo ₫ịnh dạng
xác ₫ịnh. Nó có nhiều biến thể, biến thể khá mạnh và dùng phổ
biến có ₫ặc tả như sau :
public void DrawString (
string s, //chuỗi cần xuất
Font font, //các tính chất font chữ cần dùng ₫ể vẽ
Brush brush, //màu vẽ chuỗi
float x, //toạ ₫ộ x của ₫iểm canh lề chuỗi
float y, //tọa ₫ộ y của ₫iểm canh lề chuỗi
StringFormat format); //thuộc tính ₫iều khiển vẽ chuỗi
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 9
7.3 Xuất chuỗi văn bản
 Thí dụ ta có biến now miêu tả thông tin thời ₫iểm hiện hành, ta có
thể viết ₫oạn code sau ₫ể rút trích thông tin từ biến now và xuất
thông tin giờ/phút/giây ra giữa form ứng dụng :
//tạo chuỗi miêu tả giờ/phút/giây hiện hành
String buf = "" + now.Hour + ":" + now.Minute + ":" + now.Second;
//tạo ₫ối tượng font chữ cần dùng
Font myFont = new Font("Helvetica", 11);
//tạo biến miêu tả chế ₫ộ canh giữa khi xuất chuỗi
StringFormat format1 = new StringFormat(StringFormatFlags.NoClip);
format1.Alignment = StringAlignment.Center;
//xuất chuỗi miêu tả giờ/phút/giây
g.DrawString(buf, myFont, System.Drawing.Brushes.Blue,
xo, rec.Height - 35, format1);
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 10
7.4 Xuất ảnh bitmap
 Tác vụ DrawImage cho phép vẽ bitmap từ nguồn có sẵn, thí dụ từ
file bitmap. Nó có nhiều biến thể, biến thể khá mạnh và dùng phổ
biến có ₫ặc tả như sau :
public void DrawImage (
Image image, //₫ối tượng chứa ảnh bitmap gốc
Rectangle destRect, //vùng chữ nhật chứa kết quả
//trong ₫ối tượng vẽ
int srcX, //tọa ₫ộ x của vùng ảnh gốc
int srcY, //tọa ₫ộ y của vùng ảnh gốc
int srcWidth, //₫ộ rộng vùng ảnh gốc cần vẽ
int srcHeight, //₫ộ cao vùng ảnh gốc cần vẽ
GraphicsUnit srcUnit, //₫ơn vị ₫o lường ₫ược dùng
ImageAttributes imageAttr) //cách thức xử lý từng pixel
//ảnh gốc khi vẽ
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 11
7.4 Xuất ảnh bitmap
Image
destRect
srcX, srcY, srcWidth, srcHeight
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 12
7.5 Xuất hình ₫ồ họa - Tác vụ DrawLine
 Tác vụ DrawLine cho phép vẽ ₫oạn thẳng ₫ược xác ₫ịnh bởi 2
₫ỉnh. Nó có nhiều biến thể, biến thể khá mạnh và dùng phổ biến
có ₫ặc tả như sau :
public void DrawLine (
Pen pen, //miêu tả nét, màu ₫ường vẽ
int x1, //tọa ₫ộ x của ₫iểm ₫ầu
int y1, //tọa ₫ộ y của ₫iểm ₫ầu
int x2, //tọa ₫ộ x của ₫iểm cuối
int y2); //tọa ₫ộ y của ₫iểm cuối
 Trước khi gọi DrawLine, phải tạo ₫ối tượng Pen miêu tả nét, màu
của ₫ường vẽ :
//tạo pen với màu Blue, nét vẽ 2 pixel
Pen pen = new Pen(Color.FromArgb(0,0, 255), 2);
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 13
7.5 Xuất hình ₫ồ họa - Tác vụ DrawLines
 Tác vụ DrawLines cho phép vẽ nhiều ₫oạn thẳng liên tiếp nhau
₫ược xác ₫ịnh bởi danh sách các ₫ỉnh. Nó có nhiều biến thể, biến
thể khá mạnh và dùng phổ biến có ₫ặc tả như sau :
public void DrawLines (
Pen pen, //miêu tả nét, màu ₫ường vẽ
Point[] points); //danh sách các ₫ỉnh
 Trước khi gọi DrawLines, phải tạo ₫ối tượng Pen miêu tả nét, màu
của ₫ường vẽ :
//tạo pen với màu Blue, nét vẽ 2 pixel
Pen pen = new Pen(Color.FromArgb(0,0, 255), 2);
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 14
7.5 Xuất hình ₫ồ họa - Tác vụ DrawRectangle
 Tác vụ DrawRectangle cho phép vẽ hình chữ nhật ₫ược xác ₫ịnh
bởi 2 ₫ỉnh chéo nhau. Nó có nhiều biến thể, biến thể khá mạnh và
dùng phổ biến có ₫ặc tả như sau :
public void DrawRectangle (
Pen pen, //miêu tả nét, màu ₫ường vẽ
int x1, //tọa ₫ộ x của ₫iểm ₫ầu
int y1, //tọa ₫ộ y của ₫iểm ₫ầu
int x2, //tọa ₫ộ x của ₫iểm cuối
int y2) //tọa ₫ộ y của ₫iểm cuối
 Lưu ý tác vụ DrawRectangle chỉ vẽ ₫ường biên, muốn tô nền hình
chữ nhật, ta cần gọi tác vụ FillRectangle (₫ặc tả giống như tác vụ
DrawRectangle), chỉ khác là tham số ₫ầu là ₫ối tượng mẫu tô :
//tạo brush với màu ₫ỏ, tô ₫ặc
Brush brush = new SolidBrush(Color.FromArgb(255, 0, 0));
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 15
7.5 Xuất hình ₫ồ họa - Tác vụ DrawEllipse
 Tác vụ DrawEllipse cho phép vẽ hình ellipse ₫ược xác ₫ịnh bởi
hình chữ nhật bao quanh nó. Nó có nhiều biến thể, biến thể khá
mạnh và dùng phổ biến có ₫ặc tả như sau :
public void DrawEllipse (
Pen pen, //miêu tả nét, màu ₫ường vẽ
int x1, //tọa ₫ộ x của ₫iểm ₫ầu
int y1, //tọa ₫ộ y của ₫iểm ₫ầu
int x2, //tọa ₫ộ x của ₫iểm cuối
int y2) //tọa ₫ộ y của ₫iểm cuối
 Lưu ý tác vụ DrawEllipse chỉ vẽ ₫ường biên, muốn tô nền hình
ellipse, ta cần gọi tác vụ FillEllipse (₫ặc tả giống như tác vụ
DrawEllipse), chỉ khác là tham số ₫ầu là ₫ối tượng mẫu tô :
//tạo brush với màu ₫ỏ, tô ₫ặc
Brush brush = new SolidBrush(Color.FromArgb(255, 0, 0));
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 16
7.5 Xuất hình ₫ồ họa - Tác vụ DrawArc
 Tác vụ DrawArc cho phép vẽ 1 phần ₫ường ellipse ₫ược xác ₫ịnh
bởi hình chữ nhật bao quanh nó. Nó có nhiều biến thể, biến thể
khá mạnh và dùng phổ biến có ₫ặc tả như sau :
public void DrawArc (
Pen pen, //miêu tả nét, màu ₫ường vẽ
Rectangle rect, //miêu tả hình chữ nhật ngoại tiếp
float startAngle, //góc bắt ₫ầu (theo chiều kim ₫ồng hồ)
float sweepAngle ) //₫ộ lớn phần ₫ường ellipse cần vẽ
 Lưu ý tác vụ DrawArc chỉ vẽ ₫ường biên, không có tác vụ FillArc
₫ể tô nền.
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 17
7.5 Xuất hình ₫ồ họa - Tác vụ DrawPie
 Tác vụ DrawPie cho phép vẽ 1 phần bánh ellipse ₫ược xác ₫ịnh bởi
hình chữ nhật bao quanh nó. Nó có nhiều biến thể, biến thể khá
mạnh và dùng phổ biến có ₫ặc tả như sau :
public void DrawPie (
Pen pen, //miêu tả nét, màu ₫ường vẽ
Rectangle rect, //miêu tả hình chữ nhật ngoại tiếp
float startAngle, //góc bắt ₫ầu (theo chiều kim ₫ồng hồ)
float sweepAngle ) //₫ộ lớn phần bánh ellipse cần vẽ
 Lưu ý tác vụ DrawPie chỉ vẽ ₫ường biên, muốn tô nền bánh ellipse,
ta cần gọi tác vụ FillPie (₫ặc tả giống như tác vụ DrawPie), chỉ
khác là tham số ₫ầu là ₫ối tượng mẫu tô :
//tạo brush với màu ₫ỏ, tô ₫ặc
Brush brush = new SolidBrush(Color.FromArgb(255, 0, 0));
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 18
7.5 Xuất hình ₫ồ họa - Tác vụ DrawPolygon
 Tác vụ DrawPolygon cho phép vẽ hình nhiều cạnh khép kín. Nó có
nhiều biến thể, biến thể khá mạnh và dùng phổ biến có ₫ặc tả như
sau :
public void DrawPolygon (
Pen pen, //miêu tả nét, màu ₫ường vẽ
Point[] points) //danh sách các ₫ỉnh của polygon
 Lưu ý tác vụ DrawPolygon chỉ vẽ ₫ường biên, muốn tô nền hình
polygon, ta cần gọi tác vụ FillPolygon (₫ặc tả giống như tác vụ
DrawPolygon), chỉ khác là tham số ₫ầu là ₫ối tượng mẫu tô :
//tạo brush với màu ₫ỏ, tô ₫ặc
Brush brush = new SolidBrush(Color.FromArgb(255, 0, 0));
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 19
7.5 Xuất hình ₫ồ họa - Tác vụ DrawCurve
 Tác vụ DrawCurve cho phép vẽ cong trơn xuyên qua nhiều ₫iểm
theo phép tension xác ₫ịnh. Nó có nhiều biến thể, biến thể khá
mạnh và dùng phổ biến có ₫ặc tả như sau :
public void DrawCurve (
Pen pen, //miêu tả nét, màu ₫ường vẽ
Point[] points //danh sách các ₫ỉnh của polygon
int offset, //vị trí ₫iểm bắt ₫ầu vẽ trong danh sách
int numberOfSegments, //số ₫oạn cần vẽ
float tension); //phép tension ₫ược dùng
)
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 20
private void Form1_Paint(object sender, PaintEventArgs e) {
//tạo 2 bút vẽ cho ₫ường thẳng và cong
Pen redPen = new Pen(Color.Red, 3);
Pen greenPen = new Pen(Color.Green, 3);
//tạo các ₫ỉnh
Point point1 = new Point(10, 100), point2 = new Point(40, 75);
Point point3 = new Point(70, 125), point4 = new Point(100, 50);
Point point5 = new Point(130, 180), point6 = new Point(160, 40);
Point point7 = new Point(200, 100);
Point[] curvePoints = { point1, point2, point3, point4, point5, point6, point7 };
//vẽ các ₫oạn thẳng.
e.Graphics.DrawLines(redPen, curvePoints);
//thiết lập offset, số ₫oạn cong, và tension.
int offset = 0, numSegments = 6;
float tension = 0.5F;
//vẽ ₫ường cong trơn qua các ₫ỉnh.
e.Graphics.DrawCurve(greenPen, curvePoints, offset, numSegments, tension);
}
7.5 Xuất hình ₫ồ họa - Tác vụ DrawCurve
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 21
7.6 Thí dụ viết ứng dụng vẽ ₫ối tượng phức hợp
 Để củng cố kiến thức về các tác vụ xuất nội dung tổng hợp chứa
chuỗi văn bản, ảnh bitmap và các hình ₫ồ họa toán học, chúng ta
hãy viết ứng dụng giả lập ₫ồng hồ treo tường có 3 kim
giờ/phút/giây và có quả lắc theo góc 20 ₫ộ.
 Phân tích thông tin cần xuất, ta thấy có các thành
phần :
 hình bitmap miêu tả khung ₫ồng ₫ồ, bản số
₫ồng hồ.
 4 ₫oạn thẳng miêu tả 3 kim giờ/phút/giây và
cần lắc. Vòng tròn nhỏ miêu tả quả lắc. Các
hình toán học này thay ₫ổi vị trí theo thời
gian.
 chuỗi hiển thị giờ/phút/giây.
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 22
7.6 Thí dụ viết ứng dụng vẽ ₫ối tượng phức hợp
 Dùng ₫ối tượng Timer với thời gian ₫ếm khoảng 40ms, mỗi lần
₫ếm xong nó tạo sự kiện Paint ₫ể kích hoạt hàm vẽ lại Form ứng
dụng. Như vậy mỗi giây ta vẽ lại khoảng 25 lần, tốc ₫ộ như thế này
là vừa ₫ủ ₫ể người dùng cảm thấy ₫ồng hồ gần như thật.
 Qui trình ₫iển hình ₫ể xây dựng ứng dụng ₫ồng hồ quả lắc gồm các
bước sau ₫ây :
1. Chạy VS .Net, chọn menu File.New.Project ₫ể hiển thị cửa sổ New
Project.
2. Mở rộng mục Visual C# trong TreeView "Project Types", chọn mục
Windows, chọn icon "Windows Application" trong listbox
"Templates" bên phải, thiết lập thư mục chứa Project trong listbox
"Location", nhập tên Project vào textbox "Name:" (td. VCDongho),
click button OK ₫ể tạo Project theo các thông số ₫ã khai báo.
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 23
7.6 Thí dụ viết ứng dụng vẽ ₫ối tượng phức hợp
3. Form ₫ầu tiên của ứng dụng ₫ã hiển thị trong cửa sổ thiết kế, lúc
này form hoàn toàn trống, chưa chứa ₫ối tượng giao diện nào.
4. Nếu cửa sổ ToolBox chưa hiển thị, chọn menu View.Toolbox ₫ể
hiển thị nó (thường nằm ở bên trái màn hình). Duyệt tìm phần tử
Timer (trong nhóm Comopents hay nhóm All Window Forms),
chọn nó, dời chuột vào trong form (ở vị trí nào cũng ₫ược vì ₫ối
tượng này không ₫ược hiển thị) và vẽ nó với kích thước tùy ý. Hiệu
chỉnh thuộc tính (Name) = myTimer.
5. Chọn ₫ối tượng myTimer, cửa sổ thuộc tính của nó sẽ hiển thị, click
icon ₫ể hiển thị danh sách các sự kiện của ₫ối tượng, ấn kép
chuột vào comboBox bên phải sự kiện Tick ₫ể máy tạo tự ₫ộng hàm
xử lý cho sự kiện này.
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 24
7.6 Thí dụ viết ứng dụng vẽ ₫ối tượng phức hợp
6. Viết code cụ thể cho hàm như sau :
//hàm phục vụ Timer
private void myTimer_Tick(object sender, EventArgs e) {
myTimer.Stop(); //dừng ₫ếm timer
this.Refresh(); //vẽ lại form theo giờ hiện hành
}
7. Ấn phải chuột vào mục Form1.cs trong cửa sổ Solution Explorer
rồi chọn option View Designer ₫ể hiển thị lại cửa sổ thiết kế Form.
Chọn Form, cửa sổ thuộc tính của nó sẽ hiển thị, click icon ₫ể hiển
thị danh sách các sự kiện của Form, duyệt tìm sự kiện Paint, ấn kép
chuột vào comboBox bên phải sự kiện Paint ₫ể máy tạo tự ₫ộng hàm
xử lý cho sự kiện này. Viết code cụ thể cho hàm như sau :
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 25
7.6 Thí dụ viết ứng dụng vẽ ₫ối tượng phức hợp
private void Form1_Paint(object sender, PaintEventArgs e) {
//tạo ₫ối tượng image gốc
Image bgimg = Image.FromFile("c:\\bgclock.bmp");
//xác ₫ịnh ₫ối tượng mục tiêu
Control control = (Control)sender;
//thay ₫ổi kích thước form theo ảnh khung ₫ồng hồ
control.Size = new Size(bgimg.Width + 10 + 8, bgimg.Height + 10 + 
35);
//xác ₫ịnh ₫ối tượng graphics (₫ối tượng vẽ) của ₫ối tượng
Graphics g = e.Graphics;
//vẽ bitmap miêu tả khung ₫ồng hồ
g.DrawImage(bgimg, 5,5);
//₫ịnh nghĩa các biến cần dùng
Rectangle rec = control.DisplayRectangle;
Pen hPen;
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 26
7.6 Thí dụ viết ứng dụng vẽ ₫ối tượng phức hợp
Brush hBrush;
int xo,yo,rql,rh,rm, rs;
int x, y;
//thiết lập tâm ₫ồng hồ
xo = 76; yo = 74; 
//thiết lập bán kính cần lắc, kim giờ/phút/giây
rql = 140; rh = 50; rm = 55; rs = 60; 
//tạo pen ₫ể vẽ cần lắc
hPen = new Pen (Color.FromArgb(0,0, 255),2);
//tạo brush ₫ể tô nền quả lắc
hBrush = new SolidBrush(Color.FromArgb(255, 0, 0));
//xác ₫ịnh giờ/phút/giây hiện hành
DateTime now = DateTime.Now;
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 27
7.6 Thí dụ viết ứng dụng vẽ ₫ối tượng phức hợp
//tính góc của cần lắc (góc quay max. là 40 ₫ộ)
double goc = 80*now.Millisecond/1000;
if (goc < 40) goc = goc +70;
else goc = 150-goc;
//₫ổi góc cần lắc từ ₫ộ ra radian
goc = goc*3.1416/180;
//xác ₫ịnh tâm quả lắc (₫iểm còn lại của cần lắc)
x = xo+(int)(rql*Math.Cos(goc)); 
y = yo+(int)(rql*Math.Sin(goc));
//vẽ cần lắc
g.DrawLine(hPen, xo, yo, x, y);
//vẽ quả lắc
g.FillEllipse(hBrush, x-3, y-3, 5, 5);
g.DrawEllipse(hPen,x-4,y-4,7,7);
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 28
7.6 Thí dụ viết ứng dụng vẽ ₫ối tượng phức hợp
//tạo pen ₫ể vẽ kim giờ
hPen = new Pen(Color.FromArgb(0,0,0),3);
//tính góc của kim giờ
goc = 90+360*(now.Hour+(double)now.Minute/60)/12;
//₫ổi góc từ ₫ộ ra radian
goc = goc*3.1416/180;
//xác ₫ịnh tọa ₫ộ ₫ỉnh thứ 2 của kim giờ
x = xo - (int)(rh * Math.Cos(goc));
y = yo - (int)(rh * Math.Sin(goc));
//vẽ kim giờ
g.DrawLine(hPen, xo, yo, x, y);
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 29
7.6 Thí dụ viết ứng dụng vẽ ₫ối tượng phức hợp
//tạo pen ₫ể vẽ kim phút
hPen = new Pen(Color.FromArgb(65,110,55),2);
//tính góc của kim phút
goc = 90+360*now.Minute/60;
//₫ổi góc từ ₫ộ ra radian
goc = goc*3.1416/180;
//xác ₫ịnh tọa ₫ộ ₫ỉnh thứ 2 của kim phút
x = xo - (int)(rm * Math.Cos(goc));
y = yo - (int)(rm * Math.Sin(goc));
//vẽ kim phút
g.DrawLine(hPen, xo, yo, x, y);
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 30
7.6 Thí dụ viết ứng dụng vẽ ₫ối tượng phức hợp
//tạo pen ₫ể vẽ kim giây
hPen = new Pen(Color.FromArgb(237,5,220),1);
//tính góc của kim giây
goc = 90+360*now.Minute/60;
//₫ổi góc từ ₫ộ ra radian
goc = goc*3.1416/180;
//xác ₫ịnh tọa ₫ộ ₫ỉnh thứ 2 của kim giây
x = xo - (int)(rs * Math.Cos(goc));
y = yo - (int)(rs * Math.Sin(goc));
//vẽ kim giây
g.DrawLine(hPen, xo, yo, x, y);
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 31
7.6 Thí dụ viết ứng dụng vẽ ₫ối tượng phức hợp
//tạo chuỗi miêu tả giờ/phút/giây hiện hành
String buf = "" + now.Hour + ":" + now.Minute + ":" + now.Second;
//tạo ₫ối tượng font chữ cần dùng
Font myFont = new Font("Helvetica", 11);
//tạo biến miêu tả chế ₫ộ canh giữa khi xuất chuỗi
StringFormat format1 = new StringFormat(StringFormatFlags.NoClip);
format1.Alignment = StringAlignment.Center;
//xuất chuỗi miêu tả giờ/phút/giây
g.DrawString(buf, myFont, System.Drawing.Brushes.Blue,
xo, rec.Height - 35, format1);
//cho phép timer chạy tiếp
myTimer.Start();
}
8. Chọn menu Debug.Start Debugging ₫ể dịch và chạy ứng dụng. 
Xem kết quảvà ₫ánh giá kết quả.
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 32
7.7 Xây dựng ₫ối tượng giao diện có hình dạng tùy ý
 Các ₫ối tượng giao diện, dù nhỏ hay lớn (Button, TextBox,
ListBox, TreeView,), ₫ều ₫ược Windows quản lý giống nhau :
Windows xử lý chúng như là window.
 Mỗi window sẽ ₫ược hiển thị ở dạng mặc ₫ịnh là hình chữ nhật có
₫ường viền xung quanh và titlebar ở phía trên. Tuy nhiên ta có thể
miêu tả lại hình dạng cho window theo nhu cầu riêng của mình.
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 33
7.7 Xây dựng ₫ối tượng giao diện có hình dạng tùy ý
 Window chứa các thuộc tính sau ₫ây có liên quan ₫ến việc xác
₫ịnh chính xác hình dạng của nó :
 BackgroundImage : miêu tả hình bitmap ₫ược dùng ₫ể hiển thị
nền window và ₫ể xác ₫ịnh hình dạng của window.
 FormBorderStyle : miêu tả chế ₫ộ hiển thị các ₫ường biên và
titlebar của window.
 Region : miêu tả vùng hiển thị và làm việc của window, nó
gồm từ 1 tới nhiều vùng rời rạc, mỗi vùng rời rạc ₫ược bao
₫óng bởi 1 ₫ường viền khép kín.
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 34
7.7 Xây dựng ₫ối tượng giao diện có hình dạng tùy ý
 Đường viền khép kín của 1 vùng ₫ộc lập có thể ₫ược xác ₫ịnh bằng
1 trong 2 phương pháp :
 Danh sách các ₫oạn thẳng hay cong liên tiếp và khép kín, mỗi
₫oạn thẳng hay cong có thể miêu tả bởi 1 hàm toán học như
Line, Arc,....
 Do hình bitmap nào ₫ó xác ₫ịnh.
 Có 2 kỹ thuật xây dựng window có hình dạng bất kỳ :
 Khai báo các thuộc tính liên quan 1 cách trực quan tại thời
₫iểm thiết kế.
 Lập trình ₫ộng ₫ể thiết lập các giá trị phù hợp cho các thuộc
tính liên quan ₫ến window.
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 35
7.7 Xây dựng ₫ối tượng giao diện có hình dạng tùy ý
 Qui trình xây dựng Form giao diện có hình dạng bất kỳ bằng cách
khai báo các thuộc tính liên quan 1 cách trực quan tại thời ₫iểm
thiết kế : Tạo form cần dùng, chọn nó ₫ể hiển thị cửa sổ thuộc tính,
tìm và thiết lập giá trị cho các thuộc tính sau ₫ây :
 BackgroundImage : khai báo file bitmap ₫ược dùng ₫ể hiển thị
nền của Form và ₫ể xác ₫ịnh hình dạng của Form. Lưu ý hình
bitmap cần có tính chất : các vùng diện tích của bitmap phải có
màu khác với màu nền của hình bitmap; kích thước hình
bitmap nên phù hợp với nhu cầu sử dụng của form tương ứng.
 FormBorderStyle = None ₫ể không hiển thị titlebar và ₫ường
viền mặc ₫ịnh.
 TranparenceKey : miêu tả màu nền của hình bitmap cần lọc bỏ
(theo ₫ịnh dạng RGB).
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 36
7.7 Xây dựng ₫ối tượng giao diện có hình dạng tùy ý
 Thí dụ hãy xây dựng ứng dụng giải phương trình bậc 2 có hình
dạng như sau :
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 37
7.7 Xây dựng ₫ối tượng giao diện có hình dạng tùy ý
 Qui trình xây dựng ₫ối tượng giao diện có hình dạng bất kỳ bằng
cách viết code thiết lập ₫ộng các thuộc tính liên quan : Tạo ₫ối
tượng cần dùng, viết ₫oạn code thiết lập 3 thuộc tính liên quan khi
cần thiết :
 BackgroundImage : miêu tả hình bitmap ₫ược dùng ₫ể hiển thị
nền window (nếu muốn hiển thị hình nền).
 FormBorderStyle = None.
 Region : miêu tả vùng diện tích làm việc của ₫ối tượng.
 Thường Region ₫ược xác ₫ịnh thông qua ₫ối tượng Path, ₫ối tượng
này miêu tả ₫ường viền của Region.
 Để tạo ₫ối tượng Path, ta có thể dùng các hàm toán học miêu tả
từng ₫oạn viền khép kín của Region hay dùng ₫ường viền của hình
bitmap bất kỳ.
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 38
7.7 Xây dựng ₫ối tượng giao diện có hình dạng tùy ý
Qui trình tìm Path của hình ₫ồ họa bitmap
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 39
7.7 Xây dựng ₫ối tượng giao diện có hình dạng tùy ý
for (y = 0; y <= yMax - 1; y++) { //duyệt từng hàng bitmap
idx = isrow; //xác ₫ịnh offset (trong buffer) chứa pixel cần xử lý 
for (x = 0; x <= xMax - 1; x++) { //duyệt từng pixel trên hàng 
if (Equal(pbase, idx, Key)) { //nếu là pixel nền thì bỏ qua
idx = idx + 4; continue; }
//nhớ lại vị trí pixel tái nhất của vùng ₫ang tìm ₫ược
int x0 = x;
//duyệt tìm các pixel còn lại của vùng hiện hành
while (x < xMax && (!Equal(pbase, idx, Key))) {
x = x + 1; idx = idx + 4; }
//add path của vùng tìm ₫ược vào ₫ối tượng Path
path.AddRectangle(new Rectangle(x0, y, x - x0, 1));
}
isrow = isrow + bitmapData.Stride; //₫ến pixel ₫ầu hàng kế
}
B
G
R
A
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 40
7.7 Xây dựng ₫ối tượng giao diện có hình dạng tùy ý
 Thí dụ hãy xây dựng ứng dụng giải phương trình bậc 2 có hình
dạng như sau :
Khoa Khoa học & Kỹ thuật Máy tính
Trường ĐH Bách Khoa Tp.HCM
© 2010
Môn : Lập trình hướng ₫ối tượng
Chương 7 : Tương tác với người dùng trong ứng dụng C#
Slide 41
7.8 Kết chương 
 Chương này ₫ã giới thiệu cách thức tương tác giữa người dùng và
chương trình ₫ể nhập/xuất dữ liệu.
 Chương này cũng ₫ã giới thiệu các ₫ối tượng giao diện cùng các
tác vụ xuất dữ liệu dạng chuỗi, dạng bitmap, dạng hình ₫ồ họa
toán học. Kết hợp 3 loại dữ liệu này, ta có thể tạo kết xuất bất kỳ.