Tuỳ biến giao diện cho ứng dụng viết bằng C#: Windows Form Application

Như tiêu đề của bài viết, trong lần gõ phím này mình sẽ hướng dẫn các bạn tuỳ biến lại giao diện của ứng dụng khi viết bằng Visual C#: Windows Forms Application

Vì mình cũng chỉ mới bắt đầu học thôi nên có thể cách tuỳ biến của mình chưa được tốt cho lắm, vậy nên nếu bạn nào thấy có cách khác hay hơn, đơn giản hơn thì chia sẻ với mình và mọi người nhé!!

NOTE: Bài viết này mình chỉ hướng dẫn tuỳ chỉnh giao diện với ứng dụng non-resize, nghĩa là ứng dụng của bạn sẽ chỉ có 1 kích cỡ duy nhất, dù vậy nhưng sau bài này, bạn hoàn toàn có thể tự thêm được chức năng resize vào ứng dụng của mình!!

Giờ thì vào chủ đề chính – tuỳ biến giao diện của ứng dụng:

Để bắt đầu thì mình sẽ tạo 1 project mới của Windows Forms Application nếu bạn muốn thì có thể làm trực tiếp vào trong 1 project đã tạo sẵn của bạn!!
Sau khi đã tạo xong, tại cửa sổ Properties, ta sửa thuộc tính FromBorderStyle thành None

►
Sau bước trên, bạn sẽ thu được cái 1 ô vuông đơn điệu, nhìn max tù luôn,… vậy bây giờ bắt tay vào tuỳ biến thui..!!
Giờ chúng ta sẽ kéo và thả những đối tượng cần thiết cho cái form của mình
- Danh sách gồm:
  - 4 cái panel
  - 1 cái label
  - 2 cái button
Giờ thì đặt tên và đặt các thuộc tính cho chúng. À còn 1 điều nữa, ta sẽ phải đặt cho cái form 1 kích cỡ nhất định,… mình sẽ đặt 640px * 480px, bạn hoàn toàn có thể đặt các kích cỡ khác cho ứng dụng tuỳ vào mục đích của bạn!!
Giờ thì đến phần tuỳ chỉnh cho cái form, hãy vận dụng khả năng sáng tạo nên cao nhất nhé,… mình thì thuộc loại người "mù thẩm mỹ" nên toàn để BackColor = Black và ForeColor = White
- Chọn panel1
  - Mình đặt lại tên cho nó thành border_top : (Name) = border_top
  - Đặt size cho nó là 640, 30 và Location là 0,0
  - Đặt Dock thành Top và gán Locked = True
- Chọn panel2
  - Đặt tên là border_left : (Name) = border_left
  - Đạt size là 5, 450 và Location là 0, 30
  - Đặt Dock là Left và gắn Locked = True
- Chọn panel3
  - Đặt tên là border_right : (Name) = border_right
  - Đạt size là 5, 450 và Location là 635, 30
  - Đặt Dock là Right và gắn Locked = True
- Chọn panel4
  - Đặt tên là border_bottom : (Name) = border_bottom
  - Đạt size là 630, 5 và Location là 5, 475
  - Đặt Dock là Bottom và gắn Locked = True
Như vậy là đã tạo xong cái viền bao, Ctrl + F5 để nghía qua cái Form nào.. !!!

Giờ là đến cái tiêu đề và các phím điều khiển:
- Chọn label1
  - Mình đổi tên nó thành title đề dễ nhớ: (Name) = title
  - Đặt Location 0,0
  - Đặt Font.Size = 26 với Font.Unit = Pixel
  - Sau đó khoá nó lại: Locked = True
- Chọn button1
  - Đổi tên thành b_close : (Name) = b_close
  - Đặt size là 30,30 và Location: 610,0
  - Đặt FlatStyle = Flat
  - Đặt FlatAppearance.BorderSize = 0
  - Thêm chữ X vào Text cho dễ nhìn :3
  - Đặt Font.Unit = Pixel và Font.Size = 18
  - Locked = True
- Chọn button2
  - Đổi tên thành b_minisize: (Name) = b_minisize
  - Đặt size là 30,30 và Location:580,0
  - Đặt FlatStyle = Flat
  - Đặt FlatAppearance.BorderSize = 0
  - Thêm dấu _ vào Text
  - Đặt Font.Unit = Pixel và Font.Size = 18
  - Locked = True
- Ctrl + F5 và đây là thành quả ban đầu…
  
  Form custom
- Tiếc là không move cửa sổ được, không tắt hay thu nhỏ khi nhấn nút được,…
Vậy nên giờ ta cần bắt các sự kiện và xử lí để cái form mới này có được các chức năng đúng chuẩn của 1 cửa sổ!!
- Mở tab Event tại cửa số Properties
- Chọn b_close
  - Tại Action.Click, ta tạo phương thức và bắt sự kiện cho việc click chuột
  - Bên trong phương thức mới được khởi tạo, thêm hàm
    - private void b_close_Click(object sender, EventArgs e) { this.Close(); }
- Chọn b_minisize
  - Tại Action.Click, ta tạo phương thức và bắt sự kiện cho việc click chuột
  - Bên trong phương thức mới được khởi tạo, thêm hàm
    - private void b_minisize_Click(object sender, EventArgs e) { this.WindowState = FormWindowState.Minimized; }

Tiếp. Theo mình thì phần này là phần quan trọng nhất trong bài, thiết lập khả năng kéo thả cho của sổ.

Chọn border_top ta lần lượt thêm các sự kiện MouseDown, MouseMove và MouseUp

Tiếp theo ta nhấn F7 hoặc mở tab Form1.cs lên:

Ta thêm vào class Form1 các thuộc tính


private bool keoTha = false;
private Point mouseStart = new Point(0, 0);

Giờ đến xử lí các phương thức:

border_top_MouseDown


private void border_top_MouseDown(object sender, MouseEventArgs e)
{
 if (e.Button == MouseButtons.Left) // Kiểm tra xem người dùng nhấn nút nào. 
 {
  this.keoTha = true;
  this.mouseStart = e.Location;
 }
}

border_top_MouseMove


private void border_top_MouseMove(object sender, MouseEventArgs e)
{
 if (this.keoTha)
 {
  Point p = new Point(e.X + this.Location.X, e.Y + this.Location.Y);
  Point location = new Point(p.X - this.mouseStart.X, p.Y - this.mouseStart.Y);
  this.Location = location;
 }
}

border_top_MouseUp


private void border_top_MouseUp(object sender, MouseEventArgs e)
{
 if (e.Button == MouseButtons.Left) // Kiểm tra xem người dùng nhấn nút nào. 
 {
  this.keoTha = false;
 }
}

Bingo!!! Vậy là xong rồi đó, giờ thì nhấn Ctrl + F5 để thưởng thức thành quả thôi.

Đọc xong bài viết này, giờ các bạn đã hoàn toàn có thể tự custom lại giao diện thay vì sử dụng 6 loại giao diện sẵn có và không được thẩm mỹ của bác Visual Studio. Nếu các bạn có gì thắc mắc vui lòng comment ở dưới hoặc pm trực tiếp với mình qua facebook của mình!!

Pages