QUY HOẠCH BẾN BÃI VÀ CẮM DÙI CHO Ô ĐIỀU KHIỂN TRONG VB.NET
CHƯƠNG-CAN-CHÍP (SAMIS)

Mới nghe qua, chắc bạn sẽ nổi da gà cho coi, bởi sao giống mấy cái dzụ bảo kê, xã hội đen quá chừng ? Ậy, hổng có chi ầm ĩ cả, tui bắt chước cái kiểu tên phim “Gái nhảy” đó mà, hì! Nói dông nói dài, thôi thì nói thiệt: Chắc bạn cũng như nhiều tín đồ Visual Basic đều đã nghe, kể cả đã xài các thuộc tính cắm dùi (anchor) và chiếm dụng bến bãi (dock) trên một biểu mẫu trên một ứng dụng VB.NET? Sử dụng thuộc tính này, cho phép các ô điều khiển tự điều chỉnh kích thước hoặc vị trí của nó mỗi khi kích thước biểu mẫu thay đổi, mà không cần đến bất cứ đoạn mã nào...

Hình 1: Biểu mẫu cần thiết kế

Hai thuộc tính mới này phải nói là cực kỳ chíp. Bạn thử ngồi lim dim rồi tưởng tượng mà xem: Chúng ta đã tiết kiệm được một lượng lớn thời gian chỉ để viết những đoạn mã vớ vẩn sao cho biểu mẫu của mình nom lúc nào cũng giống nhau về bố cục, bất kể ai đó muốn điều chỉnh kích thước biểu mẫu mỗi khi xài ứng dụng của mình!

Hỡi ôi, cuộc sống không phải lúc nào cũng đầy hoa và... bia bọt, mọi thứ trong VB.NET đâu chỉ đơn giản như vậy? Chỉ cần đặt để một vài thuộc tính mà không cần xài đoạn mã nào hết thôi sao?

Bao nhiêu đấy chất vấn của một người bạn khiến tôi tạm gác bài viết tiếp theo về quả bóng tưng tửng lần trước để vùi cái đầu đinh của mình vào cái dzụ không kém hấp dẫn này.

Tôi đã bắt đầu bằng việc thiết kế biểu mẫu quản lý cộng tác viên e-CHÍP như Hình 1. Rồi hăm hở thử nghiệm các thuộc tính anchor (cắm dùi, tạm dịch) và dock (bến bãi, tạm dịch), nhưng... nó là cái đồ khỉ gió gì vậy? Theo lẽ thường, các ô điều khiển có thể hoặc là nằm đè lên nhau, hoặc là dịch chuyển về phía đối diện với nhau, hoặc nằm lẫn lộn với nhau. Nếu bạn đặt để thuộc tính anchor, thì thuộc tính dock biến mất và ngược lại, nếu bạn đặt để thuộc tính dock thì thuộc tính anchor biến mất. Các ô điều khiển dường như chẳng bao giờ thèm để ý đến những ô điều khiển khác; tất cả chúng hoặc là dính chặt vào một bên mép biểu mẫu, hoặc duy trì một khoảng cách cố định đến những mép biểu mẫu.

Suốt quá trình này, tôi đã quan sát và nhận thấy: các ô điều khiển đều có thể được gom lại thành nhóm, một số ô điều khiển có thể cần được điều chỉnh kích thước theo cùng một cách. Cuối cùng, một ý tưởng điên rồ nảy ra trong não tôi: sử dụng các ô điều khiển Panel để gom các ô điều khiển lại, và phải sử dụng một xíu mã lệnh để đạt hiệu quả mong muốn.

Hình 2: Ba ô điều khiển Panel với thuộc tính BackColor khác nhau.

Hình 3: Biểu mẫu cần thiết kế.

Tuy nhiên, đây mới là ý đồ tôi muốn chát với bạn: Rõ ràng với VB.NET, chúng ta đã dễ dàng hơn so với VB6 trong việc điều chỉnh kích thước các ô điều khiển, nhưng vẫn phải “hối lộ” VB.NET một ít mã lệnh thì mọi việc mới suôn sẻ.

Vì thế, tạm thời ta hãy dẹp việc tạo biểu mẫu trong Hình 1 sang một bên. Trước hết, trên biểu mẫu Form1 (biểu mẫu mặc định mỗi lần bạn tạo mới một dự án kiểu Windows Application) cần thêm ba ô điều khiển Panel (mà ta sẽ điều chỉnh kích thước của chúng theo những cách khác nhau) lần lượt theo Bảng 1 vào biểu mẫu cần thiết kế. Thay đổi thuộc tính BackColor của các ô điều khiển như trong Hình 2 để dễ dàng phân biệt lãnh địa của từng ô điều khiển Panel. Sau khi mần xong giao diện theo yêu cầu khách hàng, ta có thể đặt để thuộc tính này trở lại thành màu mặc định. Như vậy, trên hình này, ta thấy có ba miếng đất dùng quy hoạch bến bãi (đã được cấp “sổ đỏ” hẳn hoi, không có bất cứ tranh chấp nào, vì đã được cắm mốc bằng thuộc tính Dock) theo trình tự từ dưới lên, từ trái qua là: pnlBottom, pnlLeft, và pnlRight. Để trúng phóc ý đồ của tôi, bạn nên phân lô ba bến bãi này theo đúng như thế nhé!

Hình 8: Biểu mẫu khi được điều chỉnh

mà chưa hối lộ đoạn mã nào

Bây giờ, bạn cho ghi lại mọi thứ đã mần lên dĩa, rồi cho chạy thử ứng dụng. Khi biểu mẫu được hiển thị, bạn thử dùng chuột để điều chỉnh kích thước biểu mẫu thì sẽ thấy kích thước các bến bãi được điều chỉnh theo, rất sướng mắt. Nếu đã thấy khoái rồi, ta có thể tiếp tục phần quy hoạch bên trong cho các bến bãi như trong Hình 3.

