Bài giảng Lập trình hướng đối tượng - Chương 11: Tạo đối tượng giao diện cá nhân hóa bằng VC#

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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 1
11.0 Dẫn nhập
11.1 Tổng quát về giao diện cá nhân hóa
11.2 Xây dựng User control & ứng dụng
11.3 Xây dựng Inherited control & ứng dụng
11.4 Xây dựng Owner-drawn control & ứng dụng
11.5 Kết chương
Chương 11
Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 2
11.0 Dẫn nhập 
 Chương này giới thiệu cách thức dùng tính thừa kế ₫ể tạo mới 3
loại ₫ối tượng giao diện cá nhân hóa phổ biến là User Control,
Inherited Control và Owner-drawn Control.
 Chương này cũng giới thiệu cách thức viết chương trình sử dụng
lại các ₫ối tượng giao diện cá nhân hó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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 3
11.1 Tổng quát về giao diện cá nhân hóa
 Mỗi chương trình dùng giao diện ₫ồ họa thường có nhiều cửa sổ
giao diện. Mỗi cửa sổ giao diện chứa nhiều ₫ối tượng giao diện.
Microsoft ₫ã cung cấp sẵn nhiều ₫ối tượng giao diện (control) phổ
dụng ₫ể ta thiết kế form giao diện dễ dàng. Tuy nhiên trong từng
ứng dụng, có thể ta cần 1 số ₫ối tượng giao diện ₫ặc thù, ta gọi
chúng là ₫ối tượng cá nhân hóa (user control).
 Thường có 3 dạng ₫ối tượng giao diện cá nhân hóa :
1. User Control : là dạng ₫ơn giản nhất, nó thừa kế class
UserControl sẵn có, tích hợp nhiều control có sẵn ₫ể tạo ₫ối
tượng cá nhân hóa. Thí dụ 1 LoginControl gồm 2 TextBox ₫ể
nhập username, password và 1 Button ₫ăng nhậ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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 4
11.1 Tổng quát về giao diện cá nhân hóa
2. Inherited Control : chức năng và hành vi của nó gần giống control
₫ã có sẵn. Để xây dựng nó, ta thừa kế class có sẵn mà chức năng
gần giống nhất, rồi hiệu chỉnh (override) 1 số tác vụ ₫ể thể hiện
chức năng thay ₫ổi. Ta cũng có thể thêm mới 1 số tác vụ ₫ể thể
hiện các chức năng tăng cường. Thí dụ MyTextBox có chức năng
gần giống như TextBox có sẵn, nhưng nó có nhiều chế ₫ộ khác
nhau, ở mỗi chế ₫ộ nó phản ứng khác nhau. Thí dụ nếu ở chế ₫ộ
nhập số nguyên, nó chỉ cho phép nhập ký số, chứ không cho nhập
ký tự khác.
3. Owner-drawn control : chức năng giống y như control có sẵn
nhưng bộ mặt giao diện thì khác. Ta sẽ thừa kế class có sẵn mà
chức năng giống y rồi override tác vụ OnPaint ₫ể vẽ lại bộ mặt
mới. Thí dụ HeartControl là một Button nhưng bộ mặt không phải
là khung chữ nhật bình thường mà là trái tim màu ₫ỏ tươ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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 5
11.2 Xây dựng User control
 Qui trình xây dựng 1 hay nhiều User Control gồm các bước chính :
1. chạy Visual Studio .Net, mở/tạo Project loại "Windows Control
Library" ₫ể quản lý 1 hay nhiều user control.
2. Tạo mới 1 User Control rồi thiết kế giao diện/viết code cho nó.
3. Dịch project ra file *.dll, ta gọi file này là thư viện chứa các user
control.
 Thí dụ ta hãy xây dựng 1 User Control có tên là LoginControl, nó
