Giao diện là một trong những thành phần thể hiện sự chuyên nghiệp của ứng dụng. Một giao diện tối giản nhưng vẫn cung cấp đầy đủ khả năng thao tác là điều được khuyến khích. Một phần mềm có nhiều tính năng nhưng khó thao tác, khó sử dụng sẽ khiến người dùng dễ dàng từ bỏ và tìm đến những phần mềm khác dễ sử dụng hơn. Trong bài viết này mình sẽ chia sẻ cách thiết kế giao diện đẹp, nhanh chóng và dễ dàng sử dụng trên winform bằng DevExpress (DE).
Bạn đang xem: Hướng dẫn sử dụng devexpress với winform
Trước khi cài DE bạn phải cài sẵn visual studio, khuyên bạn nên cài bản mới nhất với net framework mới nhất luôn nhé. Bạn tải DE từ trang của nó tại đây: https://www.devexpress.com. Sau khi tải thì bạn cứ cài bình thường theo các bước của nó, việc này đơn giản nên mình không hướng dẫn. Mất công cài lại hehe. Dùng cái này thì bạn phải trả phí những cũng có một và part crack share trên mạng, nhưng mình thì không có nên bạn tự tìm nhé.
Tạo Project với DevExpress
Sau khi cài xong thì khởi động Visual Studio lên.
Mình thường viết phần mềm C# nên mình sẽ chọn visual C#, Nếu đã cài đặt thành công DE thì sẽ có phần template Galley để bạn có thể chọn các mẫu có sẵn của DE.
Sau khi bạn chọn Teamplate Galley thì một khung sẽ xuất hiện để bạn chọn các mẫu. Mình sẽ chọn Black Application cho dễ, chọn mấy cái kia nó sinh ra nhiều thứ không cần thiết làm, chọn cái này rồi thì mình sẽ kéo thả vào những cái cần thiết cho ứng dụng của mình.
Như vậy là mình đã tạo ra một project với DE, bây giờ mình sẽ sử dụng các công cụ cơ bản của DevExpress để thiết kế giao diện.
Thiết kế giao diện winform sử dụng DevExpress
Trong hộp Toolbox, các công cụ của DE thường có màu khá nổi bật, còn của Windows form thông thường thì chỉ có một màu xám. Các công cụ có công dụng giống với công cụ sẵn thì thường có thêm từ Edit phía sau, ví dụ simple button edit.
Một số công cụ của DE
Tùy theo yêu cầu và bố cục phát thảo của bạn như thế nào mà bạn có thể thiết kế cho phù hợp. Mình sẽ thiết kế giao diện này theo cách mà mình vẫn hay thường làm đó là sử dụng các Tab con trong 1 from (thực tế là các form trong 1 form) bằng cách dùng một công cụ đặt biệt của DE.
Đầu tiên mình sẽ sử dụng một cái Ribbon để chứa các nút điều hướng cho đẹp. Tìm đến RibbonControl và kéo thả vào Form.Sau đó bạn kéo thả thêm cái XtraTabbedMdiManager để tạo ra vùng chưa tab và các form con sau này.Bạn run thử thì được kết quả như sau:
Bây giờ mình sẽ tạo một vài nút trên khung Ribbon.
Ribbon của DE có 3 phần chính đó là: Page, Category, và Group.Phần category là lớn nhất, Nó sẽ chứa các Page. Trong 1 page thì bạn có thể chia ra nhiều Group khác nhau.
Nếu thiết kế đầy đủ thì nó sẽ như thế này
Tuy nhiên mình không khuyến khích bạn sử dụng cái category đâu vì nó rất bất tiện. Mình không hiểu vì sao mà khi add nó vào mình không thể đổi tên các Group được. Run thì nó báo lỗi Ribbon. Cái này thì mình không chắc nhưng mình sẽ bỏ qua nó.
Để thực hiện thêm các page, group thì bạn vào cái mũi tên nhỏ nằm ở góc phải khi nhấn và Ribbon, và chọn Design.
Sau khi nhấn vào đó thì một bảng sau sẽ hiện ra. Có đầy đủ thông tin cho bạn thực hiện thêm xóa sửa các control phù hợp.
1: Thêm Category2: Thêm Page3: Thêm Group4: Thay đổi thứ tự của các category, page, group.5. Xóa một category, page, group bất kỳ.6. Tạo nút. Nút sau khi tạo phải kéo thả qua phần nó cần hiển thị nhé nếu không nó k hiện gì đâu.7. Xóa nút bất kỳ đã tạo.8. Bảng thuộc tính của đối tượng.
Bây giờ mình sẽ thiết kế giao diện cho các form con.
Một phần mềm với giao diện tốt bạn không thể cố định kích thước cho nó. Hãy để người dùng tự tùy chỉnh kích thước phù hợp. Bạn có thể sử dụng MaximumSize và MinimumSize để đặt kích thước tối đa hoặc tối thiểu ngăn việc kích thước hiển thị sai quy cách.
Trong DE có một công cụ giúp các công cụ khác nằm trong nó có thể được điều chỉnh kích thước phù hợp có tên là LayoutControl.
Sau khi kéo thả LayoutControl vào thì cần Dock nó ra full form như dưới.
Bây giờ có thể kéo thả các control khác vào đây. Một control được kéo vào sẽ được hiển thị kèm một cái nhãn (label) ở bên như dưới đây.
Mỗi một layout sẽ bao gồm 1 label và một control, bạn có thể ẩn đi cái label bằng thuộc tính TextVisible của layout.
kết quả này mình sử dụng 3 cái textedit, 3 cái simplebutton, 1 cái GridViewControl. và một cái GroupBox để đẩy 3 cái button qua. Bạn có thể thực hành kéo thả rồi sẽ có kinh nghiệm, lúc đầu mình dùng thì nó cũng nhảy lung tung lên.
Add form con sử dụng xtraTabbedMdiManager
Việc kéo thả trên rất đơn giản, bạn có thể tiếp tục nghiên cứu. Bước tiếp theo mình sẽ hướng dẫn bạn cách gọi các form con vào form chính.
Bây giờ mình sẽ mở code behind của cái from chính lên. và code đoạn này vào
private Form kiemtraform(Type ftype) { foreach (Form f in this.MdiChildren) { if (f.GetType() == ftype) { return f; } } return null; }Đây là một hàm From để mình kiểm tra là from đã đươc ở hay chưa, và trả về kết quả, nếu null mình mới add ngược lại thì không. Trường hợp này lúc đầu mình có gặp phải do khách hàng nhấn nút 2 lần nó hiện ra hai form y chang nhau.
Tiếp theo bạn nhấn đôi vào một nút bất kỳ ở form chính để mở thuộc tính event click của nó và cho đoạn code này vào.
Form frm = kiemtraform(typeof(fm.frm_thongkekhohang)); if (frm == null) { fm.frm_thongkekhohang forms = new fm.frm_thongkekhohang(); forms.MdiParent = this; forms.Show(); } else { frm.Activate(); }fm.frm_thongkekhohang là tên form bạn cần add vào nhé, fm là cái thư mục mình tạo để nhét nó vào để dễ quản lý thôi.
Xem thêm: Jax Mùa 11 – Bảng Ngọc Và Cách Lên Đồ Jax Build Mùa 11
sau đó thì bạn run thử để xem kết quả nhé.
