[WindowForm] Customize Form - Tùy chỉnh form, tạo form có hình dạng bất kỳ

Bạn thấy nhiều phần mềm có những form có hình dạng rất lạ (không phải hình chữ nhật, có border thông thường). Bạn hoàn toàn có thể tạo những form mang hình dạng đặc biệt tùy ý một cách đơn giản.

Như Photoshop chẳng hạn

Sau đây tôi sẽ hướng dẫn các bạn cách tạo 1 form tùy ý và các thao tác liên quan.

1. Tạo form với hình dạng tùy ý

Thực chất việc này là đặt 1 hình ảnh làm nền cho form rồi cho những phần còn lại "biến mất".

- Đầu tiên bạn thiết kế 1 cái hình ảnh làm nền cho form. Những phần không cần thiết thì bạn nên để trong suốt, rồi xuất ra ảnh .PNG

- Tiếp theo đặt "BackColor" của form là White, "BackgroundImage" là hình ảnh vừa tạo, FormBorderStyle là None

- Đây là phần quan trọng nhất: Cuộn xuống chọn "TransparencyKey" là White => Nó sẽ tìm tất cả phần nào của background form màu trắng để làm trong suốt phần đó. 

Cách này vô cùng đơn giản, để có thể tạo được 1 form tùy ý. Chính vì thế mà nó có nhiều chỗ không trong suốt cho lắm, đặc biệt là những đường giao nhau giữa 2 màu, đoạn đường chéo... Những điểm này khá nhỏ vẫn có thể chấp nhận được. Nếu bạn muốn có nó một cách hoàn hảo + opacity của từng phần trong form thì phải dùng đến phần xử lý đồ họa.

2. Di chuyển cho form tùy chỉnh

Với 1 form đã tạo được như trên vấn đề là khi ta loại bỏ border của form thì làm sao để di chuyển form đây??? Chỉ còn cách code!!!  :)

Việc code còn đem lại cho ta những tùy chọn về di chuyển form do ta tự quyết định: chẳng hạn có cho form "chui ra phía ngoài màn hình" không hoặc là bị bó hẹp trong khuôn khổ của màn hình, cho phép người dùng click chuột ở đâu để di chuyển form???

Trong phần global ta khai báo các biến toàn cục như sau:

/// <summary>
/// Di chuyển form
/// </summary>
private bool drag = false;
private Point dragCursor, dragForm;

Quay lại phần thiết kế để double click và thêm 3 sự kiện: MouseDown, MouseMove, MouseUp cho form.

Chỉnh sửa các sự kiện đấy như sau:

private void Form1_MouseDown(object sender, MouseEventArgs e)
{
    drag = true;
    dragCursor = Cursor.Position;
    dragForm = this.Location;
}

private void Form1_MouseMove(object sender, MouseEventArgs e)
{
    int wid = SystemInformation.VirtualScreen.Width;
    int hei = SystemInformation.VirtualScreen.Height;
    if (drag)
    {
        // Phải using System.Drawing;
        Point change = Point.Subtract(Cursor.Position, new Size(dragCursor));
        Point newpos = Point.Add(dragForm, new Size(change));
        // QUyết định có cho form chui ra ngoài màn hình không
        if (newpos.X < 0) newpos.X = 0;
        if (newpos.Y < 0) newpos.Y = 0;
        if (newpos.X + this.Width > wid) newpos.X = wid - this.Width;
        if (newpos.Y + this.Height > hei) newpos.Y = hei - this.Height;
        this.Location = newpos;
    }
}
private void Form1_MouseUp(object sender, MouseEventArgs e)
{
    drag = false;
}

Như vậy hiện tại bạn có thể click vào bất cứ phần nào không trong suốt của form để di chuyển form.

3. Thêm một số phần khác

Khi loại bỏ border thì đồng nghĩa với việc không còn các nút Minimize, Maximize, Exit và box-shadow của form. Vậy ta phải thêm thủ công như sau

Thêm các nút điều khiển

Tự thiết kế hình ảnh cho các nút hoặc đơn giản chỉ là các button thông thường. Sau đó thêm sự kiện click như sau

private void btnMini_Click(object sender, EventArgs e)
{
    this.WindowState = FormWindowState.Minimized;
}

private void btnExit_Click(object sender, EventArgs e)
{
    Application.Exit();
} 

Thêm box shadow cho form 

Chúng ta phải override 1 thủ tục của form như sau:

/// <summary>
///  Drop Shadow cho form
/// </summary>
protected override CreateParams CreateParams
{
    get
    {
        CreateParams cp = base.CreateParams;
        // Bóng đổ
        cp.ClassStyle |= 0x20000;
        // Load các control cùng lúc
        cp.ExStyle |= 0x02000000; // Turn on WS_EX_COMPOSITED
        return cp;
    }
}

Phần load các control 1 lúc có thể áp dụng cho các form khác, form có nhiều control. Chẳng hạn form bạn có rất nhiều control và thường xuyên phải Visible/Invisible chúng lần lượt. Như vậy khi các control hiện lên sẽ bị trễ nhìn rất mất mỹ quan. Khi thêm phần này vào thì các control sẽ hiển thị ra cùng 1 lúc, không có hiện tượng trễ.