gồm 2 TextBox và 1 Button ₫ể giúp người dùng ₫ăng ký tài khoàn
₫ể truy xuất hệ thống. Hình ảnh LoginControl 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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 6
11.2 Xây dựng User control
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 Control Library" 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.
MyUserControls), click button OK ₫ể tạo Project theo các thông số
₫ã khai báo.
3. Ngay sau Project vừa ₫ược tạo ra, nó có sẵn 1 User Control mới có
tên mặc ₫ịnh là UserControl1, nó chỉ là 1 vùng hình chữ nhật
trống, chứ chưa có gì. Dời chuột về cửa sổ Solution Explorer
(thường ở trên phải màn hình), ấn kép chuột vào mục
UserControl1.cs ₫ể hiển thị menu lệnh, chọn option Rename, nhập
tên mới là LoginControl.cs và chọn button Yes khi ₫ược hỏ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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 7
11.2 Xây dựng User control
4. Nếu cử 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ử
Label (trong nhóm Common Controls), chọn nó, dời chuột về vị trí
thích hợp trong LoginControl và vẽ nó với kích thước mong muốn.
Hiệu chỉnh thuộc tính Text = "Nhập tên user :". Nếu cần, hãy thay
₫ổi vị trí và kích thước của Label và của LoginControl.
5. Dời chuột về cửa sổ ToolBox, duyệt tìm phần tử TextBox (trong
nhóm Common Controls), chọn nó, dời chuột về vị trí thích hợp
trong LoginControl (bên phải Label vừa vẽ) và vẽ nó với kích thước
mong muốn. Hiệu chỉnh thuộc tính (Name) = txtUser. Nếu cần,
hãy thay ₫ổi vị trí và kích thước của TextBox.
6. Lặp lại các bước 4 và 5 ₫ể vẽ Label "Nhập passwword :", TextBox
có (Name) = txtPassword, 1 button "Đăng nhập" có (Name) =
btnLogin.
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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 8
11.2 Xây dựng User control
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ử
Label (trong nhóm Common Controls), chọn nó, dời chuột về vị trí
thích hợp trong LoginControl và vẽ nó với kích thước mong muốn.
Hiệu chỉnh thuộc tính Text = "Nhập tên user :". Nếu cần, hãy thay
₫ổi vị trí và kích thước của Label và của LoginControl.
5. Dời chuột về cửa sổ ToolBox, duyệt tìm phần tử TextBox (trong
nhóm Common Controls), chọn nó, dời chuột về vị trí thích hợp
trong LoginControl (bên phải Label vừa vẽ) và vẽ nó với kích thước
mong muốn. Hiệu chỉnh thuộc tính (Name) = txtUser. Nếu cần,
hãy thay ₫ổi vị trí và kích thước của TextBox.
6. Lặp lại các bước 4 và 5 ₫ể vẽ Label "Nhập passwword :", TextBox
có (Name) = txtPassword, 1 button "Đăng nhập" có (Name) =
btnLogin.
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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 9
11.2 Xây dựng User control
7. Dời chuột về và chọn button "Đăng nhập", 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 Button,
duyệt tìm sự kiện Click, ấn kép chuột vào comboBox bên phải của
Click ₫ể máy tạo tự ₫ộng hàm xử lý rồi viết code cho hàm này như
sau :
private void btnLogin_Click(object sender, EventArgs e) {
//kiểm tra ₫ã nhập user name chưa
if (txtUser.Text.Length == 0) {
MessageBox.Show("Hãy nhập tên user."); return;
}
//kiểm tra ₫ã nhập password chưa
if (txtPassword.Text.Length == 0) {
MessageBox.Show("Hãy nhập password."); return;
}
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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 10
11.2 Xây dựng User control
//tạo sự kiện Click ₫ể gọi hàm xử lý sự kiện Click
//do người lập trình ứng dụng viết
OnSubmitClicked(sender,e);
}
8. Viết thêm ₫oạn code ₫ịnh nghĩa delegate, event và 2 thuộc tính
UserName, Password như sau (nằm trước hay sau hàm sự lý Click
chuột cho button) :
//₫ịnh nghĩa delegate phục vụ cho event
public delegate void SubmitClickedHandler(object sender, EventArgs e);
//₫ịnh nghĩa event SubmitClicked
public event SubmitClickedHandler SubmitClicked;
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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 11
11.2 Xây dựng User control
//₫ịnh nghĩa hàm xử lý sự kiện SubmitClicked
protected virtual void OnSubmitClicked(object sender, EventArgs e) {
// kiểm tra xem có hàm xử lý sự kiện SubmitClicked ?
//nếu có thì gọi nó
if (SubmitClicked != null) {
SubmitClicked(sender, e); // Notify Subscribers
}
}
//₫ịnh nghĩa thuộc tính giao tiếp có tên là UserName
public string UserName {
get { return txtUser.Text; }
set { txtUser.Text = value; }
}
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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 12
11.2 Xây dựng User control
//₫ịnh nghĩa thuộc tính giao tiếp có tên là Password
public string Password {
get { return txtPassword.Text; }
set { txtPassword.Text = value; }
}
9. Chọn menu Build.Build Solution ₫ể dịch và tạo file thư viện chứa
các user control. Nếu có lỗi thì sữa và dịch lại.
10. Nếu dịch thành công, file thư viện có tên là MyUserControls.dll sẽ
₫ược tạo ra trong thư mục con Debug (hay Release tùy chế ₫ộ
dịch) trong thư mục chứa Project. Ta nên copy file này vào thư
mục chung chứa các file thư viện ₫ể sau này dùng tiện lợi hơ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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 13
Xây dựng ứng dụng dùng User Control
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.
UseLoginControl), click button OK ₫ể tạo Project theo các thông số
₫ã khai báo.
3. Form ₫ầu tiên của ứng dụng ₫ã hiển thị trong cửa sổ thiết kế, việc
thiết kế form là quá trình lặp 4 thao tác tạo mới/xóa/hiệu chỉnh
thuộc tính/tạo hàm xử lý sự kiện cho từng ₫ối tượng cần dùng
trong form.
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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 14
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). Dời chuột vào trong
cửa sổ Toolbox, ấn phải chuột ₫ể hiển thị menu lệnh, chọn option
"Choose Items". Khi cửa sổ "Choose Toolbox Items" hiển thị, click
chuột vào button Browse ₫ể hiển thị cửa sổ duyệt tìm file, hãy
duyệt tìm ₫ến thư mục chứa file MyUserControls.dll vừa xây dựng
₫ược trong các slide trước, chọn file dll rồi click button OK ₫ể
"add" các usercontrol trong thư viện này vào cửa sổ Toolbox của
Project ứng dụng. Bây giờ việc dùng LoginControl giống y như các
₫iều khiển có sẵn khác.
5. Duyệt tìm phần tử LoginControl (trong nhóm General ở cuối cửa
sổ Toolbox), chọn nó, dời chuột về vị trí thích hợp trong Form và
vẽ nó với kích thước mong muốn.
Xây dựng ứng dụng dùng User control
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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 15
6. Chọn ₫ối tượng LoginControl ₫ể hiển thị cửa sổ thuộc tính của nó,
click chuột vào button Events ₫ể hiển thị các event của nó. duyệt
tìm event SubmitClicked vào tạo hàm xử lý cho event này. Viết
code cho hàm xử lý như sau :
private void loginControl1_SubmitClicked(object sender, EventArgs e) {
//viết code xử lý việc ₫ăng nhập tài khoản
//ở ₫ây chỉ hiển thị thông báo ₫ể kiểm tra
MessageBox.Show("Đã ₫ăng ký tài khoản : "
+ loginControl1.UserName);
}
7. Chọn menu Debug.Start Debugging ₫ể dịch và chạy ứng dụng.
Hãy thử sử dụng ₫ối tượng LoginControl và ₫ánh giá kết quả.
Xây dựng ứng dụng dùng User control
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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 16
11.3 Xây dựng Inherited control
 Qui trình xây dựng 1 hay nhiều Inherited Control gồm các bước
