Sử dụng thư viện control DevExpress cho winform – Series Giải pháp winforms (4)

3

DevExpress cho winform là một thư viện chứa các điều khiển (control) thay thế cho các điều khiển nguyên bản của Windows Forms. DevExpress được sử dụng rất phổ biến để tạo ra các giao diện chuyên nghiệp, hiệu suất cao và nhiều tính năng một cách nhanh chóng.

Tại sao lại nhắc tới thư viện DevExpress?

Trong phần 2 – thiết kế giao diện winform – bạn đã dùng các điều khiển gốc của winform để thiết kế giao diện. Hẳn bạn đã nhận thấy, loại giao diện này nhìn rất “cổ lỗ”, thậm chí là xấu. Ngoài cổ và xấu ra, các điều khiển này khá chậm. Bạn sẽ dễ dàng để ý thấy điều này nếu tăng số lượng bản ghi trong DataGridview. Không ai thích một chương trình với giao diện như vậy cả.

Các công ty phần mềm đều phải sử dụng các bộ thư viện từ bên thứ ba để thay thế cho bộ điều khiển nguyên bản của winform. DevExpress là bộ thư viện phổ biến nhất.

Do đó, trong bài này, chúng ta sẽ xem xét cách sử dụng bộ thư viện DevExpress cho winform (vì DevExpress còn có thư viện cho nhiều loại công nghệ khác nữa) để thiết kế một giao diện mới đẹp và chuyên nghiệp hơn.

Loạt bài “Các giải pháp dành cho lập trình winform”:
Phần 1 – Lỗi thường gặp trong lập trình winforms
Phần 2 – Thiết kế giao diện với Data Sources và BindingSource
Phần 3 – Phân chia code thành module sử dụng Interface
Phần 4 – Sử dụng thư viện DevExpress cho winforms
Phần 5 – Sử dụng Data Binding
Phần 6 – Sử dụng Entity Framework

Thư viện DevExpress cho winform là gì?

DevExpress là một hãng chuyên cung cấp các giải pháp cho phát triển ứng dụng, trong đó có ứng dụng trên .NET. Các giải pháp của DevExpress rất đa dạng, bao gồm các thư viện điều khiển cho winform, WPF, ASP.NET MVC, Xamarin, các framework để phát triển ứng dụng nhanh, v.v..

Trong bài viết này, chúng ta sẽ sử dụng bộ thư viện DevExpress dành cho winform.

Có vài lý do nên (phải) sử dụng thư viện điều khiển của hãng thứ ba khi phát triển ứng dụng chuyên nghiệp.

Thứ nhất, các điều khiển gốc của windows form nhìn khá xấu, ít tính năng, hiệu suất thấp. Thứ hai, khả năng data binding của các điều khiển gốc khá hạn chế. Thứ ba, windows forms không có một số loại điều khiển thường dùng (như thanh ribbon).

Bộ thư viện điều khiển cho windows forms của DevExpress giúp giải quyết được hết các vấn đề trên.

Bộ thư viện này được các công ty ở Việt Nam sử dụng rất rộng rãi.

Việc học sử dụng các điều khiển này cũng rất đơn giản nếu đã biết sử dụng các điều khiển cơ bản.

Để sử dụng bộ thư viện này phải trả phí (và không hề rẻ). Tuy nhiên bạn có thể sử dụng bản dùng thử trong 30 ngày. Có thể tải bản dùng thử mới nhất của DevExpress từ website của nhà cung cấp.

Sau khi tải về bạn cài đặt như bất kỳ ứng dụng bình thường nào. Cài đặt xong, mở project từ bài trước (xem phần 3 – phân chia code thành module) ra để xem các điều khiển mới đã xuất hiện trên Toolbox chưa.

Điều khiển DevExpress trên toolbox
Điều khiển DevExpress trên toolbox

Thiết kế lại form Contacts sử dụng Ribbon Form

Ribbon Form

