Giáo trình Lập trình Windows forms với C# (Phần 1)

m Collection Editor ví dụ 5.4 
- notifyIcon1: Thiết lập giá trị thuộc tính của NotifyIcon như hình 5.22 
 Hình 5.22: Thuộc tính của NotifyIcon 
Bước 3: Viết mã lệnh cho các điều khiển 
- Sự kiện Click của thoátToolStripMenuItem: 
 private void thoátToolStripMenuItem_Click(object sender, 
 EventArgs e) 
 { 
 Close(); 
 } 
 160
 - Sự kiện MouseClick của MyNotifyIcon: 
 private void MyNotifyIcon_MouseClick(object sender, 
 MouseEventArgs e) 
 { 
 if (e.Button == MouseButtons.Left) 
 MessageBox.Show("Khoa Công nghệ thông tin, Trường 
 Đại học Lạc Hồng\nXin chào các bạn"); 
 } 
5.5. Điều khiển ToolStrip 
 ToolStrip là điều khiển cho phép tạo thanh công cụ trên form. Thông thường 
trong các ứng dụng Windows Forms, ToolStrip thường được bố trí phía dưới điều 
khiển MenuStrip như hình 5.23. 
 Hình 5.23: Vị trí của điều khiển ToolStrip trong Visual Studio 2010 
 Điều khiển ToolStrip nằm trong nhóm Menus & Toolbars của cửa sổ Toolbox 
như hình 5.24. 
 Điều khiển 
 ToolStrip 
 Hình 5.24: ToolStrip trong cửa sổ Toolbox 
  Một số thuộc tính thường dùng của ToolStrip: 
 Bảng 5.8: Bảng mô tả các thuộc tính thường dùng của ToolStrip 
 Thuộc tính Mô tả 
 Item Quản lý việc thêm xóa các điều khiển trên ToolStip 
 AllowItemReoder Mang giá trị True hoặc False. 
 - Nếu là True: cho phép người dùng sắp xếp 
 lại vị trí của các điều khiển trên ToolStrip, 
 thay đổi vị trí bằng cách giữ phím Alt và 
 nhấn chuột trái vào điều khiển và kéo đến vị 
 trí mới trên ToolStrip. 
 - Nếu là False: Các vị trí của điều khiển trên 
 161
 ToolStrip cố định không thể thay đổi bởi 
 người dùng. 
AllowMerge Cho phép người dùng giữ phím Alt và giữ chuột trái 
 vào điều khiển trên ToolStrip này và kéo thả vào 
 một ToolStrip khác. 
 Lưu ý: Thuộc tính này chỉ có hiệu lực khi thuộc tính 
 AllowItemReoder là True 
CanOverflow Mang hai giá trị True và False. 
 - Nếu là giá trị True: Khi số lượng điều khiển 
 trong ToolStrip vượt ra khỏi phạm vi kích thước 
 thì những điều khiển này sẽ được thu nhỏ trong 
 biểu tượng ở góc phải của ToolStrip. 
 - Nếu là giá trị False: Những điều khiển nằm 
 ngoài phạm vi kích thước sẽ không được thu 
 nhỏ trong biểu tượng ở góc phải của 
 ToolStrip. Biểu tượng sẽ không xuất hiện trên 
 ToolStrip. 
Dock Quy đinh vị trí hiển thị của ToolStrip trên form. 
 Top 
 Left Fill Right 
 Bottom 
LayoutStyle Kiểu trình bày của ToolStrip 
 162
 ShowItemTooltips Mang hai giá trị True hoặc False. 
 - Nếu là True: Cho phép hiển thị chuỗi khai 
 báo trong thuộc tính ToolTipText của mỗi 
 điều khiển chứa trong ToolStrip. 
 - Nếu là False: Chuỗi khai báo trong 
 ToolTipText của các điểu khiển chứa trong 
 ToolStrip không được hiển thị. 
 5.5.1. Các điều khiển chứa trong ToolStrip 
 Điểm đặc biệt của điều khiển ToolStrip là được cấu tạo dưới dạng container cho 
phép chứa các điều khiển khác như hình 5.25. 
 Hình 5.25: Các điều khiển ToolStrip chứa 
 Các điều khiển có thể tạo trên ToolStrip bao gồm: 
 - ToolStripDropDownButton: Điều khiển ToolStripDropDownButton cho 
 phép lập trình viên tạo một menu dạng sổ xuống và sẽ hiển thị khi người 
 dùng nhấp chuột vào. Các menu được tạo trong điều khiển 
 ToolStripDropDownButton là dạng MenuItem. 
 - ToolStripButton: Là điều khiển tượng tự như điều khiển Button. Điều khiển 
 này xuất hiện trên ToolStrip ở dạng một biểu tượng (Icon). Sự kiện thường 
 dùng của ToolStripButton là sự kiện Click 
 - ToolStripLabel: Là điều khiển có chức năng như chức năng của điều khiển 
 Label và điều khiển LinkLabel. Khi thuộc tính IsLink của ToolStripLabel là 
 true thì điều khiển ToolStripLabel trở thành LinkLabel, khi thuộc tính 
 IsLink là false ToolStripLabel như một điều khiển Label thông thường. 
 - ToolStripProgressBar: Tương tự như điều khiển ProgressBar và nằm trên 
 ToolStrip. 
 163
 - ToolStripSeparator: Là điểu khiển dùng để hiển thị dấu gạch phân cách, 
 giúp phân cách các điểu khiển trong ToolStrip với nhau để hiển thị một 
 cách dễ nhìn hơn. 
 - ToolStripComboBox: Điều khiển ToolStripComboBox có các thuộc tính, 
 phương thức và sự kiện tương tự như điều khiển ComboBox, nhưng được 
 đặt trên MenuStrip. Dạng hiển thị của ToolStripComboBox cũng có các 
 dạng như: Simple, DropDown hoặc DropDownList. 
 - ToolStripTextBox: Tương tự như điều khiển TextBox, được đặt trên 
 MenuStrip. Người dùng có thể gõ chuỗi ký tự vào ô văn bản, khi đó chuỗi 
 ký tự đó sẽ được truyền vào cho thuộc tính ToolStripTextBox.Text. Điểm 
 khác biệt chính của ToolStripTextBox và TextBox là điều khiển 
 ToolStripTextBox không có thuộc tính MultiLine, do đó ô văn bản của 
 ToolStripTextBox chỉ có một dòng. 
 - ToolStripSplitButton: Là điều khiển kết hợp chức năng của ToolStripButton 
 và ToolStripDropDownButton. Điều khiển này hiển thị một nút mà người 
 dùng có thể nhấn nút để thực thi mã lệnh, ngoài ra cũng chó phép hiển thị 
 một menu theo dạng sổ xuống như của ToolStripDropDownButton. Lập 
 trình viên có thể sử dụng sự kiện ToolStripSplitButton.CLick để viết mã 
 lệnh khi nhấn nút bấm hoặc có thể viết mã lệnh cho mỗi sự kiện 
 ToolStripMenuItem.Click 
  Hiển thị hình trên các điều khiển của ToolStrip 
 Các điều khiển ToolStripButton, ToolStripSplitButton và 
ToolStripDropDownButton có thể hiển thị hình, chuỗi mô tả hoặc cả hai. Bảng 5.9 mô 
tả các thuộc tính thường sử dụng để biểu diễn hình và chuỗi mô tả trên các điều khiển 
ToolStripButton, ToolStripSplitButton, ToolStripDropDownButton của ToolStrip 
 Bảng 5.9: Bảng mô tả thuộc tính của điều khiển trên ToolStrip 
 Thuộc tính Mô tả 
 DisplayStyle Gồm các giá trị: None, Text, Image, ImageAndText 
 - None: Không hiển thị Image và Text trên điều 
 khiển. 
 - Text: Chỉ hiển thị chuỗi mô tả được thiết lập 
 trong thuộc tính Text trên điều khiển (không 
 hiển thị hình). 
 - Image: Chỉ hiển thị hình được thiết lập trong 
 thuộc tính Image trên điều khiển (không hiển 
 thị chuỗi mô tả) 
 - ImageAndText: Hiển thị cả hình và chuỗi mô tả 
 164
 trên điều khiển 
 Image Chỉ định hình sẽ hiển thị trên điều khiển 
 TextImageRelation Kiểu hiển thị của Text và Image trên điều khiển: 
 Overlay, ImageAboveText, TextAboveImage, 
 TextBeforeImage, ImageBeforeText 
 - ImageBeforeText: 
 - TextBeforeImage: 
 - ImageAboveText: 
 - TextAboveImage: 
 - Overlay: 
 ImageScaling Kích thước của hình sẽ vừa với điều khiển hay 
 không. 
 - None: Hình sẽ hiển thị đúng với kích thước thật 
 - SizeToFit: Hình sẽ hiển thị với kích thước bằng 
 với kích thước của điều khiển 
 ImageTransparentColor Làm trong suốt màu của hình 
 5.5.2. ToolStripContainer 
 ToolstripContainer là dạng điều khiển thiết kế, chứa các điều khiển ToolStrip 
bên trong. Điểm đặc biệt là khi sử dụng ToolStripContainer, người dùng có thể kéo và 
di chuyển các ToolStrip trên các cạnh của form (nếu trên cạnh form có sử dụng 
 165
ToolStripContainer). ToolStripContainer nằm trong nhóm Menus & Toobars của cửa 
sổ Toolbox như hình 5.26. 
 Điều khiển 
 ToolStripContainer 
 Hình 5.26: Điều khiển ToolStripContainer 
 ToolStripContainer được cấu tạo bởi 5 panel: 4 panel dạng ToolStripPanel được 
bố trên nằm trên 4 cạnh của form và 1 panel dạng ContenPanel nằm giữa form. Thông 
thường khi sử dụng ToolStripContainer trên form thì thuộc tính Dock của điều khiển 
này được thiết lập là Fill như hình 5.27. 
 Hình 5.27: ToolStripContainer có thuộc tính Dock thiết lập giá trị Fill 
 Lập trình viên có thể loại bỏ các panel dạng ToolStripPanel nếu không muốn 
panel bố trí trên một cạnh nào đó của form. Ví dụ nếu chỉ muốn sử dụng 
ToolStripContainer không có hai panel bên cạnh phải và cạnh trái của form có thể thiết 
lập như hình 5.28. 
 Hình 5.28: ToolStripContainer không có hai panel bên cạnh trái và cạnh phải 
 của form 
 166
 Có thể loại bỏ panel như hình 5.28 hoặc thiết lập giá trị các thuộc tính: 
LeftToolStripPanelVisible, RightToolStripPanelVisible, TopToolStripPanelVisible, 
TopToolStripPanelVisible 
  Một số thuộc tính thường dùng của ToolStripContainer: 
 Bảng 5.10: Bảng mô tả thuộc tính của ToolStripContainer 
 Thuộc tính Mô tả 
 Dock Kiểu hiển thị của ToolStripContainer. 
 - Fill: Hiển thị bằng với kích thuốc form 
 - Top: Hiển thị nằm sát cạnh trên của form 
 - Bottom: Hiển thị nằm sát cạnh dưới của 
 form 
 - Left: Hiển thị sát cạnh trái của form 
 - Right: Hiển thị sát cạnh phải của form 
 Lưu ý: Thường thì thuộc tính Dock được thiết 
 lập giá trị Fill 
 LeftToolStripPanelVisible Mang giá trị True hoặc False. 
 - Nếu là True: Hiển thị panel bên cạnh trái 
 của form 
 - Nếu là False: Không hiển thị panel bên 
 cạnh trái của form 
 RightToolStripPanelVisible Mang giá trị True hoặc False. 
 - Nếu là True: Hiển thị panel bên cạnh phải 
 của form 
 - Nếu là False: Không hiển thị panel bên 
 cạnh phải của form 
 TopToolStripPanelVisible Mang giá trị True hoặc False. 
 - Nếu là True: Hiển thị panel cạnh trên của 
 form 
 - Nếu là False: Không hiển thị panel cạnh 
 trên của form 
 BottomToolStripPanelVisible Mang giá trị True hoặc False. 
 - Nếu là True: Hiển thị panel cạnh dưới của 
 form 
 - Nếu là False: Không hiển thị panel cạnh 
 dưới của form 
 167
Ví dụ 5.5: Thiết kế chương trình như hình 5.29. 
Yêu cầu sau khi nhập địa chỉ website trong TextBox của ToolStrip và nhấn Enter thì sẽ 
hiển thị website có địa chỉ vừa nhập. 
 Hình 5.29: Giao diện form hiển thị Website ví dụ 5.5 
Hướng dẫn: 
 Bước 1: Thiết kế giao diện chương trình. 
 - Kéo ToolStrip từ cửa sổ Toolbox vào form. Sau đó thêm hai điều khiển 
 ToolStripLabel và ToolStripTextBox trên ToolStrip như hình 5.30: 
 ToolStripLabel ToolStripTextbox 
 Hình 5.30: Giao diện form sau khi thêm ToolStrip 
 168
- Kéo điều khiển WebBrowser từ cửa số Toolbox và form như hình 5.31. 
 WebBrowser là điều khiển cho phép hiển thị website trên form. 
 webBrowser1 
 Hình 5.31: Giao diện form sau khi thêm điều khiển WebBrowser 
Bước 2: Thiết lập các giá trị cho thuộc tính của điều khiển trong cửa sổ 
Properties 
- form1: 
 Thuộc tính Text: “ToolStrip” 
 Thuộc tính Size: 405, 324 
- toolStrip1: 
 Thuộc tính AutoSize: False 
 Thuộc tính Size: 389, 37 
 Thuộc tính BackColor: Color.DodgerBlue 
- toolStripLabel1: 
 Thuộc tính Text: “Nhập địa chỉ website:” 
- toolStripTextbox: 
 Thuộc tính Name: txtAddress 
 Thuộc tính AutoSize: False 
 Thuộc tính Size: 200, 25 
- webBrowser1: 
 Thuộc tính Name: MyWebSite 
Bước 3: Viết mã lệnh cho các điều khiển trên form 
 169
 - Sự kiện KeyDown của txtAddress: 
 private void txtAddress_KeyDown(object sender, KeyEventArgs e) 
 { 
 if (e.KeyCode == Keys.Enter) 
 MyWebsite.Navigate(txtAddress.Text); 
 } 
5.6. Điều khiển StatusStrip 
 StatusTrip sử dụng để hiển thị thông tin trạng thái của ứng dụng, StatusStrip nằm 
ở vị trí dưới cùng của form. StatusStrip nằm trong nhóm Menus & Toolbars của cửa sổ 
Toolbox như hình 5.32. 
 Điều khiển 
 StatusStrip 
 Hình 5.32: StatusStrip trong cửa sổ Toolbox 
 Cũng giống như ToolStrip, StatusStrip cũng có thể chứa các điều khiển khác như 
hình 5.33. 
 Hình 5.33: Các điều khiển có thể chứa trên StatusStrip 
 Các điều khiển: StatusLabel, SplitButton, DropDownButton hay ProgressBar 
trên StatusStrip có chức năng tương tự như trên ToolStrip. Trong các điều khiển trên, 
điều khiển thường sử dụng trên StatusStrip nhất là StatusLabel 
  Một số thuộc tính thường dùng của StatusStrip: 
 170
 Bảng 5.11: Bảng mô tả thuộc tính của StatusStrip 
 Thuộc tính Mô tả 
 Item Quản lý việc thêm, xóa các điều khiển trên 
 StatusStrip như: StatusLabel, SplitButton, 
 DopDownButton, ProgressBar. 
 TextDirection Chiều hiển thị của chuỗi mô tả trong thuộct tính 
 Text. 
 LayoutStyle Vị trí hiển thị của StatusStrip. 
Ví dụ 5.6: Viết chương trình hiển thị thời gian trên StatusStrip của form như hình 5.34 
 Hình 5.34: Giao diện chương trình hiển thị thời gian trên StatusStrip ví dụ 5.6 
Hướng dẫn: 
 Bước 1: Thiết kế giao diện chương trình: Kéo điều khiển StatusStrip và Timer từ 
 cửa sổ Toolbox và form. Sau đó thêm điều khiển StatusLabel trên StatusStrip 
 như hình 5.35. 
 Hình 5.35: Giao diện form sau khi thêm StatusStrip 
 Bước 2: Thiết lập giá trị thuộc tính cho điểu khiển trong cửa sổ Properties 
 - form1: 
 Thuộc tính Text: “StatusStrip” 
 Thuộc tính Size: 405, 138 
 - timer1: 
 Thuộc tính Name: MyTimer 
 Thuộc tính Interval: 1000 
 Thuộc tính Enable: True 
 171
 - toolStripStatusLabel1: 
 Thuộc tính Name: MyStatusLabel 
 Bước 3: Viết mã lệnh cho điều khiển 
 - Sự kiện Tick của MyTimer: 
 private void MyTimer_Tick(object sender, EventArgs e) 
 { 
 MyStatusLabel.Text = DateTime.Now.ToString("hh:mm:ss"); 
 } 
5.7. Bài tập cuối chƣơng 
Câu 1: Viết chương trình soạn thảo văn bản có giao diện như hình 5.36. với các yêu 
cầu sau: 
 - Trên Form có một TextBox. 
 - Menu File có chứa mục Exit để thoát chương trình. 
 - Menu Clock có chứa mục: 
 o Date: cho xuất hiện ngày hiện tại trong TextBox. 
 o Time: cho hiện giờ hiện tại trong TextBox. 
 - Menu Format có chứa mục: 
 o Font: chọn font cho TextBox. 
 o Color: chọn màu cho văn bản trong TextBox. 
 o Align có chứa các mục: 
 o Left : canh lề trái cho TextBox. 
 o Right: canh lề phải cho TextBox. 
 o Center: canh giữa cho TextBox. 
 Hình 5.36: Giao diện chương trình soạn thảo văn bản 
 172
Câu 2: Viết chương trình gồm các bài tập có giao diện như hình 5.37. 
 Hình 5.37: Giao diện form các bài tập 
Yêu cầu: 
Khi nhấn F5 sẽ được form hiển thị như hình 01. Nhấp chuột chọn Menu sẽ được các 
MenuItem hiển thị như hình 02. 
- Khi chọn MenuItem “Bài 01” sẽ hiển thị giao diện như hình 5.38. 
 Hình 5.38: Giao diện bài tập 01 
 - Cho người dùng nhập Họ tên, Chọn lớp, nhập học bổng. 
 173
 - Khi nhấn nút Thêm thì kiểm tra xem các thông tin được nhập (Họ tên, Học 
 bổng) và chọn (Lớp) chưa? Nếu chưa, thông báo cho người dùng nhập, chọn 
 lại. Ngược lại thì thêm các thông tin vào ListView lvDanhSach 
 - Khi nhấn nút Lưu thì lưu danh sách các sinh viên cấp học bổng vào một tập tin 
 văn bản (*.txt) với dạng như hình 5.39. 
 Hình 5.39: Giao diện tập tin văn bản khi nhấn nút lưu 
- Khi chọn MenuItem “Bài 02” sẽ hiển thị giao diện như hình 5.40. 
 Yêu cầu: 
 - Người dùng chọn sở thích và màu thích của mình. 
 - Khi nhấn nút Sở Thích Của Bạn thì xuất MesageBox các sở thích được chọn 
 như hình 5.41. 
 - Khi nhấn nút Màu Bạn Thích thì xuất MesageBox màu được chọn như hình 
 5.42. 
 Hình 5.40: Giao diện bài tập 02 
 174
 Hình 5.41: MessageBox sở thích Hình 5.42: MessageBox màu đã chọn 
- Khi chọn MenuItem “Bài 03” sẽ hiển thị giao diện như hình 5.43. 
 Yêu cầu: 
 - Khi người dùng chọn giá trị trong DateTimePicker thì hiển thị các giá trị tương 
 ứng vào các TextBox bên dưới. 
 - Khi người dùng nhấn LinkLabel sẽ mở ứng dụng tương ứng. 
 Hình 5.43: Giao diện bài tập 03 
- Khi chọn MenuItem “Bài 04” sẽ hiển thị giao diện như hình 5.44 
 Hình 5.44: Giao diện bài tập 04 
 - Cho phép người dùng sử dụng chuột trái để vẽ trên form 
 175