Lập Trình Xử Lý Giao Diện Trong Winform với C#. NET Framework cho ta ba cách để user giao diện với chương trình áp dụng, đó là Windows Forms (có khi được gọi tắt là WinForms), Web Forms và Console applications. Trong chương trình của chúng ta chỉ học phần Windows Form cho lập trình xử lý giao diện và các ứng dụng cơ sở dữ liệu và phần Console applications cho phần hướng dẫn về lập trình hướng đối tượng.
Window form chính là cửa sổ của một màn hình ứng dụng. Nó chứa đựng các dữ liệu, control trên đó và là cửa sổ giao tiếp giữa người sử dụng (user) và máy tính.
Trong các bài học và thí dụ trước đây ta đã nói qua, bây giờ ta tóm tắc những điểm căn bản của Windows Forms:
Khi bạn tạo một dự án (project), thì 1 form sẽ được tự động đưa vào dự án với tên là form1. Tuy nhiên, trong một dự án sẽ thường có nhiều màn hình cửa sổ khác nhau (form), bạn sẽ thêm form vào dự án bằng cách vào menu Poject -> Add Window Form như hình dưới:
bạn đánh vào tên file cho form (mặc định nó sẽ là form1, form2, …..) và chọn open.
Trên màn hình của VS .Net, 1 form bao giờ cũng có 2 phần: phần form design và phần source code của form.
– Màn hình của form design: đây là phần dùng để tao giao diện cho 1 form bằng cách bạn kéo các đối tượng bên thanh công cụ và đưa vào trong form.
– Màn hình của source code
Màn hình source code là nơi để bạn viết các đoạn code của mình để xử lý.
Trong lập trình Visual thì phần lớn thời gian là ta thiết kế và xử lý các giao diện, thời gian viết code sẽ không nhiều và số lượng code để viết cũng không nhiều, chủ yếu là chỉ viết code để xử lý các sự kiện (ta sẽ bàn tới sau) cho các đối tượng mà thôi. Đây chính là thế mạnh của của lập trình visual.
Với 1 ứng dụng, ta có thể muốn form hiển thị ngay giữa màn hình, hoặc ta có thể muốn form này hiển thị giữa form kia, v.v… VS .Net cho ta cửa sổ properties để bạn lựa chọn các thông số startPosition của nó như sau:
với ý nghĩa của các thông số:
Trị số Vị trí khởi đầu |
Kết quả |
Manual |
Hiển thị form ở vị trí theo giá trị của property Location của form |
CenterScreen | Hiển thị form ở ngay giữa màn ảnh |
CenterParent | Hiển thị form ở ngay giữa form chủ (owner) của nó |
WindowsDefaultLocation | Hiển thị form ở vị trí default của cửa sổ |
WindowsDefaultBounds | Hiển thị form ở vị trí default của cửa sổ, với kích thước default của cửa sổ |
Một form thường có các đường viền (border) của nó, ta có thể thay đổi giá trị đường viền để form có những hình ảnh hiển thị khác nhau. Bạn có thể dùng cửa sổ properties để set lại giá trị FormBorderStyle
dưới đây là bảng giá trị của thuộc tính FormBorderStyle:
Loại |
Giá trị |
Diễn giải |
None |
0 |
Không có đường biên |
FixedSignle |
1 |
Tường tự như FixedDialog |
Gfixed3D |
2 |
Trông giống như 3 chiều |
FixedDialog |
3 |
Như hộp hội thoại |
Sizable |
4 |
Mặc nhiên |
FixedToolWindow |
5 |
Thanh caption nhỏ và không có nút close |
SizableToolWindow |
6 |
FizedToolWindow nhưng đường biên mỏng. |
Một số thuộc tính khác khá quan trọng của form:
Loại |
Giá trị |
Diễn giải |
ControlBox |
True |
Có hay không có 3 nút min, max, và close trên góc phải |
Maximinzebox |
True |
Có hay không có nút max |
Miniminzebox |
True |
Có hay không có nút min |
TopMost |
True |
Form này có luôn nằm lên trên hết các form khác hay không |
Caption |
Text |
Đoạn text nằm trên thanh bar trên đầu của form |
Name |
Text |
Tên của form. |
Và rất nhiều thuộc tính khác nữa mà ta sẽ học sau.
Lưu ý: phần lớn, ta có thể thiết lập các giá trị properties cho form hay các controls (button, label, v.v…) bằng 2 cách:
– Thiết lập bằng design (design-time) thông qua cửa sổ properties của form hay control đó.
– Thiết lập bằng lập trình (run-time) thông qua các đoạn code.
Trong lập trình visual, điều quan trọng nhấn là sử lý các sự kiện. Khi lập trình, thường ta chỉ thực hiện các thao tác kéo thả là ta có thể tạo được một giao diện hoàn chỉnh. Tuy nhiên, để giao diện đó hoạt động được theo đúng yêu cầu của ta thì ta buộc phải lập trình cho các sự kiện của từng hay nhiều control trên form đó.
Form có rất nhiều sự kiện, ở đây chỉ giới thiệu đến một số sự kiện quan trọng của form:
– Sự kiện Load:
private void Form3_Load(object sender, System.EventArgs e)
{
//Code xử lý cho quá trình form được load lên.
}
– Sự kiện Closed:
private void Form3_Closed(object sender, System.EventArgs e)
{
//Code xử lý cho quá trình form đang được đóng lại.
}
– Sự kiện Click (khi ta click mouse lên trên form):
private void Form3_Click(object sender, System.EventArgs e)
{
//Code xử lý khi chuột được click lên trên form.
}
Để tạo 1 hàm xử lý sự kiện (event function), cách tốt nhất là bạn bấm double click chuột lên đối tượng mà bạn muốn tạo hàm để xử lý sự kiện đó. Tuy nhiên, cách này thì VS .Net nó chỉ phát sinh 1 hàm xử lý sự kiện mặc định của nó (với form thi hàm mặc định xử lý sự kiện là Form_Load. Do vậy, bạn hãy mở cửa sổ properties của đối tượng đó, chọn tab các events, nó sẽ liệt kê các events mà đối tượng có như hình dưới đây,
sau đó bạn double click vào sự kiện mà bạn muốn, và một hàm xử lý sự kiện được tạo ở bên phần source code và bạn chỉ việc viết thêm code để xử lý sự kiện này mà không cần quan tâm đến bằng cách nào mà hệ thống kiểm tra và xử lý nó.
Khi một ứng dụng có nhiều form, vấn đề ở chỗ là form nào sẽ là form được chạy đầu tiên khi bạn run một ứng dụng?
Để chỉ định StartUp Form của chương trình, bạn cần phải mở cửa sổ Properties của Project để đánh vào Startup Object. Bạn có thể làm điều ấy bằng cách dùng IDE menu command Project | Properties hay right click tên của Project trong Solution Explorer rồi chọn Properties.
Lưu ý:
Vì trong 1 ứng dụng, thường chỉ có 1 form làm entry form (startup form) nên VS .Net sẽ tự set form đầu tiên của nó là form startup. Do đó, khi bạn thêm các form sau thì form đó sẽ không là form startup nên khi bạn startup object, nó sẽ không list ra cho bạn. Để có thể làm form startup, bạn phải thay đổi code ở bên trong bằng cách chép đoạn mã này vào trong phần code:
static void Main()
{
Application.Run(new Form1());
}
Và thay tên Form (ở ví dụ trên là Form1) bằng tên form mà bạn muốn làm startup form.
Hãy sử dụng Visual Studio .Net để tạo 1 project là FormLarger và tạo 1 form có giao diện giống như hình dưới và viết đoạn code để xử lý sự kiện khi click chuột lên trên form (bất kỳ chỗ nào) thì 1 message box sẽ hiển thị và form sẽ lớn thêm 50 pixels.
với các thuộc tính:
Caption | Click OK, Form lớn ra!!! |
FormBorderStyle | FixDialog |
MinimizeBox | false |
MaximizeBox | false |
Bạn hãy thay đổi màu nền và thay đổi các đường viền (border) để nhận thấy được sự khác nhau giữa các style của form.
Dưới đây là đoạn code để xử lý khi bạn click chuột lên trên form:
private void Form1_Click(object sender, System.EventArgs e)
{
MessageBox.Show(“Bạn mới click chuột lên trên form!\n” +
“Click Ok và form sẽ lớn hơn 50 pixels.”);
this.Height = this.Height + 50;
this.Width = this.Width + 50;
}
bạn có thể không cần xuống hàng ở câu lệnh Messagebox.Show()
Lưu ý: Nếu bạn đánh tiếng viện trên form (unicode) thì khi bạn save, nó sẽ yêu cầu bạn chọn save unicode.
Để làm việc này bạn hãy:
Click chuộn vào form cần save, chọn menu file -> Save <tên form> As…
bạn hãy đánh vào ô file name là frmNhapSV và chọn save with Encoding… và hộp hội thoại sẽ xuất hiện:
bạn hãy chọn Unicode (UTF-8 with signature) – Codepage 65001 và chọn OK.
Trong lập trình visual, form bao giờ cũng cần phải có tên để lập trình (form name) và tên form để lưu trên đĩa. Để cho dễ dàng trong lập trình và quản lý, ta thường hay lấy tên form để lập trình và tên form lưu trên đĩa giống nhau. Điều này giúp ta có thể chỉ biết được là form này có tên là gì mà không cần phải mở của sổ properties của nó lên.
Button control là một đối tượng nút nhấn được các nhà phát triển ngôn ngữ lập trình sẵn và để trong thư viện của Visual Studio .Net. Button control cho phép người dùng click chuột vào nó và nó sẽ thực thi một hay nhiều đoạn mã nào đó mà cho người lập trình (chúng ta) chỉ định thông qua các events mà nó nhận được.
Khi một button được click thì nó sẽ sinh ra một số các sự kiện (events) như Mouse Enter, MouseDown, MouseUp, v.v… và tuỳ với các sự kiện này mà chúng ta có thể lựa viết các đoạn code để xử lý cho phù hợp.
Cách tạo nút nhấn rất đơn giản, ta chỉ việc kéo đối tượng button trên hộp công cụ (toolbox) vào trong form, sau đó ta thay đổi tên (name), text (caption) và kích thước của đối tượng đó cho phù hợp với yêu cầu.
Lưu ý:
Phần lớn những cách tạo đối tượng, thay đổi của thuộc tính, v.v… mọi thứ mà ta làm bằng giao diện visual đều có thể làm bằng cách viết source code. Khi ta làm bằng công cụ visual, công cụ visual sẽ tự genera code ra cho ta.
Cũng như window form, button cũng có các thuộc tính riêng của nó. Tuy nhiên vì mỗi đối tượng có rất nhiều thuộc tính, vì vậy ở đây ta chỉ đề cập đến một số thuộc tính quan trọng và hay sử dụng nhiều nhất của đối tượng button. Dưới đây là một số thuộc tính thông dụng của đối tượng button:
Tên Thuộc tính |
Giá Trị |
Diễn giải |
Name |
Text | Tên cho button |
Text | Text | Chữ sẽ hiển thị trên button |
Font | Hộp hội thoại font | Chọn font chữ cho text (chữ hiển thị trên button) |
BackColor | Hộp màu | Chọn màu nền cho button |
ForeColor | Hộp màu | Chọn màu chữ cho button. |
TextAlign | TopLeft – TopCenter – TopRight | Canh lề chữ: trên bên trái – giữa phải. |
MiddleLeft – MiddleCenter – MiddleRight | ở giữa – bên trái – bên phải | |
BottomLeft – BottomCenter – BottomRight | bên dưới trái – giữa – phải | |
FlatStyle | Flat | Button sẽ bằng phẳng |
Popup | Giống Flat nhưng khi move mouse lên trên nó thì giống standard và khi bỏ mouse ra thì nó trở lại như cũ (Flat) | |
Standard | Mặc định của hệ thống | |
System | Giống standard nhưng sẽ thay đổi theo hệ điều hành | |
BackGroundImage | đường dẫn file hình | Hình bạn chỉ định sẽ làm nền cho button. Nếu hình không đủ lớn bằng button thì hình sẽ lặp lại (giống như bạn chọn chế độ Title khi bạn set background cho màn hình window). |
Image | đường dẫn file hình | Hình sẽ làm nền cho button (giống như bạn chọn Center khi set hình background cho window). |
Lưu ý:
Ở thuộc tính TextAlign, khi bạn bấm vào mũi tên sổ xuống trong cửa sổ properties, nó sẽ hiện ra 1 giao diện đồ hoạ cho ta chọn các kiểu canh lề như hình bên dưới.
Khi bạn chọn nút nào thì nút đó sẽ lõm xuống, đồng thời một dòng chữ sẽ hiển thị ra cho bạn biết là bạn đã chọn kiểu canh lề nào.
Anchoring (bỏ neo) là thuộc tính rất tiện dụng mà Visual Studio .Net mới đưa vào. Nó cho phép ta định vị trí của một control trên form khi ta resize một form.
Anchoring:
Khi con tàu bỏ neo là nó đỗ ở đó. Dù con nước chảy thế nào, con tàu vẫn nằm yên một chỗ vì nó đã được cột vào cái neo. Control trong .NET có property Anchor để ta chỉ định nó được buộc vào góc nào của form: Left, Right, Bottom hay Top.
Trong lúc thiết kế, sau khi select cái control (thí dụ Button1), ta vào cửa sỗ Properties và click hình tam giác nhỏ bên phải property Anchor. Một hình vuông với bốn thanh ráp lại giống hình chữ thập màu trắng sẽ hiện ra. Mỗi thanh tượng trưng cho một góc mà ta có thể chỉ định để cột control vào form. Khi ta click một thanh, nó sẽ đổi màu thành xám đậm, và một chữ tương ứng với thanh ấy sau nầy sẽ hiển thị trong textbox area của combobox Anchor.
Thí dụ ta click vào thanh dưới và hai thanh hai bên, ta sẽ có Bottom, Left, Right như trong hình dưới đây:
Khi Button1 có Anchor là Bottom, Right thì mỗi khi góc phải dưới của form di chuyển vì resize, Button1 cứ chạy theo góc ấy:
Nếu Button1 có Anchor là Left, Right, Bottom thì khi form resizes cho lớn ra, Button1 cứ giữ khoảng cách từ nó đến ba cạnh Left, Right, Bottom của form không đổi. Do đó nó phải nở rộng ra như trong hình dưới đây:
Nếu Button1 có Anchor là Top,Bottom,Left, Right thì khi form resizes, Button1 cứ giữ khoảng cách từ nó đến bốn cạnh Left, Right, Top, Bottom của form không đổi. Do đó nó phải nở rộng hay thu nhỏ cả chiều cao lẫn chiều rộng như trong hình dưới đây:
Vì property Anchor có hiệu lực lập tức ngay trong lúc ta thiết kế, nên nếu bạn resize form trong lúc thiết kế, các control có Anchor property set cũng resize và di chuyển theo. Có thể bạn không muốn chuyện đó xãy ra, nên tốt nhất là set property Anchor của các control sau khi thiết kế form xong hết rồi.
Trong các sự kiện của button thì chỉ có sự kiện Click chuột là quan trong nhất. Do đó, trong phần này ta cũng chỉ đi tìm hiểu sự kiện Click chuột.
Cách tạo:
Sự kiện click chuột là sự kiện mặc định của control button, do đó, bạn chỉ cần double click chuột vào button cần tạo sự kiện là VS .Net sẽ mở cửa sổ source code ra và tự động generate một hàm xử lý sự kiện click chuột cho bạn.
private void button1_Click(object sender, System.EventArgs e)
{
//Bạn sẽ đánh code cho phần xử lý sự kiện ở đây.
}
với button1_Click thì button1 chính là tên của control button mà bạn tạo sự kiện Click chuột cho nó.
a) Hãy tạo 1 project có tên là Button và thiết kế form có 1 button giống như hình bên dưới:
Với các thuộc tính:
Đối Tượng |
Thuộc Tính | Giá Trị |
Form |
Text Name |
Button Mặc định |
Button | Text Name |
Click chuột vào đây! Mặc định. |
Và tạo một sự kiện click chuột cho button này.
Bạn double click chuột vào button, Visual Studio sẽ sinh ra cho bạn một hàm để sử lý sự kiện click chuột vào button. Vì sự kiện Click là sự kiện mặc định của button nên khi bạn double click vào thì sự kiện click cho button đó sẽ được tự động sinh ra. Sau đó đánh thêm vào đoạn code sau:
private void button1_Click(object sender, System.EventArgs e)
{
MessageBox.Show(“Xin chào các bạn!”);
}
MessageBox là đối tượng hiển thị các thông báo trên màn hình.
Lưu ý:
– Khi bạn muốn tạo 1 sự kiện cho một control nào đó, bạn chọn event trong cửa sổ properties của đối tượng đó, và Visual Studio sẽ tự động chuyển sang màn hình source code và 1 hàm xử lý sự kiện được tự động tạo ra cho bạn. Tuy nhiên, hệ thống nó sẽ sinh ra nhiêu đoạn mã khác nhưng nó được cất dấu ở trong phần riêng của form và được ẩn đi. Hình dưới:
+ Windows Form Designer generated code
Bạn có thể xem đoạn code bên trong bằng cách bấm chuột vào dấu +. Bạn có thể thay đổi source code này theo ý mình nhưng tôi khuyên bạn không nên chỉnh sửa nó trừ khi bạn biết rõ mình sửa nó để làm gì và với mục đích gì.
– Như đã trình bày ở trên, khi bạn đánh vào font chữ việt sự dụng font unicode, bạn phải lưu form ở chế độ save as unicode (xem lại trên).
Bạn hãy chạy chương trình bằng cách bấm phím F5 để xem kết quả.
b) Hãy tạo 1 form gồm 2 button giống như hình dưới:
Khi button Xanh được bấm thì màu nền của form sẽ đổi sang màu xanh, button Đỏ được bấm thì màu nền của form sẽ đổi sang màu đỏ, và button mặc định được bấm thì màu nền của form lại trở về như lúc đầu.
Các thuộc tính:
Đối Tượng |
Thuộc Tính |
Giá Trị |
Form |
Name Text |
frmMauNen Button Đổi Màu Nền Cho Form |
Button | Name Text |
btnXanh Xanh |
Button | Name Text |
btnDo Đỏ |
Button | Name Text |
btnMacDinh Mặc Định |
Dưới đây là source code:
– Cho button btnXanh
private void btnXanh_Click(object sender, System.EventArgs e)
{
this.BackColor = Color.Blue;
}
– Cho button btnDo
private void btnDo_Click(object sender, System.EventArgs e)
{
this.BackColor = Color.Red;
}
– Cho button btnMacDinh
private void btnMacDinh_Click(object sender, System.EventArgs e)
{
this.BackColor = Color.Empty;
}
Giải thích: Các tên hàm và các tham số là do Visual Studio .Net tự nó generate ra cho chúng ta nên ta chỉ xét các code bên trong.
this : chỉ đối tượng chính nó (nó giống như Me trong VB6). Ở đây nó chính là form frmMauNen.
Color: là đối tượng màu được lưu sẵn trong thư viện của VS .Net
Blue, Red: là hằng số về màu có sẵn trong thư viện của VS .Net
this.BackColor: ta thấy this là đối tượng, BackColor chính là thuộc tính. Và tương tự với những đối tượng và thuộc tính khác.
c) Nâng cao: ở ví dụ trên, bạn hãy viết thêm đoạn code để khi mặc định thì button mặc định mờ căm (disable), 2 button kia thì bình thường (enable); Khi button đỏ được bấm thì button đỏ sẽ tự mờ căm (disable), 2 button kia bình thường; Khi button xanh được bấm thì button xanh sẽ tự mờ căm, 2 button kia bình thường.
Ghi chú:
– Trong lập trình visual, các đối tượng đều có tên riêng của nó. Vì vậy để cho dễ dàng trong việc quản lý và lập trình, người ta thường đưa ra quy ước các tên của đối tựong. Bảng dưới đây mô tả cách đặt tên cho một số các control thông dụng mà ta thường sử dụng trong lập trình giao diện.
Kiểu Điều Khiển
Cùm Từ Đứng Đầu
Ví Dụ
Form
frm
frmNhapSVButton
btn
btnDoLabel
lbl
lblMsgHộp văn bản (Textbox)
txt
txtHovaTenSVHộp đánh dấu (Checkbox)
chk
chkReadOnlyNút tuỳ chọn (radio button)
opt
optGioiTinhHộp kết hợp (combo box)
cbo
cboKhoaHình ảnh (Image)
img
imgSinhVienLưới (Grid)
grd
grdDanhSachSVThanh cuộn đứng
hsb
hsbVolumeThanh cuộn ngang
vsb
vsbVolumeThanh công cụ (ToolBar)
tlb
tlbQLSVMenu
mnu
mnuQLSVHộp hội thoại thông dụng
dlg
dlgFileOpenThời giam (Timer)
tmr
tmrAlarm
– Một lợi ích khi lập trình visual là các công cụ hỗ trợ lập trình visual (như Visual Studio .Net) thường có hỗ trợ cú pháp trong quá trình bạn code.
Khi bạn code, như ví dụ trên, khi bạn đánh vào this. (chấm) thì lập tứng một cửa sổ popup sổ xuống list cho ta danh sách các thuộc tính và phương thức của đối tượng ta vửa mới đánh vào (this).
Nhãn là thành phần đơn giản nhất và cũng là một trong những thành phần quan trọng nhất trong lập trình visual. Đối tượng nhãn (Label) chỉ để dùng trình bày một chuổi văn bản thông thường nhằm mục đính mô tả thêm thông tin cho các đối tượng khác. Ta cũng có thể dùng nhãn để làm công cụ đưa kết quả ra màn hình dưới dạng một chuỗi.
Cũng giống như button và hầu hết các control khác trong lập trình visual, để tạo một nhãn trên form, ta chỉ cần kéo đối tượng nhãn từ hộp công cụ ToolBox vào form giống như hình dưới đây:
Nhìn chung, các thuộc tính của các đối tượng window form control cũng gần gần như nhau. Do đó, các thuộc tính mà giống với thuộc tính như của control button như name, text, font, backcolo, v.v… thì tôi sẽ không trình bày ra nữa. Sau đây là một số thuộc tính thông dụng của nhãn (Label):
Tên Thuộc tính |
Giá Trị |
Diễn giải |
BorderStyle | None (mặc định) | Không có đường viền |
FixedSingle | Có đường viền bao quanh | |
Fixed3D | 3D, trông nó giống như bị lõm xuống (giống textbox) |
Đối với nhãn, ta cũng có thể sử dụng anchoring để chỉ định vị trí nhãn trên form khi ta resize form.
Trong lập trình Visual, mọi đối tượng đều có sự kiện cho riêng nó, tuy nhiên đối với nhãn, ta thường không sử dụng sự kiện vì nhãn chỉ có chức năng thông dụng là hiển thị một câu thông báo hay kết quả ra màn hình. Vì vậy ở đây ta cũng không xét đến các sự kiện của nó.
a) Dùng cửa sổ form ta đã làm ở phần button, thêm vào 1 label để hiển thị các giá trị khi ta click vào các button. Giá trị hiển thị ở đây gồm thông tin về màu nền và tên của button được click. Bạn có thể sử dụng anchoring để thiết lập kích thước và vị trí của label khi bạn resize form.
Với các thuộc tính:
Label | Name Text |
lblMsg Bỏ trắng |
Và dưới đây là source code:
private void btnXanh_Click(object sender, System.EventArgs e)
{
this.BackColor = Color.Blue;
string msg = “”;
msg = msg + “Màu nền form: ” + this.BackColor.ToString()+”\n”;
msg = msg + “Button click: ” + btnXanh.Text;
lblMsg.Text = msg;
}
private void btnDo_Click(object sender, System.EventArgs e)
{
this.BackColor = Color.Red;
string msg = “”;
msg = msg + “Màu nền form: ” + this.BackColor.ToString()+”\n”;
msg = msg + “Button click: ” + btnDo.Text;
lblMsg.Text = msg;
}
private void btnMacDinh_Click(object sender, System.EventArgs e)
{
this.BackColor = Color.Empty;
string msg = “”;
msg = msg + “Màu nền form: ” + this.BackColor.ToString()+”\n”;
msg = msg + “Button click: ” + btnMacDinh.Text;
lblMsg.Text = msg;
}
Giải thích: Các hàm sự kiện này ta đã giải thích ở phần button rồi nên ở đây tôi chỉ giải thích các phần mới (phần in đậm).
Đầu tiên ta khai báo 1 biến msg và khởi gán bằng khoảng trống
string msg = “”;
this.BackColor.ToString(): Trong lập trình visual, đối với thuộc tính, ta có thể vừa lấy (get) và vừa gán (set) giá trị cho thuộc tính của đối tượng (cũng có trường hợp một số thuộc tính chỉ cho gán hoặc chỉ cho lấy giá trị mà thôi). Trong trường hợp này, thuộc tính BackColor cũng là một đối tượng nên ta không thể cộng đối tượng vào một chuỗi được mà ta phải đổi nó ra chuỗi (phương thức ToString())
This.BackColor: là lấy (hoặc gán) màu của (cho) đối tượng this.
btnMacDinh.Text: lấy (hoặc gán) text trên button btnMacDinh.
lblMsg.Text: gán (hoặc lấy) text vào (của) label lblMsg.
Chú ý:
Khi bạn mới bắt đầu chạy thì label sẽ trống không. Điều này đúng vì các sự kiện ghi dữ liệu lên nhãn (label) chỉ có hiệu lực một khi bạn click chuột lên 1 trong 3 button mà thôi. Để khi mới khởi động mà ta cũng có dữ liệu xuất lên trên nhãn thì ta phải viết thêm một sự kiện cho form: đó là sự kiện form_load.
private void frmMauNen_Load(object sender, System.EventArgs e)
{
string msg = “”;
msg = msg + “Màu nền form: ” + this.BackColor.ToString()+ “\n”;
msg = msg + “Button click: None”;
lblMsg.Text = msg;
}
b)
Textbox là đối tượng để nhập văn bản vào. Đây cũng là một trong những control thông dụng nhất trong lập trình visual.
Cũng giống như button và label, textbox cũng có những thuộc tính gần giống với thuộc tính của 2 control mà ta đã được học qua. Dưới đây là bảng những thuộc tính thông dụng nhất của textbox:
Tên Thuộc tính |
Giá Trị |
Diễn giải |
MaxLength | integer | Chiều dài tối đa dữ liệu nhập (ký tự) |
Multiline | True False |
Cho hay không cho textbox cao lên để cho phép nhập nhiều dòng. |
PasswordChar | character | Nếu bạn muốn textbox này là 1 password field thì bạn chỉ cần chỉ định character mà bạn muốn hiển thị khi bạn nhập password vào thuộc tính này. |
ReadOnly | True False |
Cho hay không cho phép nhập liệu vào textbox này. |
RightToLeft | Yes No |
Yes – Nếu bạn muốn canh lề phải dữ liệu nhập. |
ScrollBar |
Thuộc tính này chỉ có tác dụng khi bạn chọn Multiline= True NoneKhông có thanh cuộn.HorizontalChỉ có thanh cuộn đứng.VerticalChỉ có thanh cuộn ngang.BothCó cả 2 thanh cuộn đứng và ngang.WordWrap
Thuộc tính này chỉ có tác dụng khi bạn chọn Multiline= TrueTrue
FalseTrue – Nếu bạn muốn khi nhập liệu vào textbox thì nó sẽ tự động xuống dòng nếu như hết hàng.
Cũng như label, Textbox thường chức năng chính là để nhập liệu nên nó cũng ít khi phải sử dụng các sự kiện nên ở phần này ta cũng không bàn về các sự kiện của textbox.
a) Hãy tạo một project có tên TextBox và tạo giao diện nhập mới 1 sinh viên giống như hình dưới. Ví dụ này chỉ giới thiệu về cách thiết kế giao diện, không có các xử lý sự kiện.
Với các thuộc tính:
GroupBox | Name Text ForeColor |
grpThongTinCaNhan Thông Tin Cá Nhân Đỏ sậm |
Label | Name Text ForeColor |
Mặc định Mã Số Xanh dương (blue) |
Label | Name Text ForeColor |
Mặc định Họ và Tên Xanh dương (blue) |
Label | Name Text ForeColor |
Mặc định Ngày Sinh Xanh dương (blue) |
Label | Name Text ForeColor |
Mặc định Nơi Sinh Xanh dương (blue) |
Label | Name Text ForeColor |
Mặc định Địa Chỉ Xanh dương (blue) |
Label | Name Text ForeColor |
Mặc định Số ĐT Xanh dương (blue) |
Label | Name Text ForeColor |
Mặc định Mã Số Xanh dương (blue) |
TextBox | Name | txtMaSV |
TextBox | Name | txtHovaTen |
TextBox | Name | txtNgaySinh |
TextBox | Name | txtNoiSinh |
TextBox | Name | txtDiaChi |
TextBox | Name | txtSoDT |
TextBox | Name | txtEmail |
Button | Name Text |
btnLuu Lưu |
Button | Name Text |
btnHuỷ Huỷ |
Button | Name Text |
btnThoat Thoát |
Lưu ý:
Các đối tượng label:
font-name: tahoma
font-size: 10px
font-weight: bold
Các đối tượng textbox
font-name: tahoma
font-size: 10px
font-weight: normal
b) Hãy tạo một project có tên là TextArea và tạo giao diện form cho 1 ứng dụng soạn thảo văn bản đơn giản giống như hình dưới. Ví dụ này cũng chỉ để giúp bạn tạo giao diện mà thôi, không có các xử lý.
với các thuộc tính sau:
From | Name Text |
frmEditor Chương Trình Soạn Thảo Văn Bản |
Button | Name Text |
btnLuuFile Lưu File |
Button | Name Text |
btnMoFile Mở File |
Textbox | Name | txtEditor |
2 button sử dụng
font: tahoma
size: 10pt
weight: bold
Textbox sử dụng
font: tahoma
size: 12pt
weight: normal
Ô đánh dấu tương tự như nút nhấn, chỉ khác là chúng dùng để biểu hiện trạng thái chuyển đổi giữa có/không (yes/no) hoặc tắt mở (on/off). Mỗi lần ta nhắp chuột vào ô chọn hay dùng nhấn ph1im space bar kh checkbox đang focus thì nó thay đổi trạng thái từ đựơc đánh dấu sang bỏ đánh dấu hoặc ngược lại.
Một ô đánh dấu bao gồm 2 thành phần: nhãn và một dấu hiệu biểu hiện trạng thái của ô. Nhãn được đặt cạnh ô chứa dấu trạng thái. Trạng thái được biểu diễn như kiểu boolean. Mặc định ban đầu của trại thái là false có nghĩa là ô chưa được đánh dấu.
Tên Thuộc tính |
Giá Trị |
Diễn giải |
CheckAlign | TopLeft – TopCenter – TopRight | Canh lề checkbox: trên bên trái – giữa phải của khung checkbox |
MiddleLeft – MiddleCenter – MiddleRight (mặc định) |
ở giữa – bên trái – bên phải của khung checkbox | |
BottomLeft – BottomCenter – BottomRight | bên dưới trái – giữa – phải của khung checkbox | |
RightToLeft | Yes No |
Chữ nằm bên phải hay bên trái ô checkbox. |
FlatStyle | Flat | checkbox sẽ bằng phẳng |
Popup | Giống Flat nhưng khi move mouse lên trên nó thì giống standard và khi bỏ mouse ra thì nó trở lại như cũ (Flat) | |
Standard (mặc định) | checkbox lõm xuống (3D) | |
System | Giống standard nhưng sẽ thay đổi theo hệ điều hành | |
Checked |
True False |
Chọn checkbox (đánh dấu) hay không chọn checkbox. |
CheckState | checked | checkbox đang được đán dấu |
unchecked | checkbox không được đánh dấu | |
indeterminate trạng thái này chỉ có tác dụng khi thuộc tính ThreeState = true |
checkbox ở trạng thái không hoạt động | |
ThreeState | true false |
Cho phép checkbox có 3 trạng thái: chọn – không chọn – không tác dụng |
Checkbox cũng có nhiều sự kiện nhưng ta chỉ xét một sự kiện quan trọng nhất và thông dụng nhất ở đây là sự kiện Click.
Sự kiện click của checkbox cũng giống như sự kiện click của button, tuy nhiên, ta cần phải kiểm tra để biết được là khi ta click chuột này thì trạng thái chọn (checked) hay là trạng thái bỏ chọn (unchecked).
Để kiểm tra xem là checkbox đang ở trạng thái nào, bạn có 2 cách kiểm tra:
– Dùng thuộc tính checked của checkbox
– Dùng thuộc tính checkstatus của checkbox
Ví dụ dưới đây minh hoạ khi bạn click chuột vào checkbox, nếu checkbox bật lên chế độ chọn thì chữ của checkbox sẽ chuyển thành “checked” và ngược lại, chữ của checkbox sẽ chuyển thành unchecked.
private void checkBox1_Click(object sender, System.EventArgs e)
{
if (checkBox1.Checked)
{
checkBox1.Text = “Checked”;
}
else
{
checkBox1.Text = “Unchecked”;
}
}
Với checkstatus, bạn có thể có tới 3 trạng thái:
– Checked
– Unchecked
– Indeterminate
private void checkBox1_Click(object sender, System.EventArgs e)
{
switch(checkBox1.CheckState)
{
case CheckState.Checked:
// Code for checked state.
case CheckState.Uncheckeð:
// Code for uncheckeð state.
case CheckState.Indeterminate:
// Code for indeterminate state.
}
}
a) Bạn hãy sử dụng lại chương trình đổi màu nền của form ở trên và tạo thêm các checkbox sao cho giống với hình ở dưới đây. Khi checkbox Bold hay Italic hay Underline hay Strikeout được chọn thì thuộc tính của chữ ở label bên cạnh sẽ thay đổi theo kiểu của checkbox mà bạn click.
Các thuộc tính:
Đối Tượng |
Thuộc Tính |
Giá Trị |
Checkbox |
Name Text |
chkFontBold Bold |
Checkbox | Name Text |
chkFontItalic Italic |
Checkbox | Name Text |
chkFontUnderline Underline |
Checkbox | Name Text |
chkFontStrikeout Strikeout |
Tất cả đều sử dụng font tahoma, size 10pt
Dưới đây là source code:
private void chkFontBold_CheckedChanged(object sender, System.EventArgs e)
{
if (chkFontBold.Checked)
lblMsg.Font = new Font(lblMsg.Font, FontStyle.Bold);
}
private void chkFontItalic_CheckedChanged(object sender,System.EventArgs e)
{
if (chkFontItalic.Checked)
lblMsg.Font = new Font(lblMsg.Font, FontStyle.Italic);
}
private void chkFontUnderline_CheckedChanged(object sender, System.EventArgs e)
{
if (chkFontUnderline.Checked)
lblMsg.Font = new Font(lblMsg.Font, FontStyle.Underline);
}
private void chkFontStrikeout_CheckedChanged(object sender, System.EventArgs e)
{
if (chkFontStrikeout.Checked)
lblMsg.Font = new Font(lblMsg.Font, FontStyle.Strikeout);
}
Giải thích:
Thuộc tính font của các đối tượng là thuộc tính readonly nên ta không thể sử dụng gán như các thuộc tính khác mà ta phải sử dụng đối tượng font để thay đổi thuộc tính của nó.
myControl.Font = new Font(myControl.Font, FontStyle.Bold
Italic
Underline
Strikeout);
Với
myControl: là control mà bạn muốn set font của nó.
FontStyle : có 4 sự lựa chọn cho bạn: đậm (bold), in nghiêng (Italic), gạch dưới (Underline), và gạch ngang chữ (Strikeout)
Tuy nhiên, khi chạy chương trình này ta thấy nó không được hợp lý vì khi ta chọn 2 thuộc tính font Bold và font Italic thì đáng lẽ font hiển thị trên label sẽ vừa đậm vừa in nghiêng nhưng thật ra chỉ có 1 mục mà bạn mới chọn làm thay đổi thuộc tính font, còn thuộc tính kia thì tự biến mất. Vấn đề này ta sẽ giải quyết nó ở phần sau.
Nút chọn dùng để thay đổi trạng thái biểu hiện có/không hay tắt/mở. Chúng gồm nhiều nút (từ 2 nút chọn trở lên) được nhóm lại với nhau. Mỗi lúc chỉ có 1 nút được chọn, khi nút này chọn thì tất cả các nút khác trong nhóm đều bỏ không được chọn. Ta hình dung nút chọn tựa như nút ra đài trên radio, mỗi lần ta chỉ bắt được và nghe được một đài duy nhất trong số nhiều đài mà thôi (chính vì vậy mà nó mới có tên gọi là radio button).
Radio button là anh em với checkbox hay nói cách khác, nút chọn là trường hợp đặc biệt của checkbox nên ta không ghi ra đây những thuộc tính cũng như sự kiện của nó mặc dù nó có vài điểm khác nhưng không quan trọng lắm.
Ví dụ:
Bạn hãy tạo một chương trình gồm 1 dãy các nút chọn và một nhãn. Khi bạn chọn các màu tương ứng ở radio button thì màu trong nhãn sẽ thay đổi theo như hình dưới :
Các thuộc tính:
Đối Tượng |
Thuộc Tính |
Giá Trị |
Form |
Name Text |
frmRadioDemo Radio Button Demo Application |
Group Box |
Name Text |
default Màu |
Radio Button |
Name Text ForeColor |
optBlack Black Black |
Radio Button |
Name Text ForeColor |
optBlue Blue Blue |
Radio Button |
Name Text ForeColor |
optGreen Green Green |
Radio Button |
Name Text ForeColor |
optCyan Cyan Cyan |
Radio Button |
Name Text ForeColor |
optRed Red Red |
Radio Button |
Name Text ForeColor |
optMangenta Mangenta Magenta |
Radio Button |
Name Text ForeColor |
optYellow Yellow Yellow |
Radio Button |
Name Text ForeColor |
optWhite White White |
Label |
Name Text |
lblColor |
Và dưới đây là source code:
private void optBlack_CheckedChanged(object sender, System.EventArgs e)
{
lblColor.BackColor = Color.Black;
}
private void optBlue_CheckedChanged(object sender, System.EventArgs e)
{
lblColor.BackColor = Color.Blue;
}
private void optGreen_CheckedChanged(object sender, System.EventArgs e)
{
lblColor.BackColor = Color.Green;
}
private void optCyan_CheckedChanged(object sender, System.EventArgs e)
{
lblColor.BackColor = Color.Cyan;
}
private void optRed_CheckedChanged(object sender, System.EventArgs e)
{
lblColor.BackColor = Color.Red;
}
private void optMagenta_CheckedChanged(object sender, System.EventArgs e)
{
lblColor.BackColor = Color.Magenta;
}
private void optYellow_CheckedChanged(object sender, System.EventArgs e)
{
lblColor.BackColor = Color.Yellow;
}
private void optWhite_CheckedChanged(object sender, System.EventArgs e)
{
lblColor.BackColor = Color.White;
}
Giải thích:
lblColor.BackColor = Color.Black;
Color là một collection trong đó nó chứa những giá trị màu. Bạn chỉ cần đánh Color. (chấm) là tự động VS .Net sẽ sổ xuống 1 danh sách trong đó có chứa các màu của Color Collection.
List cho phép ta tạo ra một danh sách các phần tử để lựa chọn. Nếu như số lượng các phần tử lớn hơn số lượng mà danh sách có thể hiển thị trên màn hình (do ta design danh sách có kích thước cao hay ngắn) thì một thanh cuộn sẽ tự động thêm vào trong danh sách để cho ta có thể list qua hết các phần tử. Danh sách List trình bày tất cả (hay một phần các phần tử tuỳ theo số lượng phần tử và độ dài trong giao diện của List), ta có thể chọn ra một hay nhiều phần tử cùng một lúuc từ danh sách để xử lý.
Từ phần này, các thuộc tính của các control mà nó giống với các thuộc tính ở trên thì tôi không trình bày ra ở đây nữa.
Tên Thuộc tính |
Giá Trị |
Diễn giải |
MultiColumn | True False (mặc định) |
Cho phép hiển thị các item thành các cột thay vì 1 cột như mặc định của nó |
SelectionMode | None | Không có item nào được chọn. Dách sách chỉ để hiển thị xem mà thôi |
One | Chỉ có 1 item được phép chọn. | |
MultiSimple | Có nhiều item được phép chọn cùng một lúc. | |
MultiExtended | Giống như MultiSimple nhưng ta có thể dùng phím như SHIFT, các phím mũi tên để chọn. | |
Sorted | True False |
Sắp xếp danh sách theo thứ tự aphabet |
Items | Collection… | Một hộp hội thoại cho phép bạn nhập vào danh sách các item. |
Khi bạn chọn Items Collection…, một hộp hội thoại String Collection Editor hiển thị ra cho phép bạn nhập vào các items:
Đối với Listbox, bạn có thể sử dụng dữ liệu lấy tự database lên thay cho các dữ liệu bạn nhập vào để làm danh sách. Phần database ta sẽ học ở phần sau.
Sự kiện quan trọng và hay sử dụng nhất của Listbox là SelectedIndexChange. Sự kiện này được phát sinh khi bạn click chuột vào 1 item khác hay bạn dùng phím mũi tên để di chuyển giữa các item.
Tạo một project có tên ListBoxDemo cho phép chọn lựa sinh viên vào một lớp từ một danh sách các sinh viên như hình dưới đây:
Các thuộc tính:
Đối Tượng |
Thuộc Tính |
Giá Trị |
Form |
Name Text |
frmListDemo Listbox Demo Application |
ListBox |
Name Items |
lstNguon Danh sách các sinh viên (tự nhập) |
ListBox |
Name Items |
lstDich Bỏ trống |
Button |
Name Text |
btnAdd > |
Button |
Name Text |
btnAddAll >> |
Button |
Name Text |
btnRemove < |
Button |
Name Text |
btnRemoveAll << |
Label |
Name Text |
default Danh sách SV: |
Label |
Name Text |
default Danh sách lớp: |
Dưới đây là source code:
private void btnAdd_Click(object sender, System.EventArgs e)
{
try
{
lstDich.Items.Add(lstNguon.SelectedItem);
lstNguon.Items.Remove(lstNguon.SelectedItem);
}
catch(ArgumentNullException nex)
{
MessageBox.Show(“Bạn chưa chọn sinh viên nào!!!”);
}
catch(Exception ex)
{
MessageBox.Show(ex.Message);
}
}
private void btnAddAll_Click(object sender, System.EventArgs e)
{
foreach(string item in lstNguon.Items)
lstDich.Items.Add(item);
lstNguon.Items.Clear();
}
private void btnRemove_Click(object sender, System.EventArgs e)
{
try
{
lstNguon.Items.Add(lstDich.SelectedItem);
lstDich.Items.Remove(lstDich.SelectedItem);
}
catch(ArgumentNullException nex)
{
MessageBox.Show(“Bạn chưa chọn sinh viên nào!!!”);
}
catch(Exception ex)
{
MessageBox.Show(ex.Message);
}
}
private void btnRemoveAll_Click(object sender, System.EventArgs e)
{
foreach(string item in lstDich.Items)
lstNguon.Items.Add(item);
lstDich.Items.Clear();
}
Giải thích:
Ở phần source code bên trên, bạn thấy có 2 cái mới: đó là phần bắt lỗi:
try{} catch{}
và vòng lặp foreach.
Hai phần này sẽ được giải thích kỹ ở phần lập trình hướng đối tượng mà ta sẽ học sau. Ở đây, tôi chỉ giải thích sơ về 2 câu lệnh cú pháp này.
– try{} catch{} là câu lệnh dùng để bắt lỗi. Các source code mà ta cần bắt lỗi sẽ để ở trong try{} và nếu như có xảy ra lỗi thì tự động dừng lại và nhảy ra khỏi khối try{} và đi vào trong khối catch{}. Ở đây ta sẽ xử lý các lỗi dựa vào biểu thức expression. Cách bắt lỗi ở phần catch{} có thể có nhiều khối (như ví dụ trên gồm 2 khối bắt lỗi):
catch(ArgumentNullException nex)
{
MessageBox.Show(“Bạn chưa chọn sinh viên nào!!!”);
}
catch(Exception ex)
{
MessageBox.Show(ex.Message);
}
Exception là phần bắt tất cả các lỗi xảy ra nên bao giờ cũng để ở sau cùng. Cú pháp sẽ là:
try khối lệnh try
catch (exception để bắt lỗi 1) khối lệnh catch 1
catch (exception để bắt lỗi 2) ckhối lệnh catch 2
.....
với:
try-block
Chứa code mà ta xác định có thể xảy ra lỗi.
exception-1, exception-2
Khai báo đối tượng bắt lỗi expression.
catch-1, catch-2
Gồm các câu lệnh để xử lý lỗi.
– Câu lệnh lặp foreach dùng để lặp qua tất cả các phần tử trong 1 mảng hay trong 1 tập (collection).
foreach(string item in lstDich.Items)
lstNguon.Items.Add(item);
Như ở ví dụ trên, collection của ta là tập các items của listbox. Cú pháp sẽ là:
foreach (ItemType item in myCollection)
Items là một collection nên khi ta thêm hay remove các item đều phải sử dụng đến collection items.
– Thêm vào: có 2 cách: Add và Insert. Add dùng để thêm 1 item vào nối đuôi danh sách hiện có, còn Insert là bạn sẽ chèn vào 1 vị trí nào đó trong danh sách. Vì vậy, Insert sẽ có 2 tham số truyền vào.
Listbox.Items.Add(“phúc”) : thêm “phúc“ vào danh sách (nối đuôi).
Listbox.Items.Insert(1, “phúc”) : thêm “phúc” vào danh sách ở vị trí thứ 2 (vì danh sách được đánh số từ 0).
– Xoá bỏ: cũng có 2 cách: Remove và RemoveAt. Remove sẽ có đối số truyền vào là 1 chuỗi chỉ tên item còn RemoveAt sẽ có đối số truyền vào là số nguyên int chỉ index của danh sách.
Listbox.Items.Remve(“phuc”);
Listbox.Items.RemoveAt(1);
Để nhận biết 1 item nào được chọn thì ta sử dụng 2 cách là SelectedItems và SelectedIndex. SelectedItem trả về tên (kiểu string) của item mà ta chọn còn SelectedIndex thì trả về 1 số (kiều int) của item mà ta chọn.
Trong ví dụ trên, đầu tiên bạn không chọn thuộc tính Sorted = false (mặc nhiên) cho 2 listbox, và bạn sẽ thấy mỗi lần thêm thì nó sẽ tự động thêm vào cuối danh sách. Sau đó, bạn hãy chọn Sorted = true và hãy nhận xét những thay đổi.
Lưu ý: Trong ví dụ trên, khi biên dịch, trình biên dịch sẽ warning một số lỗi và có đường kẻ xanh loăn quăn ở dưới câu lệch catch nhưng ta không lo vì nó chỉ cảnh báo là biến nex có khai báo nhưng không được sử dụng.
Combo Box tương tự như một trình đơn xổ xuống (popup menu) nó đưa ra cho ta một danh sách các mục và ta chỉ được chọn một trong các mục đó mà thôi. Combox Box có hầu hết các điểm tương đồng với ListBox như các thuộc tính và xử lý sự kiện. Chỉ khác biệt duy nhất là giao diện của Combo Box chỉ cho ta thấy có 1 item duy nhất và đó cũng là item mà ta chọn và số lượng item được chọn chỉ duy nhất có 1 mà thôi.
Các thuộc tính của Combo Box hầu hết đều giống với ListBox. Ở đây tôi chỉ trình 1 thuộc tính khá quan trong của Combo Box, đó là thuộc tính DropDownStyle. Thuộc tính này có 3 giá trị:
– DropDown: Cho 1 popup menu sổ xuống khi ta click chuột vào mũi tên xuống và ta có thể nhập vào textbox một giá trị nào đó (có thể giá trị này chưa có trong danh sách).
– DropDownList: Cũng cho 1 popup menu sổ xuống khi ta click chuột vào mũi tên xuống nhưng ta không thể nhập vào bất cứ giá trị gì ngoài các giá trị có trong danh sách.
– Simple: Nó đơn giản là 1 textbox và 1 Listbox nằm kề liền ở bên dưới. Bạn có thể nhập 1 giá trị nào đó vào trong ô textbox này (nó giống với trường hợp DropDown ở trên) và nếu bạn chọn 1 giá trị trong List ở bên dưới thì giá trị này sẽ được hiển thị lên trên textbox.
Bạn hãy xem giao diện ở dưới đây để nhận ra được sự khác biệt.
Bạn hãy tạo 1 project có tên ComboBoxDemo và thiết kế giao diện nhập mới 1 sinh viên giống như hình dưới. Các thuộc tính và các dữ liệu bạn tự nhập vào sao cho nó giống như hình dưới là được.
Đây chỉ là ví dụ để bạn tự tạo 1 giao diện mà thôi, phần code và phần xử lý các bạn sẽ được học ở phần liên kết với cơ sở dữ liệu, phần ADO .Net.
Trong giao diện window, muốn di chuyển focus từ control này sang control khác ta phải sử dụng phím tab. Thứ tự giữa các control được xác định bằng thuộc tính tabindex.
Sắp đặt thứ tự trong Tab của các controls (Tab Order) trên một form đôi khi rất phiền phức trong VB6. VS.NET cho ta một feature rất tiện dụng để làm việc nầy. Để khởi động feature ấy, ta dùng IDE menu command View | Tab Order. Nó sẽ hiển thị một con số nhỏ ở góc trên trái của mỗi control, cho thấy trị số Tab Index của mỗi control. Bây giờ ta chỉ cần click lên từng control một theo thứ tự mà ta muốn.
Dưới đây là screenshot của một form sau khi user chỉ định Tab Order cho các controls. Muốn ra khỏi Tab Order mode, ta bấm menu command View | Tab Order một lần nữa.
Trong trường hợp có sử dụng các GroupBox thì nó sẽ ưu tiên tính dựa trên groupbox trước. Bạn hãy xem hình dưới đây:
Ví dụ:
Hãy chỉnh sửa lại các tab order cho form thêm mới sinh viên mà ta mới làm ở trên.
VB.NET cho ta một giao diện rất thân thiện và rất tự nhiên trong thiết kế Menu.
Menu được thêm vào form dưới dạng một control. Tuy Menu control nằm trong một mâm components phía dưới, nhưng trong lúc thiết kế, Menu hiện ra trong form y như lúc Runtime và bạn chỉ cần điền vào các menuitems cần thiết. Có hai loại menus: Main Menu (Menu dùng thông thường) và Context Menu (dùng cho Pop-Up).
Bạn hãy kéo biểu tượng menu control trên hộp công cụ và thả vào form, bạn sẽ thấy kết quả như hình dưới:
Trong window form số control mới mà ta chỉ có thể dùng chúng khi chúng đi chung với các control khác trên cùng một form. Chúng được gọi là Provider Controls và có đặc tính là khiến cho các properties mới hiện ra trong các control khác.
Provider Controls không hiển thị trên form lúc ta chạy chương trình. Do đó chúng nằm trong 1 khay riêng là component tray lúc ta thiết kế (hình trên) và Menu là control có đặc điểm này.
Main Menu là Menu căn bản mà bạn thấy nó dính vào cạnh trên của một form. Để dễ giải thích, ta sẽ dùng một thí dụ tạo ra một Editor thật đơn giản bằng VB.NET. Bạn hãy khởi động một Windows Application mới và thêm một Textbox vào trong form chính. Set property MultiLine của Textbox thành True để nó có thể hiển thị nhiều hàng, đồng thời Stretch (kéo dãn ra) cái Textbox cho lớn ra làm nơi ta có thể đánh vào một bài text (nhớ set thuộc tính anchor của textbox để khi bạn zoom lớn form ra thì nó tự động lớn theo).
Kế đó, thêm một Main Menu vào form. Cái menu Designer sẽ kích động và bạn chỉ cần đánh vào chi tiết các menuItems và dùng cửa sổ Properties để set các parameters.
Khi nào bạn click chuột vào control Main Menu trong mâm components là bạn có thể edit các MenuItems. Muốn làm việc với MenuItem nào thì select MenuItem đó. Những chỗ có chữ Type Here là đề nghị cho bạn đánh thêm vào một MenuItem (Type Here nằm phía dưới) , một MenuCommand mới (Type Here nằm bên phải một MenuCommand) hay một MenuSubItem (Type Here nằm bên phải một MenuItem).
Muốn insert một lằn ngang giữa MenuItem Dán và MenuItem Xoá hết, bạn select MenuItem Clear All rồi right click và chọn Insert Separator trong Pop-Up Menu.
Để chỉ định tên cho từng menu item, bạn làm như sau:
Bạn chọn menu và click chuột vào 1 trong những menu item, 1 menu popup sẽ xổ xuống và bạn chọn mục Edit Name như hình bên dưới:
và tên mặc định của các menuitem sẽ hiện thị ra trong dấu ngoặc vuông, bạn click chuột vào hay bấm F2 để sửa lại các tên cho phù hợp.
Dưới đây là bảng các thuộc tính của menu và textbox:
Đối Tượng |
Thuộc Tính |
Giá Trị |
Form |
Name Text |
frmMenuDemo Menu Application Demo |
mainMenu |
Name | default (mainMenu1) |
Menu |
Name Text |
mnuHeThong Hệ Thống |
MenuItem |
Name Text |
mnuItemThoat Thoát |
Menu |
Name Text |
mnuHieuChinh Hiệu Chỉnh |
MenuItem |
Name Text |
mnuItemSaoChep Sao Chép |
MenuItem |
Name Text |
mnuItemDan Dán |
MenuItem |
Name Text |
mnuItemXoa Xoá hết |
TextBox |
Name | txtDemoText |
Muốn chỉ định Shortcut cho một MenuItem, bạn select MenuItem ấy rồi vào cửa sổ Properties để chọn trị số cho property Shortcut. Tương tự như vậy cho property Checked để làm một checkmark hiện ra bên trái (phía trước) Text của MenuItem.
Thêm vào các dòng code sau đây cho chương trình. Khi doubleClick lên các MenuItem, cửa sổ mã nguồn sẽ mở ra cho bạn đánh code vào:
private void mnuItemSaoChep_Click(object sender, System.EventArgs e)
{
txtDemoText.Copy();
}
private void mnuItemDan_Click(object sender, System.EventArgs e)
{
txtDemoText.Paste();
}
private void mnuItemXoa_Click(object sender, System.EventArgs e)
{
txtDemoText.Text = “”;
}
private void mnuItemThoat_Click(object sender, System.EventArgs e)
{
this.Close();
}
Giải thích:
Các phương thức Copy(), Paste() là những phương thức có trong thư viện của .Net nên bạn chỉ cần mang ra sử dụng mà thôi.
txtDemoText.Copy() sẽ copy đoạn text mà ta chọn (bôi đen và đưa vào Clipboard (vùng nhớ đệm của hệ thống)).
txtDemoText.Paste() tsẽ dán dữ liệu có trong ClipBoardPaste() và đưa nó vào đối tượng textbox.
Ở đây tôi xin nhắc lại là đối tượng this là đối tượng (hay từ khoá) chỉ form hiện hành đang chứa các source code này.
Sau đây là kết quả chạy chương trình:
Context Menu:
Ta dùng Context Menu để Pop-Up một Menu xứng hợp với tình huống đương thời của program khi user right click một control trên form. Trong VB6, Context Menu cũng là một MenuCommand thông thường nhưng ta thiết kế cho nó invisible, để chỉ khi nào ta muốn Pop-Up nó thì nó mới hiển thị.
Trong VB.NET, Context Menu là một control riêng, nhưng ta edit nó cũng giống như Main Menu. Khi đã thêm một control ContextMenu vào form rồi, mỗi lần ta select nó trong mâm components thì Context Menu hiện ra ở cạnh trên của form giống như Main Menu. Lúc Runtime, khi user right click một control có Context Menu thì ContextMenu sẽ hiển thị ở vị trí đó.
Bạn hãy doubleClick control ContextMenu trong hộp đồ nghề để thêm một Context Menu vào trong form. Kế đó set up các MenuItem như sau:
và để thay đổi tên của các context menu item, bạn cũng làm giống y như đối với main menu item.
Dưới đây là bảng các thuộc tính của Context menu:
Đối Tượng |
Thuộc Tính |
Giá Trị |
contextMenu |
Name | default (contextMenu1) |
MenuContextItem |
Name Text |
mnucxtTrangDen Nền Trắng – Chữ Đen |
MenuContextItem |
Name Text |
mnucxtXanhTrang Nền Xanh – Chữ Trắng |
Để hiển thị cái Radio button bên trái một MenuItem, bạn phải làm hai chuyện:
Nhớ là ta dùng checkmark khi muốn cho user chọn nhiều thứ cùng một lúc, và dùng Radio button khi muốn cho user chỉ chọn một nhiệm ý mà thôi, tức là mutually exclusive. Tuy nhiên, khác với khi edit một nhóm Radio buttons trong một container trên form, VB.NET không cản trở ta cho hai Radio buttons trong một menu cùng hiện ra. Do đó, bạn phải tự quản lý vấn đề mutually exclusive trong code của mình.
Và dưới đây là code của chương trình:
private void mnuctxXanhTrang_Click(object sender, System.EventArgs e)
{
txtDemoText.BackColor = Color.Blue;
txtDemoText.ForeColor = Color.White;
mnuctxTrangDen.Checked = false;
mnuctxXanhTrang.Checked = true;
}
private void mnuctxTrangDen_Click(object sender, System.EventArgs e)
{
txtDemoText.BackColor = Color.White;
txtDemoText.ForeColor = Color.Black;
mnuctxTrangDen.Checked = true;
mnuctxXanhTrang.Checked = false;
}
Giải thích:
Các đoạn code ở phần này đề là những đoạn code mà ta đã từng làm ở các bài tập trước nên tôi không nói thêm ở đây.
mnuctxTrangDen.Checked = false;
mnuctxXanhTrang.Checked = true;
Hai đoạn code trên là dùng để chỉ là Context menu mà ta tạo có 1 dấu tròn ở đầu dòng hay không. Checked = True là có và ngược lại là không.
Để chỉ định ContextMenu1 Pop-up khi user right click Textbox1, bạn chỉ cần set property ContextMenu của Textbox1 thành ContextMenu1 (chọn nó trong cái dropdown list của comboxbox của property ContextMenu trong cửa sổ Properties).
Khi bạn chạy chương trình và right click Textbox1, ContextMenu1 sẽ hiển thị như dưới đây:
Như đã trình bày ở phần Visual Studio .Net, thanh công cụ là tập hợp các nút bấm mang biểu tượng chứa trong một thanh thườn đặt dưới menu. Các nút này đảm nhận các chức năng thông dụng trong cấu trúc menu của VS.Net. Thanh công cụ rất hữu ích, thay vì phải lần lượt chọn qua menu và menu con, ta nhấn một nút bấm nào đó trong thanh công cụ để gọi một chức năng tương tự trên menu.
Bạn hãy khởi động một Project mới và đặt một Toolbar vào form chính bằng cách doubleclick lên Toolbar icon trong Toolbox. Một Toolbar sẽ hiện ra nằm ngay dưới tiêu đề của form. Kế đó rightclick lên Toolbar ấy và chọn Properties để edit property Buttons Collection bằng cách click lên chữ (Collection) rồi click ba dấu chấm phía bên phải để hiển thị ToolbarButton Collection Editor.
Bạn hãy Add vào Toolbar ba buttons với những đặc tính sau:
Khi chạy thử chương trình ta sẽ thấy hình giống như dưới đây:
Với các thuộc tính sau:
Đối Tượng |
Thuộc Tính |
Giá Trị |
Form |
Name Text |
frmToolbarDemo Toolbar Demo Application |
Toolbar |
Name | tlbDemo |
Toolbar Button |
Name Text Style |
tlbButtonĐóng Đóng PushButton |
Toolbar Button |
Name Text Style |
Default |
Seperator
Name
Text
StyletlbButtonMauNen
Màu Nền
DropdownButton
Bây giờ ta sẽ viết code để xử lý Event Click của Toolbar. Chỉ có một hàm xử lý sự kiện Toolbar, tlbDemo_ButtonClick, được dùng cho tất cả các buttons. Ta phân biệt Button nào dựa vào Index của nó, giống giống như một array of buttons trong VB6. Nếu user click button thứ nhất ta sẽ có tlbDemo.Buttons.IndexOf(e.Button) bằng 0, lúc ấy ta sẽ Close form chính.
private void tlbDemo_ButtonClick(object sender,
System.Windows.Forms.ToolBarButtonClickEventArgs e)
{
switch(tlbDemo.Buttons.IndexOf(e.Button))
{
case 0:
this.Close();
break;
case 2:
MessageBox.Show(“Bạn click vào Button Màu Nền”);
break;
};
}
Tiếp theo, để tạo các mục cho button thứ 3 khi bạn click vào mũi tên trỏ xuống.
Hãy đưa vào trong form 1 ContextMenu và 1 TextBox với các thuộc tính sau:
Đối Tượng |
Thuộc Tính |
Giá Trị |
contextMenu |
Name | default (contextMenu1) |
MenuContextItem |
Name Text |
mnucxtTrangDen Trắng – Đen |
MenuContextItem |
Name Text |
mnucxtXanhTrang Xanh – Trắng |
TextBox |
Name Text |
txtTextDemo Demo Text |
và gán nó vào properties DropdownMenu của button thứ 3 (button màu nền).
và sau đó bạn nhập source code vào cho các Context Menu Item như sau (Bạn hãy Click chuột vào ContextMenu, chọn từng menu Item vào double Click chuột vào thì nó sẽ tự chuyển sang khung source code và sinh ra 1 hàm xử lý cho menu item mà bạn vừa Click chuột vào.
private void mnuctxTrangDen_Click(object sender, System.EventArgs e)
{
txtTextDemo.BackColor = Color.White;
txtTextDemo.ForeColor = Color.Black;
}
private void mnuctxXanhTrang_Click(object sender, System.EventArgs e)
{
txtTextDemo.BackColor = Color.Blue;
txtTextDemo.ForeColor = Color.White;
}
Đoạn code này ta cũng đã làm ở trên rồi nên không có gì để giải thích hết.
Khi chạy chương trình, nếu bạn click cái thanh có dấu tam giác đen nằm bên phải button thứ ba, ContextMenu1 sẽ hiện ra để bạn dùng.
Như thế, ta thấy .NET ghép một ContextMenu vào một ToolbarButton để biến nó thành một DropDownMenu. Có điều sau khi user đã chọn một Item trong ContextMenu/DropDownMenu, Text của Item đó không được hiển thị giống như trong một ComboBox. Nếu như bạn muốn nó giống như một Combo Box thì phải tự làm lấy bằng cách code thêm 1 đoạn code như dưới đây (phần in đậm):
private void mnuctxTrangDen_Click(object sender, System.EventArgs e)
{
txtTextDemo.BackColor = Color.White;
txtTextDemo.ForeColor = Color.Black;
tlbButtonMauNen.Text = mnuctxTrangDen.Text;
}
private void mnuctxXanhTrang_Click(object sender, System.EventArgs e)
{
txtTextDemo.BackColor = Color.Blue;
txtTextDemo.ForeColor = Color.White;
tlbButtonMauNen.Text = mnuctxXanhTrang.Text;
}
phần in đậm của source code trên có nghĩa là bạn sẽ lấy tên của Context Menu Item tương ứng gán vào nhãn của Toolbar Button thứ 3 là button màu nền.
Một ứng dụng MDI (Multiple-document interface) là 1 ứng dụng cho phép bạn hiển thị cùng một lúc nhiều cửa sổ (document) khác nhau và cùng nằm trong 1 cửa sổ (document).
– Cửa sổ mà nó chứa các cửa sổ khác được gọi là cửa sổ cha (parent form), còn các cửa sổ mà nằm trong cửa sổ cha thì gọi là cửa sổ con (child form).
– Ta không thể di chuyển cửa sổ con ra khỏi cửa sổ cha.
– Khi ta đóng cửa sổ cha thì các cửa sổ con cũng sẽ phải đóng theo.
Để tạo 1 MDI application, trước hết ta tạo 1 main form (parent form).
Muốn cho 1 form bình thường thành parent form, bạn chỉ cần thay đổi thuộc tính IsMdiContainer = true là form của bạn sẽ giống như bị lõm xuống và từ lúc này, form này có thể chứa các form khác đựơc.
Sau đó, bạn tạo thêm 1 form nữa để làm template cho các child form. Và để hiển thị 1 child form trên parent form, bạn phải viết cho nó đoạn code sau:
Form2 newMDIChild = new Form2();
// Set the Parent Form of the Child window.
newMDIChild.MDIParent = this;
// Display the new form.
newMDIChild.Show();
Đầu tiên, bạn phải tạo 1 instant của child form (form2)
Kế đến, bạn cho biết cha của form này là ai. Ở đoạn code trên bạn gán newMdiChild.MDIParent = this có nghĩa là cha của form này chính là form mà bạn đang nhập vào source code này.
Và sau cùng là bạn cho show form này lên.
Viết ứng dụng soạn thảo văn bản đơn giản sử dụng giao diện MDI.
Các thuộc tính:
Form | Name Text IsMdiContainer |
frmMain Chương Trình Soạn Thảo Văn Bản True |
Form | Name Text IsMdiContainer |
frmEditor Untitled False |
Menu | Name | Default (MainMenu1) |
MenuItem | Name Text |
mnuItemTao Tạo Mới |
MenuItem | Name Text |
mnuItemMo Mở Tập Tin |
MenuItem | Name Text |
mnuItemThoat Thoát |
RichTextBox | Name | txtEditor |
Ở đây tôi xin nói thêm về RichTextBox.
RichTextBox control dùng để hiển thị text, nhập text vào và xử lý text với các định dạng. RichTextBox nó gần giống nhữ Textbox, nó có hầu hết các thuộc tính cũng nhữ những chức năng của TextBox, và nó còn có thể hiển thị font, màu và các liên kết. Nó có thể load text từ file vào, chèn hình ảnh từ 1 tập tin vào, nó có thể undo và redo các thao tác edit.
Và dưới đây là source code:
private void New()
{
frmEditor newEditor = new frmEditor();
newEditor.MdiParent = this;
newEditor.Show();
}
private void mnuItemTao_Click(object sender, System.EventArgs e)
{
New();
}
Ví dụ này chủ yếu chỉ để cho các bạn làm quen với một ứng dụng MDI nên ta chưa có làm 1 ứng dụng hoàn chỉnh.
Viết 1 chương trình soạn thảo văn bản (như trên) nhưng với đầy đủ các chức năng.