Ribbon Form là một loại form hoàn toàn mới do DevExpress thêm vào. Loại form này sử dụng thanh Ribbon thay cho menu truyền thống. Loại form này cho giao diện hiện đại giống của Office hay windows explorer của windows 10.

Trước hết thêm Ribbon Form vào project App như hình dưới đây

 Thêm Ribbon Form vào project App
Thêm Ribbon Form vào project App

Đặt tên cho form mới là DxContacts. Chúng ta thu được một Ribbon Form như dưới đây.

Giao diện thiết kế Ribbon Form
Giao diện thiết kế Ribbon Form

Bạn hãy tự mình tìm hiểu cách thiết kế giao diện với Ribbon Form. Có rất nhiều tài liệu hướng dẫn chi tiết trên Internet. Việc thiết kế này cũng rất đơn giản và trực quan. Sau khi tìm hiểu xong hãy tự thiết kế để thu được giao diện như sau:

Thiết kế cho Ribbon Form Contacts
Thiết kế cho Ribbon Form Contacts

Lưu ý rằng các hình biểu tượng trên nút bấm đều do DevExpress cung cấp sẵn. Có thể lấy hình ra sử dụng thông qua cửa sổ Image Picker.

Sử dụng Image Picker để lấy biểu tượng DevExpress cung cấp sẵn
Sử dụng Image Picker để lấy biểu tượng DevExpress cung cấp sẵn

Sử dụng GridView và Data Source

DevExpress cung cấp một công cụ hiển thị danh sách rất mạnh gọi là GridView. Điều khiển này có thể sử dụng thay thế cho DataGridView của windows forms.

Trước hết chuyển đổi điều khiển hiển thị danh sách mặc định của Data Source Contact sang GridView như sau:

Chuyển đổi điều khiển hiển thị danh sách mặc định của Data Source Contact sang GridView
Chuyển đổi điều khiển hiển thị danh sách mặc định của Data Source Contact sang GridView

Kéo Contact từ Data Sources sang form vừa tạo và điều chỉnh thuộc tính Dock của GridView thành Fill. Chúng ta sẽ thu được giao diện như dưới đây:

Sử dụng GridView trên Ribbon form cho Contact

Click vào nút Retrieve Details để GridView đọc cấu trúc của Contact và giúp tự động tạo ra các cột dữ liệu cần thiết. Sau đó click vào nút Run Designer để mở giao diện điều chỉnh thông số cho các cột dữ liệu. Hãy điều chỉnh để đạt được như sau:

Sử dụng Grid Designer để chọn và điều chỉnh các cột dữ liệu
Sử dụng Grid Designer để chọn và điều chỉnh các cột dữ liệu

Ngoài hiển thị dữ liệu theo dạng bảng, GridView còn có thể hiển thị dữ liệu theo nhiều dạng khác như CardView, BandedGridView, TileView. Bạn có thể tự tìm hiểu thêm về điều khiển này.

Đến đây chúng ta đã hoàn thành thiết kế form mới. Giờ là lúc viết vài dòng code.

Điều chỉnh code

Viết code cho DxContacts form (code behind)

namespace App
{
    using Interfaces;
    using Unity;
    public partial class DxContacts : DevExpress.XtraBars.Ribbon.RibbonForm
    {
        private IContactsViewModel _vm = Config.Container.Resolve<IContactsViewModel>();
        public DxContacts()
        {
            InitializeComponent();

            _vm.ContactBindingSource = contactBindingSource;
            _vm.Initialize();
            Load += delegate { _vm.Load(); };
            DataBindings.Add("Text", _vm, "Title");

            LoadButton.ItemClick += delegate { _vm.Load(); };
            SaveButton.ItemClick += delegate { _vm.Save(); };
            NewContactButton.ItemClick += delegate { _vm.New(); };
            DeleteContactButton.ItemClick += delegate { _vm.Delete(); };
            DetailContactButton.ItemClick += delegate { _vm.ShowDetail(Config.Container.Resolve<IDetailView>()); };

        }
    }
}

Điều chỉnh code của Program.cs

using System;
using System.Windows.Forms;
using Unity;
using ViewModels;
using Interfaces;

