Hướng dẫn sử dụng devexpress với winform năm 2024

Bài note này mình trình bày cách tạo 1 report lấy dữ liệu từ 1 grid trong vài nốt nhạc nhờ việc sử dụng control Devexpress.Xtrareport.PrintableComponentContainer.

Thực ra thì có khá nhiều cách để tạo 1 report từ gridview, vd: sử dụng emmbbedNavigation của gridview, lấy source của gridview bind vào report, ... Nhưng mình thấy chả những việc đó khá mất công nên mình hay sử dụng PrintableComponentContainer cho những yêu cầu dạng này. Còn về PrintableComponentContainer là gì, chi tiết dùng như thế nào thì hãy xem mình không giải thích thêm mà sẽ đi vào các bước thực hiện luôn

B1. Tạo xtraReport

Add new items hoặc bạn nhấn tổ hợp phím Ctrl + Shift + A để đến màn hình add new item. Chọn Tab Reporting chọn Devexpress ... report ... và trong màn hình thì chọn Empty xtraReport để tạo mới một devexpress report.

Có thể vẽ vời các header cho nó ra dáng 1 report nhé :D

B2. Sử dụng printableComponentContainer

Trên toolbox của visual studio gõ printableComponentContainer và kéo nó vào detail của report

Đấy done phần thiết kế report rồi đấy. Bây giờ thiết kế cái forn chứa grid để mở report này.

B3. Thiết kế form

- Tạo cái form

- Kéo 1 cái grid vào form để show dữ liệu

- Kéo cái button vào form để action mở report

--> được cái form như này (Full code)

Code cho button report để khi click sẽ hiển thị report với dữ liệu từ grid như sau:

private void btnReport_Click(object sender, EventArgs e)

{

gvCustomerInfo.BestFitColumns();

CustomerReport report = new CustomerReport();

report.GridControl = gcCustomerInfo;

ReportPrintTool printTool = new ReportPrintTool(report);

printTool.ShowPreviewDialog();

}

Bổ sung đoạn code này vào code của xtraReport

private GridControl control;

public GridControl GridControl

{

get

{

return control;

}

set

{

control = value;

pccReport.PrintableComponent = control;

}

}

giải thích: Tại report ta sử dụng thuộc tính PrintableComponent của printableComponentContainer để assign gridcontrol từ bên form gọi cho printableComponentContainer (mình đặt name nó là pccReport) của ta, từ đấy printableComponentContainer sẽ biết cần lấy data từ gridcontrol nào và tự động fill lên report, kết quả ta được

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).

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 Category
• 2: Thêm Page
• 3: Thêm Group
• 4: 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.

sau đó thì bạn run thử để xem kết quả nhé.

Trong bài viết này mình chỉ chia sẻ như vậy thôi, còn những thứ khác bạn có thể xem thêm trong blog của mình, nếu không tìm thấy bạn có thể để lại bình luận dưới blog mình sẽ trả lời, nếu quá dài mình sẽ viết một bài riêng để hướng dẫn. Nếu bạn muốn nhận tin nhanh nhất đừng quên đăng ký nhận tin bằng cái chuông đỏ ở bên nhé.