Cách đơn giản thiết kế giao diện Ribbon cho ứng dụng WinForms

Giới thiệu

Ví dụ sử dụng Control Ribbon

Ví dụ sử dụng Control Ribbon

Hình bên là giao diện sử dụng thanh Toolbar dạng Ribbon. Ribbon là một control đồ hoạ trên Form, cho phép đặt các nút trên thanh Toolbar và các Tabs. Cấu trúc cơ bản của Ribbon bao gồm các thanh công cụ lớn gắn các thẻ (tab), trong các thẻ chứa các nút đồ hoạ và các điều khiển khác được nhóm chức năng. Giao diện Ribbon được giới thiệu trong phiên bản Microsoft Offices 2007 và trở thành giao diện tương đối phổ biến trong các phần mềm hiện nay.

Một số kiểu Ribbon

  • Style 2007

Kiểu Ribbon 2007

  • Style 2010

Kiểu Ribbon 2010

  • Style 2013

Kiểu Ribbon 2013

Bài này trình bày cách sử dụng một control Ribbon cho thiết kế giao diện, đây là một control mã nguồn mở được tạo bởi Jose Menendez Poo. Tuy nhiên tác giả gốc của Ribbon này đã người hỗ trợ nó, một nhóm các fan của control Ribbon này hiện tiếp tục đảm nhận phát triển/cải thiện và hỗ trợ Ribbon này.

Tác giả ban đầu của Ribbon đã đăng một bài viết giải thích control này, bạn có thể đọc ở đây [A Professional Ribbon You Will Use (Now with orb!)], nhưng không có mô tả về cách sử dụng nó trong code của bạn. Do đó bài viết này sẽ hướng dẫn bạn sử dụng nó.

Cách sử dụng Control Ribbon

  • Thư viện Ribbon có thể add bằng công cụ Nuget. Kích chuột phải vào Project của bạn và tới Manage Nuget Packages…

Cài đặt Ribbon

  • Đánh từ khoá RibbonWinForms và cài đặt gói này.

Sử dụng Ribbon tại timoday.edu.vn

  • Kéo Ribbon ở thanh Toolbox vào Form

Sử dụng Ribbon tại timoday.edu.vn

  • Kích Add Tab

Sử dụng Ribbon tại timoday.edu.vn

  • Kích Add Panel

  • Thêm Commands vào Panel

Sử dụng Ribbon tại timoday.edu.vn

  • Kích vào nút và thêm các control nếu muốn

Sử dụng Ribbon tại timoday.edu.vn

  • Thay đổi biểu tượng icon và nhãn cho nút

Sử dụng Ribbon tại timoday.edu.vn

  • Thêm sự kiện Click cho nút Save.

Sử dụng Ribbon tại timoday.edu.vn

  • Viết code cho sự kiện, trong ví dụ này đơn giản chỉ hiển thị MessageBox

Sử dụng Ribbon tại timoday.edu.vn

  • Bây giờ, bạn thử chạy ứng dụng

Sử dụng Ribbon tại timoday.edu.vn

  • Ví dụ sử dụng kiểu của RibbonForm 

Sử dụng Ribbon tại timoday.edu.vn

  • Thay thế lớp thừa kế mặc định là Form

Sử dụng Ribbon tại timoday.edu.vn

  • thành lớp RibbonForm

Sử dụng Ribbon tại timoday.edu.vn

Chú ý

Một số hành vi của RibbonForm có thể không làm việc đúng trong một số trường hợp của thể. Chúng tôi khuyến nghị bạn cần thực hiện test cẩn thận trước khi đưa ứng dụng vào sử dụng thực tế.

Một vài giải pháp Control Ribbon khác

Có thể bạn sẽ thích…

Trả lời

EnglishVietnamese