chính :
1. chạy Visual Studio .Net, mở/tạo Project loại "Windows Control
Library" ₫ể quản lý 1 hay nhiều user control.
2. Ấn phải chuột vào gốc của cây Project trong cửa sổ "Solution
Explorer", chọn option Add.User Control ₫ể tạo mới 1 User
Control.
3. Hiển thị cửa sổ soạn mã nguồn của user Control, hiệu chỉnh lại
tên class base cần thừa kế rồi override/tăng cường các tác vụ
chức năng mong muốn.
4. Dịch project ra file *.dll, ta gọi file này là thư viện chứa các user
control.
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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 17
11.3 Xây dựng Inherited control
 Thí dụ ta hãy xây dựng 1 Inherited Control có tên là MyTextBox,
nó là TextBox nhưng có thể hoạt ₫ộng ở 1 trong nhiều chế ₫ộ khác
nhau :
 Common (giống như textbox của .Net),
 Text (chỉ cho nhập các ký tự alphabet),
 NumInt (chỉ cho phép nhập các ký số),
 NumReal (chỉ cho phép nhập các ký số và dấu chấm thập
phâ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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 18
11.3 Xây dựng Inherited control
 Qui trình xây dựng MyTextBox và chứa nó trong thư viện có sẵn
(thư viện chứa ₫ối tượng LoginControl) như sau :
1. Chạy VS .Net, chọn menu File.Open.Project ₫ể hiển thị cửa sổ
duyệt file. Duyệt và tìm file *.sln quản lý Project "Windows
Control Library" có sẵn ₫ể mở lại Project này.
2. Quan sát cây Project, chúng ta ₫ã thấy có mục LoginControl.cs
quản lý user control ₫ã xây dựng trong mục 9.2. Ấn phải chuột vào
gốc của cây Project trong cửa sổ "Solution Explorer", chọn option
Add.User Control ₫ể tạo mới 1 User Control, nhập tên là
MyTextBox.cs rồi click button Add ₫ể tạo mới nó.
3. Lúc này control mới chỉ là 1 vùng hình chữ nhật trống. Dời chuột
về mục MyTextBox.cs trong cửa sổ Project, ấn phải chuột trên nó
rồi chọn option "View Code" ₫ể hiển thị cửa sổ soạn mã nguồn cho
MyTextBox control.
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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 19
11.3 Xây dựng Inherited control
4. Thêm lệnh ₫ịnh nghĩa kiểu liệt kê các chế ₫ộ làm việc của
MyTextBox :
public enum ValidationType {
Common = 0, //giống như TextBox bình thường
NumInt, //chỉ nhận các ký số
NumReal, //chỉ nhận các ký số và dấu chấm thập phân
Text }; //chỉ nhận các ký tự chữ
5. Hiệu chỉnh lại lệnh ₫ịnh nghĩa class MyTextBox ₫ể thừa kế class
TextBox (thay vì UserControl như mặc ₫ịnh). Nội dung chi tiết của
class MyTextBox ₫ược liệt kê ở các slide sau.
6. Chọn menu Build.Build Solution ₫ể dịch và tạo file thư viện chứa
các user control. Nếu có lỗi thì sữa và dịch lại. Lưu ý khi máy báo
lỗi ở hàng lệnh this.AutoScaleMode = ... thì hãy chú thích hàng
lệnh này hay xóa nó luôn cũng ₫ược.
Kh ... lidationType.NumInt:
//nếu là kiểu số nguyên thì chỉ nhận ký số
if (!Char.IsDigit(ch)) e.KeyChar = (char)0;
return;
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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 22
11.3 Xây dựng Inherited control
case (int)ValidationType.NumReal:
//nếu là kiểu số thực thì chỉ nhận ký số + dấu .
if (Char.IsDigit(ch)) return;
if (ch == '.' && fPoint==false) {
fPoint = true; return;
}
e.KeyChar = (char)0;
return;
case (int)ValidationType.Text:
//nếu là kiểu chuỗi văn bản thì chỉ nhận ký tự chữ
ch = Char.ToLower(ch);
if (ch < 'a' || 'z' < ch) e.KeyChar = (char)0;
return;
} } //kết thúc lệnh switch, hàm OnKeyPress, ...
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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 23
Xây dựng ứng dụng dùng Inherited control
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.
UseMyTextBox), click button OK ₫ể tạo Project theo các thông số
₫ã khai báo.
3. Form ₫ầu tiên của ứng dụng ₫ã hiển thị trong cửa sổ thiết kế, việc
thiết kế form là quá trình lặp 4 thao tác tạo mới/xóa/hiệu chỉnh
thuộc tính/tạo hàm xử lý sự kiện cho từng ₫ối tượng cần dùng
trong form.
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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 24
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). Dời chuột vào trong
cửa sổ Toolbox, ấn phải chuột ₫ể hiển thị menu lệnh, chọn option
"Choose Items". Khi cửa sổ "Choose Toolbox Items" hiển thị, click
chuột vào button Browse ₫ể hiển thị cửa sổ duyệt tìm file, hãy
duyệt tìm ₫ến thư mục chứa file MyUserControls.dll vừa xây dựng
₫ược trong các slide trước, chọn file dll rồi click button OK ₫ể
"add" các usercontrol trong thư viện này vào cửa sổ Toolbox của
Project ứng dụng.
5. Duyệt tìm phần tử Label (trong nhóm Common Controls), chọn
nó, dời chuột về vị trí thích hợp trong form và vẽ nó với kích thước
mong muốn. Hiệu chỉnh thuộc tính Text = "Nhập chuỗi bất kỳ :".
Nếu cần, hãy thay ₫ổi vị trí và kích thước của Label và Form.
Xây dựng ứng dụng dùng Inherited control
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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 25
6. Duyệt tìm phần tử MyTextBox (trong nhóm General ở cuối cửa sổ
Toolbox), chọn nó, dời chuột về vị trí thích hợp trong Form (bên
phải Label vừa vẽ) và vẽ nó với kích thước mong muốn. Vào cửa sổ
thuộc tính của ₫ối tượng MyTextBox vừa vẽ, ₫ặt thuộc tính
(Name) = txtCommon, thuộc tính ValidateFor = Common ₫ể nó
hoạt ₫ộng ở chế ₫ộ nhập ký tự bình thường.
7. Lặp 2 bước 5 và 6 ba lần ₫ể tạo thêm 3 cặp (Label, MyTextBox)
khác, các MyTextBox tạo mới lần lượt có thuộc tính ValidateFor =
Text, NumInt, NumReal ₫ể hoạt ₫ộng trên hoặc chuỗi văn bản,
hoặc số nguyên, hoặc số thực.
 Đối với các ₫ối tượng giống nhau, ta có thể dùng kỹ thuật Copy-