namespace App
{
    static class Config
    {
        public static UnityContainer Container { get; private set; }  = new UnityContainer();

        public static void Register()
        {
            Container.RegisterType<IContactsViewModel, ContactsViewModel>();
            Container.RegisterType<IDetailView, Detail>();
        }
    }

    static class Program
    {
        /// <summary>
        /// The main entry point for the application.
        /// </summary>
        [STAThread]
        static void Main()
        {
            Config.Register();

            Application.EnableVisualStyles();
            Application.SetCompatibleTextRenderingDefault(false);
            Application.Run(new DxContacts());
        }
    }
}

Dịch và chạy thử chương trình.

Chương trình với giao diện ribbon hiện đại
Chương trình với giao diện ribbon hiện đại và chuyên nghiệp

Đến đây xin chúc mừng bạn đã thành công chuyển đổi sang một giao diện mới chuyên nghiệp hơn rất nhiều. Việc chuyển đổi này rất đơn giản đúng không ạ.

Khi chuyển đổi sang giao diện mới, chúng ta chỉ gán lại phương thức xử lý cho các điểu khiển. Chúng ta cũng thấy việc thiết kế form mới hoàn toàn không liên quan gì đến view model đã có, cũng không đụng chạm gì đến form cũ. Tất cả những gì cần làm chỉ là thay tên form cần tạo trong lớp Config và Program.

Bạn hãy vận dụng kỹ thuật ở trên để tiếp tục thay đổi thiết kế cho giao diện detail.

Kết phần

Trong phần này của chuỗi bài viết chúng ta đã cùng sử dụng bộ thư viện điều khiển của DevExpress để tạo ra giao diện hiện đại và chuyên nghiệp hơn.

Với các kỹ thuật tách các thành phần đã làm ở bài trước, việc thay thế thiết kế giao diện mới trở nên rất dễ dàng.

Nếu có thắc mắc hoặc cần trao đổi thêm, mời bạn viết trong phần Thảo luận cuối trang.
Nếu cần trao đổi riêng với chúng tôi, hãy gửi email hoặc nhắn tin qua form liên hệ.
Nếu bài viết hữu ích với bạn, hãy giúp chúng tôi chia sẻ tới mọi người.
Đăng ký theo dõi trang facebook để nhận thông tin về bài viết mới.
Tắt Adblocker hoặc whitelist trang để hỗ trợ chúng tôi.
Cảm ơn bạn!

Loạt bài “Các giải pháp dành cho lập trình winform”:
Phần 1 – Lỗi thường gặp trong lập trình winforms
Phần 2 – Thiết kế giao diện với Data Sources và BindingSource
Phần 3 – Phân chia code thành module sử dụng Interface
Phần 4 – Sử dụng thư viện DevExpress cho winforms
Phần 5 – Sử dụng Data Binding
Phần 6 – Sử dụng Entity Framework

* Bản quyền bài viết thuộc về Tự học ICT. Đề nghị tôn trọng bản quyền. DMCA.com Protection Status
Subscribe
Notify of
guest
3 Thảo luận
Oldest
Newest
Inline Feedbacks
View all comments
peter

tác giả cho hỏi bài trước bài này là bài nào ??? “Sau khi tải về bạn cài đặt như bất kỳ ứng dụng bình thường nào. Cài đặt xong, mở project từ bài trước ra để xem các điều khiển mới đã xuất hiện trên Toolbox chưa.”

Mai Chi

Nếu bạn đang đọc phần 4 (sử dụng thư viện devexpress) thì phần thực hành gần nhất trước đó là phần 3 (phân chia code thành module) – https://tuhocict.com/giai-phap-winforms-3-interface-loose-coupling/. Ở phần 4 này bạn sẽ thực hiện xây dựng giao diện mới sử dụng devexpress cho project App để thay thế cho giao diện với các control gốc của winforms đã xây dựng trong App.

Nguyễn Văn Trung

Chị ơi, em cài cả 3 devexpress r mà nó không ra devexpress item chị ạ