Control và layout

Cửa sổ trống chưa làm được gì. Muốn nhập tên sản phẩm cần một ô nhập, muốn lưu cần một nút. Bài này thêm các thành phần đó vào form và để WinForms tự xếp chúng.

Khái niệm

🔘 Control: object hiển thị trên cửa sổ, như nhãn Label, ô nhập TextBox, nút bấm Button.

📥 Controls: property chứa danh sách control con của một form hoặc một panel.

Control chỉ hiện ra khi đã được thêm vào danh sách này.

🪜 FlowLayoutPanel: control chứa các control khác và tự xếp chúng nối tiếp nhau, không cần đặt toạ độ.

Form chứa panel, panel chứa nhãn và nút. Đây là composition như bài Composition của khoá OOP: object lớn được ghép từ các object nhỏ.

Ví dụ

Giữ nguyên class Program, thay class MainForm bằng:

class MainForm : Form
{
    public MainForm()
    {
        Text = "Thêm sản phẩm";
        Width = 320;
        Height = 220;

        var panel = new FlowLayoutPanel
        {
            Dock = DockStyle.Fill,
            FlowDirection = FlowDirection.TopDown,
            Padding = new Padding(12)
        };

        var nameLabel = new Label
        {
            Text = "Tên sản phẩm",
            AutoSize = true
        };
        var nameBox = new TextBox { Width = 250 };
        var saveButton = new Button { Text = "Lưu" };

        panel.Controls.Add(nameLabel);
        panel.Controls.Add(nameBox);
        panel.Controls.Add(saveButton);
        Controls.Add(panel);
    }
}

• Label hiện chữ, TextBox cho gõ chữ, Button là nút bấm.
• FlowDirection.TopDown xếp từ trên xuống. Thứ tự hiện ra là thứ tự Add.
• Dock = DockStyle.Fill cho panel phủ kín form, kéo giãn cửa sổ thì panel giãn theo.
• Padding chừa khoảng trống 12 điểm ảnh quanh mép panel.
• Dòng cuối Controls.Add(panel) gắn panel vào form.

Thử ngay

Xoá dòng cuối Controls.Add(panel); rồi chạy lại.

Đoán trước khi chạy: chương trình báo lỗi, hay cửa sổ vẫn mở nhưng thiếu gì đó?

Không có lỗi. Cửa sổ "Thêm sản phẩm" mở ra nhưng trống trơn.

Lỗi hay gặp

Chữ của Label bị cắt. Label mặc định rộng cố định 100 điểm ảnh, chữ dài hơn thế bị cắt mất.

// SAI — chỉ thấy một phần chữ
var priceLabel = new Label
{
    Text = "Giá bán (VNĐ, chưa gồm VAT)"
};

// ĐÚNG — nhãn tự rộng theo chữ
var priceLabel = new Label
{
    Text = "Giá bán (VNĐ, chưa gồm VAT)",
    AutoSize = true
};

Tóm tắt

• Control là object: Label, TextBox, Button, tạo bằng new.
• Control chỉ hiện khi được Add vào Controls của form hoặc panel.
• FlowLayoutPanel tự xếp control theo thứ tự Add.
• Dock = DockStyle.Fill cho control phủ kín vùng chứa nó.
• Label nên có AutoSize = true để không bị cắt chữ.