VB.NET Form

Sử dụng thuộc tính anchor và dock trên form

04/04/2013 07:36

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 (form) thay đổi, mà không cần đến bất cứ đoạn mã nào.

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 AnchorDock trên một biểu mẫu (form) trong 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.

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!

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?

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 anchordock, 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.

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 3 ô đ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 sau vào biểu mẫu cần thiết kế.

Tên ô điều khiển
Thuộc tính
Trị
pnlBottomDockBottom
pnlLeftDockLeft
pnlRightDockFill

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ó 3 vùng phân định rõ ràng (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.

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 vùng đượ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 vùng như trong hình 3.

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

Với vùng đầ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 1 ô hình ảnh và 1 ô 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 Dock 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 Panel mà nó nằm cố định trên đấy.

Với vùng thứ hai, pnlRight, bạn cũng mần tương tự như ở trển. Còn vùng cuối cùng, pnlBottom, 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 vùng 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ố định như hình 7.

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, 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…

Điều nên xảy ra phải là: hai vùngpnlLeftpnlRight phải giữ nguyên bề cao. Chỉ có vùng 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 pnlLeftLeft, 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 pnlRightFill, nên nó luôn chiếm dụng phần còn lại trên biểu mẫu sau khi pnlBottompnlLeft 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 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.

Chương can chíp

Ý kiến bạn đọc (0)
Tên   Email

Lên đầu trang