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#

 Chương 11
Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 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
Khoa Khoa học & Kỹ thuật Máy tính Môn : Lập trình hướng ₫ối tượng
Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
© 2010 Slide 1
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 Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 2
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 Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 3
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ứcnănggiốngynhưcontrolcó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 Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 4
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 Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 5
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 Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 6
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 Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 7
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 Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 8
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áytạotự₫ộnghàmxửlýrồiviếtcodechohàmnàynhư
 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 Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 9
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 Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 10
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 Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 11
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 Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 12
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 Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 13
Xây dựng ứng dụng 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). 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.
 Khoa Khoa học & Kỹ thuật Máy tính Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 14
Xây dựng ứng dụng dùng User control
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ả.
 Khoa Khoa học & Kỹ thuật Máy tính Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 15
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 Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 16
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 Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 17
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 Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 18
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 th ... it(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 Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 22
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 Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 23
Xây dựng ứng dụng dùng Inherited 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). 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.
 Khoa Khoa học & Kỹ thuật Máy tính Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 24
Xây dựng ứng dụng dùng Inherited control
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.
 Khoa Khoa học & Kỹ thuật Máy tính Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 25
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 Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 26
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 Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 27
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 Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 28
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 Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 29
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 Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 30
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 Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 31
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 Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 32
Xây dựng ứng dụng dùng Owner-drawn 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). 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.
 Khoa Khoa học & Kỹ thuật Máy tính Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 33
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 Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 34
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 Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 35
11.5 Xây dựng ₫ối tượng giao diện có hình dạng tùy ý
 Cácthuộctínhsau₫âysẽxác₫ịnhchínhxáchìnhdạngcủamộ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 Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 36
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 Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 37
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 Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 38
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 Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 39
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 Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 40
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 Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 41
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.
 Khoa Khoa học & Kỹ thuật Máy tính Môn : Lập trình hướng ₫ối tượng
 Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#
 © 2010 Slide 42