Chúng ta hãy bắt đầu cắm dùi cho các ô điều khiển bên trong từng miếng đất như sau:

Với bến bãi đầu tiên pnlLeft, chúng ta cần các ô điều khiển trên nó phải duy trì khoảng cách không đổi đến các mép trên, mép trái, và mép phải của pnlLeft, đồng thời cũng được co dãn theo chiều ngang mỗi khi biểu mẫu được co dãn kích thước chiều ngang. Để làm điều này, bạn chọn cùng lúc tất cả các ô điều khiển trên pnlLeft (gồm một ô hình ảnh và một ô văn bản), chọn thuộc tính Anchor trong cửa sổ Properties, và đặt để trị Top, Left, và Right như trong Hình 4.

Lưu ý: Chúng ta chọn trị Bottom cho thuộc tính Anchor vì lẽ không muốn các ô điều khiển dãn ra theo chiều ngang mỗi khi biểu mẫu được điều chỉnh kích thước theo chiều ngang.

Bạn cứ để cho các ô nhãn (label) giữ nguyên thuộc tính cắm dùi mặc nhiên của nó là Top, Left. Có nghĩa là chúng sẽ duy trì khoảng cách không đổi đến các mép trên và mép trái của biểu mẫu hoặc của bến bãi (ô Panel) mà nó cắm dùi.

Với bến bãi thứ hai, pnlRight, bạn cũng mần tương tự như ở trển. Còn bến bãi cuối cùng, pnlBottom, thuộc diện ô dù, có bảo kê, nên cần phải cư xử hơi khác một chút. Ô văn bản “Chú thích:” (bạn nhớ đặt để thuộc tính Multiline thành True dùm) cần được co dãn theo cả chiều ngang lẫn chiều dọc mỗi khi biểu mẫu được co dãn kích thước. Vì thế thuộc tính Anchor của nó phải là Top, Bottom, Left, và Right như trong Hình 5.

Với ô nhãn “Chú thích:”, để cho nó luôn dính vào mép trái của bến bãi pnlBottom, cũng như luôn chiếm vị trí có khoảng cách đến mép trên và mép dưới theo một tỷ lệ không đổi, bạn chỉ đặt để thuộc tính Anchor của nó là Left như trong Hình 6 mà thôi.

Hai nút lệnh “Ghi thông tin” và “Thôi nhé” cần chiếm một vị trí cố định ở góc-dưới-bên-phải của pnlBottom, cho nên cần cắm dùi như Hình 7.

Úi chà chà, giờ thì bạn nên liếc con mắt sang phải, lườm con mắt sang trái một chút, đứng lên ngồi xuống ba mươi lần để thư giãn, nếu cần thiết cũng nên dùng thử một lon tăng-lực-bí-quyết-thànhcông-của-Kiatisak, rồi nhấn F5 để chạy thử ứng dụng của mình!

Cái gì đã xảy ra khi bạn kéo dãn kích thước biểu mẫu như Hình 8? Úi trời đất ơi! Hỏng bét rồi còn gì, đấy chẳng phải là cái chúng ta muốn, hu hu hu...

Hình 9: Biểu mẫu đã được điều chỉnh.

Điều nên xảy ra phải là: Hai bến bãi pnlLeft và pnlRight phải giữ nguyên bề cao. Chỉ có bến bãi pnlBottom mới cần dãn ra mà thôi. Lý do của niềm-thất-vọng trên là: Thuộc tính Dock của pnlLeft là Left, nên nó luôn lấn hết phần bên trái biểu mẫu còn lại mà pnlBottom chừa ra; còn thuộc tính Dock của pnlRight là Fill, nên nó luôn chiếm dụng phần còn lại trên biểu mẫu sau khi pnlBottom và pnlLeft chừa ra.

Ông trời luôn ưu ái cho dân Việt Nam cái tính cần cù, thông minh, và... hên. Tôi không cần cù, cũng chẳng thông minh, chỉ được cái lúc nào cũng hên khi bí cái gì đó. Đoạn mã bên dưới mà tôi “hối lộ” cho VB.NET và Hình 9 đủ chứng minh tôi nói thiệt!

Bạn hãy khai báo các hằng và các biến sau đây ở mức biểu mẫu:

Private Const BeCao_pnlLeft As Integer = 166

Private Const BeCaoFormTruDiBeCao_pnlBottom As Integer = 296 - 103

Private BeRongFormTruocKhiResize As Integer = 448

Tùy thiết kế cụ thể của biểu mẫu mà bạn đang mần trên máy của mình, các con số trong phần khai báo trên sẽ khác. Xong, bạn đặt nội dung đoạn mã của thủ tục xử lý tình huống Resize của biểu mẫu như sau:

Private Sub Form1_Resize(ByVal sender As Object, ByVal e As System.EventArgs) _

Handles MyBase.Resize

Dim WidthRatio As Double = (Me.Size.Width / BeRongFormTruocKhiResize)

pnlLeft.Size = New System.Drawing.Size(pnlLeft.Size.Width * WidthRatio, BeCao_pnlLeft)

BeRongFormTruocKhiResize = Me.Size.Width pnlBottom.Size = New

System.Drawing.Size(pnlBottom.Size.Width, _ Me.Size.Height - BeCaoFormTruDiBeCao_pnlBottom)

End Sub

Dĩ nhiên, lời khuyên cuối cùng của tôi lại là: Hãy nhấn F5 để đạt được ước nguyện. Cái gì Chương chíp được thì chắc chắn bạn sẽ chíp được. Xin chào, hẹn gặp lại kỳ sau!