Paste ₫ể nhân bản vô tính chúng cho dễ dàng.
Xây dựng ứng dụng dùng Inherited control
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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 26
Xây dựng ứng dụng dùng Inherited control
 Sau khi thiết kế xong, Form có dạng sau :
8. Chọn menu Debug.Start Debugging ₫ể dịch và chạy ứng dụng.
Hãy thử nhập các loại ký tự vào các ₫ối tượng MyTextBox 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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 27
11.4 Xây dựng Owner-drawn control
 Qui trình xây dựng 1 hay nhiều Owner-drawn Control cũng giống
như Inherited control, gồm các bước chính :
1. chạy Visual Studio .Net, mở/tạo Project loại "Windows Control
Library" ₫ể quản lý 1 hay nhiều user control.
2. Ấn phải chuột vào gốc của cây Project trong cửa sổ "Solution
Explorer", chọn option Add.User Control ₫ể tạo mới 1 User
Control.
3. Hiển thị cửa sổ soạn mã nguồn của User Control, hiệu chỉnh lại
tên class base cần thừa kế rồi override/tăng cường các tác vụ
chức năng mong muốn, trong ₫ó thiết yếu nhất là hàm OnPaint
₫ể vẽ bộ mặt của ₫ối tượng giao diện.
4. Dịch project ra file *.dll, ta gọi file này là thư viện chứa các user
control.
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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 28
11.4 Xây dựng Owner-drawn control
 Thí dụ ta hãy xây dựng 1 Owner-drawn Control có tên là
