Thay đổi giao diện ứng dụng theo ý muốn

Giờ thì vào chủ đề chính:

  • Để bắt đầu thì mình sẽ tạo 1 project mới của Windows Forms Application nếu bạn muốn thì có thể làm trực tiếp vào trong 1 project đã tạo sẵn của bạn!!
  • Sau khi đã tạo xong, tại cửa sổ Properties, ta sửa thuộc tính FromBorderStyle thành None
    ​​​​​​►
  • Sau bước trên, bạn sẽ thu được cái 1 ô vuông đơn điệu, nhìn max tù luôn,… vậy bây giờ bắt tay vào tuỳ biến thui..!!
  • Giờ chúng ta sẽ kéo và thả những đối tượng cần thiết cho cái form của mình
    • Danh sách gồm:
      • 4 cái panel
      • 1 cái label
      • 2 cái button
  • Giờ thì đặt tên và đặt các thuộc tính cho chúng. À còn 1 điều nữa, ta sẽ phải đặt cho cái form 1 kích cỡ nhất định,… mình sẽ đặt 640px * 480px, bạn hoàn toàn có thể đặt các kích cỡ khác cho ứng dụng tuỳ vào mục đích của bạn!!

    Đầu tiên bạn chọn:

  •           Chọn panel1
      • Mình đặt lại tên cho nó thành border_top : (Name) = border_top
      • Đặt size cho nó là 640, 30 và Location là 0,0
      • Đặt Dock thành Top và gán Locked = True
    • Chọn panel2
      • Đặt tên là border_left : (Name) = border_left
      • Đạt size là 5, 450 và Location là 0, 30
      • Đặt Dock là Left và gắn Locked = True
    • Chọn panel3
      • Đặt tên là border_right : (Name) = border_right
      • Đạt size là 5, 450 và Location là 635, 30
      • Đặt Dock là Right và gắn Locked = True
    • Chọn panel4
      • Đặt tên là border_bottom : (Name) = border_bottom
      • Đạt size là 630, 5 và Location là 5, 475
      • Đặt Dock là Bottom và gắn Locked = True
  • Như vậy là đã tạo xong cái viền bao, Ctrl + F5 để nghía qua cái Form nào.. !!!
         
  • Giờ là đến cái tiêu đề và các phím điều khiển:
    • Chọn label1
      • Mình đổi tên nó thành title đề dễ nhớ: (Name) = title
      • Đặt Location 0,0
      • Đặt Font.Size = 26 với Font.Unit = Pixel
      • Sau đó khoá nó lại: Locked = True
    • Chọn button1
      • Đổi tên thành b_close : (Name) = b_close
      • Đặt size là 30,30 và Location: 610,0
      • Đặt FlatStyle = Flat
      • Đặt FlatAppearance.BorderSize = 0
      • Thêm chữ X vào Text cho dễ nhìn :3
      • Đặt Font.Unit = Pixel và Font.Size = 18
      • Locked = True
    • Chọn button2
      • Đổi tên thành b_minisize: (Name) = b_minisize
      • Đặt size là 30,30 và Location:580,0
      • Đặt FlatStyle = Flat
      • Đặt FlatAppearance.BorderSize = 0
      • Thêm dấu _ vào Text
      • Đặt Font.Unit = Pixel và Font.Size = 18
      • Locked = True
    • Ctrl + F5 và đây là thành quả ban đầu…

      Quá đẹp luôn.

    • Tiếc là không move cửa sổ được, không tắt hay thu nhỏ khi nhấn nút được,…
  • Vậy nên giờ ta cần bắt các sự kiện và xử lí để cái form mới này có được các chức năng đúng chuẩn của 1 cửa sổ!!
    • Mở tab Event tại cửa số Properties
    • Chọn b_close
      • Tại Action.Click, ta tạo phương thức và bắt sự kiện cho việc click chuột
      • Bên trong phương thức mới được khởi tạo, thêm hàm
        • 
          private void b_close_Click(object sender, EventArgs e)
          {
           this.Close();
          }
          
    • Chọn b_minisize
      • Tại Action.Click, ta tạo phương thức và bắt sự kiện cho việc click chuột
      • Bên trong phương thức mới được khởi tạo, thêm hàm
        • 
          private void b_minisize_Click(object sender, EventArgs e)
          {
           this.WindowState = FormWindowState.Minimized;
          }
          
  • Tiếp. Theo mình thì phần này là phần quan trọng nhất trong bài, thiết lập khả năng kéo thả cho của sổ.
    • Chọn border_top ta lần lượt thêm các sự kiện MouseDown, MouseMove và MouseUp
    • Tiếp theo ta nhấn F7 hoặc mở tab Form1.cs lên:
      • Ta thêm vào class Form1 các thuộc tính
        • 
          private bool keoTha = false;
          private Point mouseStart = new Point(0, 0);
          
      • Giờ đến xử lí cá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 dùng nhấn nút nà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 dùng nhấn nút nào. 
           {
            this.keoTha = false;
           }
          }
          
  • Bingo!!! Vậy là xong rồi đó, giờ thì nhấn Ctrl + F5 để thưởng thức thành quả thôi.

Đọc xong bài viết này, giờ các bạn đã hoàn toàn có thể tự custom lại giao diện thay vì sử dụng 6 loại giao diện sẵn có và không được thẩm mỹ của bác Visual Studio. Nếu các bạn có gì thắc mắc vui lòng comment ở dưới hoặc pm trực tiếp với mình qua facebook của mình

About The Author

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
dinh Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
dinh
Guest
dinh

hay