Những chương trình ứng dụng chuyên nghiệp ta mua ngoài chợ để dùng thường thường có đặc tính resize các controls hay định vị trí của các controls trên form một cách tự động. Nếu bao giờ bạn đã thử thêm các chức năng ấy cho một chương trình áp dụng viết bằng VB6 của mình, bạn sẽ thông cảm rằng coi vậy chớ đó không phải là chuyện nhỏ. Tưởng
Bài 10 Những chức giao diện cửa sổ VB.NET (phần III) Tự động Resize định chỗ (positioning) Những chương trình ứng dụng chuyên nghiệp ta mua ngồi chợ để dùng thường thường có đặc tính resize controls hay định vị trí controls form cách tự động Nếu bạn thử thêm chức cho chương trình áp dụng viết VB6 mình, bạn thơng cảm coi khơng phải chuyện nhỏ Tưởng tượng ta phải ghi nhớ vị trí kích thước control form để lần user resizes form ta phải theo resize định vị trí control Trong lúc thiết kế ta phải cho user phương tiện để định họ muốn control cư xử form resize Để chứa tin tức ta dùng property Tag control ta dùng registry Chỉ việc đọc ra, viết vào để cập nhật hoá tin tức đủ mệt, chưa nói đến chuyện tính tốn để resize định vị trí control Do đó, nhiều làm biếng ta dùng đại third party ActiveX để giúp ta làm chuyện NET cho ta thêm properties Anchor Dock cho control Ngồi NET cịn cung cấp control Splitter phép ta nắm phân hai kéo qua, kéo lại hay kéo lên, kéo xuống tùy thích, để mở rộng thêm bên bên bị thu hẹp.Cái áp dụng Splitter thông dụng Windows Explorer Trong ta có hai phần: bên trái Treeview chứa disk drives file folders, bên phải Listview chứa icons hay chi tiết folder files Muốn xem Treeview nhiều hơn, ta nắm phân hai kéo qua bên phải chút Anchoring (bỏ neo) Khi tàu bỏ neo đỗ Dù nước chảy nào, tàu nằm n chỗ cột vào neo Control NET có property Anchor để ta định buộc vào góc form: Left, Right, Bottom hay Top Trong lúc thiết kế, sau select control (thí dụ Button1), ta vào cửa sỗ Properties click hình tam giác nhỏ bên phải property Anchor Một hình vng với bốn ráp lại giống hình chữ thập màu trắng Mỗi tượng trưng cho góc mà ta định để cột control vào form Khi ta click thanh, đổi màu thành xám đậm, chữ tương ứng với sau nầy hiển thị textbox area combobox Anchor.Thí dụ ta click vào hai hai bên, ta có Bottom, Left, Right hình đây: Khi Button1 có Anchor Bottom, Right góc phải form di chuyển resize, Button1 chạy theo góc ấy: Nếu Button1 có Anchor Left, Right, Bottom form resizes cho lớn ra, Button1 giữ khoảng cách từ đến ba cạnh Left, Right, Bottom form khơng đổi Do phải nở rộng hình đây: Nếu Button1 có Anchor Top,Bottom,Left, Right form resizes, Button1 giữ khoảng cách từ đến bốn cạnh Left, Right, Top, Bottom form khơng đổi Do phải nở rộng hay thu nhỏ chiều cao lẫn chiều rộng hình đây: Vì property Anchor có hiệu lực lúc ta thiết kế, nên bạn resize form lúc thiết kế, control có Anchor property set resize di chuyển theo Có thể bạn khơng muốn chuyện xãy ra, nên tốt set property Anchor control sau thiết kế form xong hết Docking (gắn vào) Khi ta Dock control vào cạnh form có nghĩa ta dán dính vào cạnh Áp dụng ta thường thấy Docking ToolBar StatusBar ToolBar dock vào phía form, cịm StatusBar dock vào phía form Chúng dãn chiếm từ trái qua phải form, user định chiều rộng chúng Khi form resized ToolBar StatusBar dãn hay co vào theo chiều rộng form.Property Dock control NET giống giống property Align control VB6 StatusBar.Ta dán control vào bốn cạnh form, khơng có chuyện bắt cá hai, ba tay trường hợp Anchor neo vào Left, Right, Bottom lúc Tuy nhiên, property Dock có trị số Fill để nói control chiếm hết bên phần cịn lại container nó.Trong lúc thiết kế, sau select control (thí dụ Label1), ta vào cửa sỗ Properties click hình tam giác nhỏ bên phải property Dock Một hình vng nhiều màu xám Mỗi tượng trưng cho cạnh mà ta định để dán control vào form (Top, Bottom, Left hay Right), hình vng tượng trưng cho trị số Fill, chót có chữ None cho phép ta xóa khơng chọn trị số Dock Khi ta click thanh, trị số Docking tương ứng hiển thị textbox area combobox Dock Giả sử ta set Property TextAlign Label MiddleCenter cách chọn xám nằm số tượng trưng cho vị trí Text nằm Label1 hình đây: Khi chạy chương trình resize form cho lớn ra, ta thấy Label1 dãn hai bên, không tăng bề cao, Text Label1 ln ln nằm Nếu bạn tìm cách dock nhiều controls vào cạnh form VB.NET phải định control nằm sát cạnh Qui ước thứ tự ngược lại với thứ tự z-order Tức z-order, control nằm lại dock trước vào cạnh form Do đó, bạn dock hai controls vào cạnh, muốn control nằm xa cạnh dock trước (tức sát cạnh nhất) right click control chọn Send To Back.Nếu bạn muốn chừa khoảng trống control cạnh container set Property DockPadding container Tự trước đến ta dùng form để đại diện container chứa controls Thật container Panel Bạn set Property DockPadding cạnh container khác cách click dấu + bên trái chữ DockPadding cửa sổ Properties để mở chi tiết hình đây: Bạn set tất Property DockPadding trị số cách dùng All setting Control Splitter Bây bạn hiểu rõ đặc tính, khác biệt cách dùng hai properties Anchor Dock control, sau ta áp dụng kiến thức vào việc thiết kế dùng Splitter form Nếu với Splitter bạn dễ bị bực dùng Do đó, bạn thử làm theo bước sau đây: Tạo Application mới, đặt Panel lên phía trái form để chíếm bên trái form cách set property Dock thành Left Ta gọi Panel Panel1 Đặt Splitter lên form (nhớ tránh đặt lên Panel1 Panel loại container nên chứa Splitter được) Splitter tự động dock Left vào form tức nằm bên phải Panel1 Chọn property BoderStyle Splitter1 làm FixedSingle cho dễ thấy Đặt button lên Panel1 set property Anchor thành Top, Left, Right Bây form giống đây: Kế đó, đặt Panel lên bên phải form, gọi Panel2, set property Dock thành Fill Có nghĩa ta muốn Panel2 chiếm hết phần lại bên phải form Thêm vào Panel2 nầy Button, gọi Button2, set property Anchor thành Top, Left, Right Khi chạy chương trình, lần bạn nắm Splitter kéo qua phải Button1 dãn Button2 co lại: Ngược lại, bạn nắm Splitter kéo qua trái Button1 co Button2 dãn lại: Trong thí dụ nầy ta để yên chiều rộng Splitter, bình thường ta làm cho hẹp Nếu Splitter hẹp khó thấy, bạn cho màu đỏ rực lúc thiết kế để dễ thấy Khi thiết kế xong hết rồi, bạn đổi lại thành màu dịu Nếu bạn muốn chia Panel2 thành hai phần, ngăn cách Horizontal Splitter sao? Ta xem Panel2 form vậy, tức hai containers, loại control đựng nhiều controls, lập lại bước sau: Đặt Panel lên phía Panel2, gọi Panel3 set property Dock thành Top Đặt Splitter lên Panel2 (nhớ tránh đặt lên Panel3), gọi Splitter2 set property Dock thành Top Resize Splitter2 cho dẹp lại đổi property Backcolor thành ControlDark cho dễ thấy Đặt Panel lên phía Panel2, gọi Panel4 dời Button2 từ Panel2 qua Panel4 cách Cut and Paste Set property Dock Panel4 thành Fill Bây chạy chương trình nắm kéo Splitter2 lên xuống Tóm lại, muốn dùng control Splitter form hay panel ta đặt PanelX với Docking Left hay Top lên trước, kế đặt Splitter với loại Docking với PanelX, đặt PanelY với Docking Fill ... đến ta dùng form để đại diện container chứa controls Thật container Panel Bạn set Property DockPadding cạnh container khác cách click dấu + bên trái chữ DockPadding cửa sổ Properties để mở chi... trị số Fill để nói control chiếm hết bên phần cịn lại container nó .Trong lúc thiết kế, sau select control (thí dụ Label1), ta vào cửa sỗ Properties click hình tam giác nhỏ bên phải property Dock... Anchor để ta định buộc vào góc form: Left, Right, Bottom hay Top Trong lúc thiết kế, sau select control (thí dụ Button1), ta vào cửa sỗ Properties click hình tam giác nhỏ bên phải property Anchor