Nhắc lại vài nội dung chính đã học được cho tới thời điểm này:
- Tạo được solution
- Tạo và thêm project vào solution
- Viết được hàm Main(), là điểm bắt đầu của chương trình
- Tạo ra được cửa sổ (form) bằng cách viết mã
- Sau khi tạo cửa sổ, bạn đã tạo ra các nút (các điều khiển, control), và gắn nút vào cửa sổ
Bạn đã bao giờ nghe câu “muốn nhanh thì phải từ từ” chưa? Nghe có vẻ vô lý nhưng có lý đấy. Bạn cứ học từng phần, từng phần nhỏ, ghép lại thì sẽ thành một cái lớn. Chứ cứ nóng vội, đi tắt đón đầu thì chỉ rơi vào trạng thái hoang mang, căng thẳng, không thể biết, hiểu và thực hành được cái gì hết, cơ thể sẽ rơi vào trạng thái suy sụp, mất định hướng và bỏ cuộc.
Cứ đọc đi đọc lại nhiều lần, cố gắng hệ thống lại kiến thức để hiểu, rồi thực hành thật nhiều là ổn.
Quay trở lại bài học.
Ở bài học trước, để tạo ra cửa sổ, các nút, bạn phải lập trình rất nhiều, mất nhiều thời gian và khó thực hiện.
Visual Studio và Windows Form có trang bị cho chúng ta một cách làm nhanh hơn, dễ dàng hơn, đó là thiết kế giao diện bằng hình thức kéo-thả, và các thiết lập trực quan.
4.1 Tạo Form bằng công cụ
Để thêm một cửa sổ vào dự án, tại cửa sổ Solution Explorer, chuột phải vào dự án (ví dụ QuanLySach) > chọn Add > chọn New Item > chọn Form (Windows Forms) > đặt tên cho Form ở ô Name (ví dụ MainForm) > bấm nút Add.
Sau khi tạo
được MainForm, bạn sẽ thấy Visual Studio tự động thêm các references cần thiết
khác, như System.Data, System.Xml. Trong dự án xuất hiện thêm các tập tin
MainForm.cs, MainForm.Designer.cs. Bản thiết kế của MainForm xuất hiện ở cửa sổ
bên trái, cho phép bạn bắt đầu thiết kế các thành phần cho cửa sổ.
Chúng ta cùng
tìm hiểu sơ qua mã nguồn của 2 tập tin: MainForm.cs và MainForm.Designer.cs.
[MainForm.cs]
…
namespace QuanLySach
{
public partial class MainForm : Form
{
public MainForm()
{
InitializeComponent();
}
}
}
- Phần using có khai báo để sử dụng khá nhiều thư viện lạ, bạn cũng chưa cần biết nó dùng để làm gì? Cứ để nguyên hoặc xóa những thư viện lạ đi, sau này thiếu thì bổ sung sau. Ví dụ, bạn thử xóa các dòng using mà bạn chưa biết, chỉ để lại:
using System;
using System.Drawing;
using System.Windows.Forms;
Dòng mã:
- namespace QuanLySach { }
Từ khóa namespace (không gian tên) được sử dụng để khai báo một phạm vi, trong đó có chứa các thành phần có liên quan với nhau, và để tránh hiện tượng xung đột tên.
- public partial class MainForm : Form { }
Tạo ra lớp mới, có tên là MainForm. Lớp MainForm kế thừa lớp Form, do vậy MainForm sẽ có tất cả các thuộc tính và phương thức mà lớp Form đang có.
Từ khóa partial để thông báo là lớp MainForm sẽ được định nghĩa ở nhiều nơi khác nhau (ở nhiều tập tin khác nhau). Bạn có thể mở tập tin MainForm.Designer.cs để thấy một phần định nghĩa nữa của lớp MainForm.
Kiểu truy cập của lớp MainForm là public, nghĩa là bạn có thể truy cập và sử dụng tới lớp MainForm từ bên trong và bên ngoài tập tin (có thiết lập tham chiếu).
- public MainForm()
{
InitializeComponent();
}
Hàm khởi tạo, được tự động gọi và thực thi khi bạn khai báo một đối tượng thuộc lớp MainForm. Khởi chạy một số thành phần cơ bản bằng hàm InitializeComponent().
[MainForm.Designer.cs]
Trong Visual Studio tập tin MainForm.Designer.cs hiển thị ở 2 dạng, dạng đồ họa và dạng mã nguồn. Mặc định thì sẽ hiển thị ở kiểu đồ họa (cho phép bạn thiết kế giao diện), ví dụ MainForm.cs[Design] .Để hiển thị ở dạng mã nguồn, bạn bấm chuột phải vào tập tin ở khung Solution Explorer và chọn View Code.
Dạng mã nguồn của [MainForm.Designer.cs]
namespace
QuanLySach
{
partial class MainForm
{
/// <summary>
/// Required
designer variable.
/// </summary>
private
System.ComponentModel.IContainer components = null;
/// <summary>
/// Clean up
any resources being used.
/// </summary>
/// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>
protected override void Dispose(bool
disposing)
{
if
(disposing && (components != null))
{
components.Dispose();
}
base.Dispose(disposing);
}
#region Windows
Form Designer generated code
/// <summary>
/// Required
method for Designer support - do not modify
/// the
contents of this method with the code editor.
/// </summary>
private void
InitializeComponent()
{
this.components
= new System.ComponentModel.Container();
this.AutoScaleMode
= System.Windows.Forms.AutoScaleMode.Font;
this.ClientSize
= new System.Drawing.Size(800, 450);
this.Text = "MainForm";
}
#endregion
}
}
Giải thích một
số dòng mã ở trên:
-
namespace QuanLySach { }
Tên của namespace
là QuanLySach, cùng namespace với mã nguồn trong tập tin MainForm.cs.
- partial class MainForm
{ }
Mã nguồn này là
một phần khác (partial) của lớp MainForm đã được định nghĩa ở trong
MainForm.cs.
- private
System.ComponentModel.IContainer components = null;
Khai báo một
biến có tên là components, kiểu truy cập private, thuộc kiểu System.ComponentModel.IContainer. Thành phần thiết kế của Visual Studio sẽ sử
dụng biến này để lưu trữ thông tin của các phần tử đồ họa, như button, text
box.
- protected override void Dispose(bool disposing)
{
if
(disposing && (components != null))
{
components.Dispose();
}
base.Dispose(disposing);
}
Dispose nghĩa là gỡ bỏ. Phương thức Dispose() được sử
dụng để giải phóng các tài nguyên mà Form có thể đang sử dụng, như bộ nhớ, con
trỏ file. Kiểu truy cập của hàm là protected, không có kiểu trả về (void), đây
là một hàm chồng (override) dựa trên hàm cơ sở là Dispose().
- #region Windows
Form Designer generated code
/// <summary>
/// Required
method for Designer support - do not modify
/// the
contents of this method with the code editor.
/// </summary>
private void
InitializeComponent()
{
// khởi
tạo đối tượng container > quản lý vòng đời của các thành phần
this.components
= new System.ComponentModel.Container();
// tự
động điều chỉnh kích thước các phần tử theo kích thước của font
this.AutoScaleMode
= System.Windows.Forms.AutoScaleMode.Font;
// thiết
lập kích thước của Form
this.ClientSize
= new System.Drawing.Size(800, 450);
// tiêu
đề của Form
this.Text = "MainForm";
}
#endregion
Đây là vùng mã do thành phần thiết kế của Visual Studio tạo ra,
khi bạn thiết kế, thay đổi trên giao diện đồ họa (trên Form) thì mã nguồn sẽ
được sinh ra và lưu vào đây. Bạn không nên trực tiếp thay đổi mã nguồn trong
vùng này.
Bạn có thể thêm các điều khiển vào Form và quan sát mã nguồn sẽ
sinh ra ở trong vùng này.
4.2 Làm quen với thiết kế Form
Để thiết kế Form, chúng ta sẽ sử dụng bộ công cụ Toolbox ở khung
bên trái, màn hình Form ở giữa và cửa sổ thiết lập các thuộc tính (Properties)
bên phía phải.
Bạn sẽ kéo các công cụ từ Toolbox thả vào Form.
Để thiết lập thuộc tính cho thành phần nào thì bấm chuột phải vào
nó và chọn Properties.
Chúng ta sẽ
cùng thiết kế cho form chính của ứng dụng QuanLySach:
- Đặt tiêu đề
cho form là Quan ly sach: chuột phải vào MainForm > chọn Properties >
trong cửa sổ Properties > chọn mục Text > nhập giá trị là Quan ly sach
- Thiết lập
kích thước cho MainForm: chọn mục Size > thiết lập width = 850, height =
510. Đơn vị ngầm hiểu là px.
- Tạo thư mục
Resources trong project để chứa hình ảnh: Chuột phải vào project > chọn Add
> New Folder > nhập tên cho thư mục (Resources)
- Chọn một ảnh
nền bất kỳ, ví dụ: kiểu ảnh: bmp; kích thước (tối thiểu): width: 850px, height:
600px. Chép ảnh nền vào thư mục Resources. Vào mục BackgroundImage > tìm tới
thư mục Resources > chọn hình ảnh. Vào mục BackgroundImageLayout > chọn
Stretch để căng ảnh sao cho phủ kín giao diện.
Chèn thêm
nút Sách
- Vào Toolbox
> kéo button và thả vào MainForm. Vào mục Name, đặt tên là btnBooks.
- Vào mục font: chọn kiểu font là Monotype Corsiva, Size:
17pt; Bold: True. ForeColor: SteelBlue; Text: Sách. Size: 150, 50
Chèn thêm
nút Thoát
- Vào Toolbox
> kéo button và thả vào MainForm. Vào mục Name, đặt tên là btnExit.
- Vào mục font: chọn kiểu font là Monotype Corsiva, Size:
17pt; Bold: True. ForeColor: SteelBlue; Text: Thoát. Size: 150, 50
Chèn
label Tiệm sách cũ Hoa Giấy
- Vào Toolbox
> kéo label và thả vào MainForm. Vào mục Name, đặt tên là lblTiemSach.
- Vào mục font: chọn kiểu font là Monotype Corsiva, Size:
40pt; Bold: True. ForeColor: SteelBlue; BackColor: Transparent. Text: Tiệm sách cũ
Hoa Giấy.
4.3 Bài tập
1. Từ khóa
partial trong dòng mã sau, có ý nghĩa gì?
public partial class MainForm : Form { }
A. MainForm là
lớp kế thừa của Form
B. Lớp MainForm
được định nghĩa ở nhiều nơi
C. Kiểu truy
cập của MainForm
D. Lớp rỗng
2. Dòng mã sau
có ý nghĩa gì?
this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
A. Tự động điều
chỉnh kích thước các phần tử theo kích thước của font
B. Thiết lập
kích thước font
C. Đặt chế độ
kích thước font tự động
D. Dùng font
của hệ thống
3. Trong thiết
kế giao diện Windows Form, thuộc tính ForeColor dùng để:
A. Định dạng
màu nền
B. Định dạng
màu chữ
C. Định dạng độ
trong suốt của nền
D. Định dạng
màu đường viền
4. Viết lại và chạy được các đoạn mã nguồn trong bài viết.
-----
Gợi ý trả lời
1(B), 2(A),
3(B)
