Aẩn các phương thức tính toán trong sumary visual năm 2024

Ở phần trước, mình có đưa ra 1 ví dụ. Trong đó, mình làm giao diện bằng công cụ thiết kế trực quan của visual studio (kéo thả các control trên cửa sổ design). Hôm nay, mình sẽ trình bày 1 tí về việc làm lại giao diện này nhưng không dùng công cụ thiết kế trực quan của visual studio nữa. Mà mình sẽ code trực tiếp bằng C#. Nếu bạn nào đã từng code trực tiếp để thiết kế giao diện bên Windows Form thì sẽ dễ dàng code trực tiếp bên WPF.

Đây còn là phương pháp để sinh Control khi đang chạy chương trình (run-time).

1. Cách tạo giao diện bằng code C#

Khi tạo 1 form mới bằng visual studio, code C# sẽ được tự sinh trong file code-behind như sau:

namespace DesignFormByCode

{

///

public partial class Window1 : Window

{

public Window1()

{

InitializeComponent();

}

}

}

Ghi chú: mình đặt tên project là DesignFormByCode nên nó đặt thành namespace luôn. Và visual studio cũng đặt tên mặc định cho form mới là Window1 trùng với tên file.

Window1( ) chính là phương thức thiết lập của lớp Window1. Và theo định nghĩa thì phương thức thiết lập là phương thức tự động gọi khi đối tượng được tạo. Vậy code giao diện của mình sẽ được ở phương thức này là hợp lý nhất và sẽ viết sau dòng InitializeComponent();

1. Cách tạo 1 control trong form

B1. Khai báo control (để control đó có thể dùng cho toàn form thì khai báo trong lớp form.)

B2. Cấp phát control

B3. Cài đặt các thông số control (dài, rộng, lề…)

B4. Sau đó gán control đó cho thuộc tính Content của form

– Ví dụ: tạo 1 button

namespace DesignFormByCode

{

///

public partial class Window1 : Window

{

Button button1; //khai báo

public Window1()

{

InitializeComponent();

button1 = new Button(); //cấp phát

button1.Content = “Nút”; //cài nội dung (text)

this.Content = button1; //gán button1 vào form

}

}

}

Chạy thử ta được :

Để Control có vị trí và độ dài, rộng theo mong muốn, ta phải cài đặt các thuộc tính của Control đó. Cách đơn giản là cài đặt trực tiếp.

Ví dụ như ta muốn quy định độ rộng, ta gán vào thuộc tính Width.

namespace Buttondongian

{

///

public partial class Window1 : Window

{

Button button1;

public Window1()

{

InitializeComponent();

button1 = new Button();

button1.Content = “Nút”;

button1.Width = 50; //rộng 50

this.Content = button1;

}

}

}

Chạy thử ta được:

Dù resize form nhưng Button vẫn giữ nguyên độ rộng là 50.

Để chỉnh vị trí, chúng ta chỉnh trên thuộc tính Margin. Cách gán vào Margin:

Ta không thể thực hiện lệnh gán như sau để quy định button1 cách lề trái 50.

button1.Margin.Left = 50; //Lỗi

Mà thay vào đó chúng ta dùng 1 đối tượng Thickness. Thickness có các thuộc tính: Left, Right, Top, Bottom để canh lề.

Thickness thick = new Thickness();

thick.Left = 50;

button1.Margin = thick;

Ta thử chạy trên đoạn code:

namespace Buttondongian

{

///

public partial class Window1 : Window

{

Button button1;

public Window1()

{

InitializeComponent();

button1 = new Button();

button1.Content = “Nút”;

Thickness thick = new Thickness();

thick.Left = 50;

button1.Margin = thick;

this.Content = button1;

}

}

}

Và cho dù resize form thì:

Chúng ta cũng có thể tận dụng các phương thức thiết lập của lớp Thickness để code gọn hơn như sau:

namespace Buttondongian

{

///

public partial class Window1 : Window

{

Button button1;

public Window1()

{

InitializeComponent();

button1 = new Button();

button1.Content = “Nút”;

button1.Margin = new Thickness(50,0,0,0);

this.Content = button1;

}

}

}

Ngoài ra để chọn chính xác các anchor, chúng ta có thể chỉnh trong thuộc tính VerticalAlignment và HorizontalAlignment.

2. Thủ thuật cài event đơn giản (snippet)

B1. Truy xuất event

B2. Toán tử +=

B3. Nhấn Tab 2 lần

Ví dụ: Nhấp 2 lần vào 1 button thì đổi màu button đó.

Chúng ta sử dụng ví dụ trước:

namespace Buttondongian

{

///

public partial class Window1 :Window

{

Button button1;

public Window1()

{

InitializeComponent();

button1 = new Button();

button1.Content = “Nút”;

this.Content = button1;

}

}

}

Sau đó truy xuất event nhấp chuột 2 lần là MouseDoubleClick của button1 như hình sau.

Sau đó += :

Ở đây nhấn Tab, sẽ có thêm đoạn code được chèn vào như sau:

Phần code được bôi đen đó chính là tên hàm mà ta muốn event xảy ra sẽ gọi. Nếu hàm ta muốn gán đã định nghĩa từ trước rồi thì ta sửa lại tên hàm cho đúng. Còn chưa có thì Tab thêm lần nữa, môi trường sẽ tự sinh đoạn mẫu hàm bên dưới

void button1_MouseDoubleClick(object sender, MouseButtonEventArgs e)

{

throw new NotImplementedException();

}

Lúc này, ta xóa bỏ đoạn code throw bên trong hàm và viết tiếp code xử lý . Ví dụ ta muốn button vừa nhấn đó đổi thành màu hồng thì:

void button1_MouseDoubleClick(object sender, MouseButtonEventArgs e)

{

((Button)sender).Background = Brushes.Pink;

}

Ở đoạn code trên việc ép kiểu Button cho sender để hàm mang ý nghĩa tổng quát hơn thay vì chỉ cần dùng button1 gọi là đủ.