HeartButton, nó là Button nhưng bộ mặt không phải là hình chữ
nhật có ₫ường viền thông thường mà là một trái tim màu ₫ỏ tươi.
 Qui trình xây dựng HeartButton và chứa nó trong thư viện có sẵn
(thư viện ₫ã tạo ra trong mục 9.2 và 9.3) như sau :
1. Chạy VS .Net, chọn menu File.Open.Project ₫ể hiển thị cửa sổ
duyệt file. Duyệt và tìm file *.sln quản lý Project "Windows
Control Library" có sẵn ₫ể mở lại Project này.
2. Quan sát cây Project, ta thấy có mục LoginControl.cs quản lý
usercontrol ₫ã xây dựng trong mục 9.2, mục MyTextBox.cs quản
lý inherited control ₫ã xây dựng trong mục 9.3. Ấn phải chuột vào
gốc cây Project trong cửa sổ "Solution Explorer", chọn option
Add.User Control ₫ể tạo mới 1 User Control, nhập tên là
HeartButton.cs rồi click button Add ₫ể tạo mới 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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 29
11.4 Xây dựng Owner-drawn control
3. Lúc này control mới chỉ là 1 vùng hình chữ nhật trống. Dời chuột
về mục HeartButton.cs trong cửa sổ Project, ấn phải chuột trên nó
rồi chọn option "View Code" ₫ể hiển thị cửa sổ soạn mã nguồn cho
HeartButton control.
4. Hiệu chỉnh lại lệnh ₫ịnh nghĩa class HeartButton ₫ể thừa kế class
Button (thay vì UserControl như mặc ₫ịnh). Nội dung chi tiết của
class HeartButton ₫ược liệt kê ở các slide sau.
5. Chọn menu Build.Build Solution ₫ể dịch và tạo file thư viện chứa
các user control. Nếu có lỗi thì sữa và dịch lại. Lưu ý khi máy báo
lỗi ở hàng lệnh this.AutoScaleMode = ... thì hãy chú thích hàng
lệnh này hay xóa nó luôn cũ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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 30
11.4 Xây dựng Owner-drawn control
public partial class HeartButton : Button {
//hàm contructor của class
public HeartButton() {
InitializeComponent();
}
//hàm vẽ bộ mặt của button
protected override void OnPaint(PaintEventArgs e) {
//xác ₫ịnh ₫ối tượng vẽ của Button
Graphics g = e.Graphics;
//tạo ₫ối tượng image gốc chứa ảnh trái tim màu ₫ỏ
Image bgimg = Image.FromFile("c:\\bgbutton.jpg");
//vẽ inage gốc theo chế ₫ộ zoom vào button
g.DrawImage(bgimg, 0, 0,this.Width,this.Height);
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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 31
11.4 Xây dựng Owner-drawn control
//₫ịnh nghĩa ₫ối tượng miêu tả cách thức hiển thị chuỗi
StringFormat format1 =
new StringFormat (StringFormatFlags.NoClip);
format1.Alignment = StringAlignment.Center;
//vẽ chuỗi caption của button
g.DrawString(this.Text, this.Font, Brushes.White,
this.Width / 2, this.Height / 3, format1);
} //hết hàm OnPaint
} //hết class HeartButton
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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 32
Xây dựng ứng dụng dùng Owner-drawn control
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.
UseHeartButton), click button OK ₫ể tạo Project theo các thông số
₫ã khai báo.
3. Form ₫ầu tiên của ứng dụng ₫ã hiển thị trong cửa sổ thiết kế, việc
thiết kế form là quá trình lặp 4 thao tác tạo mới/xóa/hiệu chỉnh
thuộc tính/tạo hàm xử lý sự kiện cho từng ₫ối tượng cần dùng
trong form.
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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 33
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). Dời chuột vào trong
cửa sổ Toolbox, ấn phải chuột ₫ể hiển thị menu lệnh, chọn option
"Choose Items". Khi cửa sổ "Choose Toolbox Items" hiển thị, click
chuột vào button Browse ₫ể hiển thị cửa sổ duyệt tìm file, hãy
duyệt tìm ₫ến thư mục chứa file MyUserControls.dll vừa xây dựng
₫ược trong các slide trước, chọn file dll rồi click button OK ₫ể
"add" các usercontrol trong thư viện này vào cửa sổ Toolbox của
Project ứng dụng.
5. Duyệt tìm phần tử HeartButton (trong nhóm General ở chuối cửa
sổ), chọn nó, dời chuột về vị trí thích hợp trong form và vẽ nó với
kích thước mong muốn. Hiệu chỉnh thuộc tính Text = "Bắt ₫ầu
thực hiện". Nếu cần, hãy thay ₫ổi vị trí và kích thước của Button và
Form.
Xây dựng ứng dụng dùng Owner-drawn control
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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 34
Xây dựng ứng dụng dùng Owner-drawn control
6. Ấn kép chuột vào button vừa tạo ₫ể tạo hàm xử lý sự kiện Click
của Button rồi viết code như sau :
//hàm xử lý Click chuột trên button
private void btnStart_Click (object sender, EventArgs e) {
MessageBox.Show("Bạn vừa ấn chuột trên Button");
//thử thay ₫ổi nội dung Caption
btnStart.Text = "Kết thúc";
}
7. Chọn menu Debug.Start Debugging ₫ể dịch và chạy ứng dụng.
Hãy thử click chuột trên ₫ối tượng HeartButton 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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 35
11.5 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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 36
11.5 Xây dựng ₫ối tượng giao diện có hình dạng tùy ý
 Các thuộc tính sau ₫ây sẽ xác ₫ịnh chính xác hình dạng của một
window :
 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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 37
11.5 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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 38
11.5 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 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 window và ₫ể xác ₫ịnh hình dạng của window. 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.
 TranparenceKey : miêu tả màu RGB nền của hình bitmap cần
lọc bỏ.
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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 39
11.5 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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 40
11.5 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 form
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.
 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 Path, ta có thể dùng các hàm toán học miêu tả từng ₫oạn
viền 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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 41
11.5 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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
Slide 42
11.6 Kết chương 
 Chương này ₫ã giới thiệu cách thức dùng tính thừa kế ₫ể tạo mới 3
loại ₫ối tượng giao diện cá nhân hóa phổ biến là User Control,
Inherited Control và Owner-drawn Control.
 Chương này cũng ₫ã giới thiệu cách thức viết chương trình sử
dụng lại các ₫ối tượng giao diện cá nhân hóa.