Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

🧪 [Experiment] Ribbon

Đang mở
  • Có gì không ổn?
#545 0 bình luận 5 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức phù hợp với người mới
25/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
csharp
Lĩnh vực
desktop-dev, frontend

Hướng nghiên cứu

Bắt đầu bằng cách xác định các component Ribbon, RibbonGroup, RibbonCollapsibleGroup và RibbonPanel cùng tệp RibbonStyle.xaml của chúng. Issue đánh dấu các unit test, phản hồi từ cộng đồng và đánh giá kỹ thuật là chưa hoàn tất; để hoàn thành, cần xử lý những phần còn lại đó cho thử nghiệm WinUI 3, nhưng không có tệp test hay entry point cụ thể nào được nêu tên.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

experiment :test_tube:
Approved from Discussion

https://github.com/CommunityToolkit/Labs-Windows/discussions/544

Problem Statement

Office and applications like Paint are using a "large" ribbon to display all their available commands. Those ribbons display all the available commands in groups. Those groups can automatically be collapsed if there is not enough space available to display them all based on a priority order.

The toolkit already provides a "small" ribbon through the TabbedCommandBar (See https://github.com/CommunityToolkit/Labs-Windows/discussions/500 and https://github.com/CommunityToolkit/Windows/pull/243) but does not have any way to display the "large" ribbon.

Overview

This experiment adds the following components:

  • Ribbon the ribbon control.
  • RibbonGroup an always displayed group container.
  • RibbonCollapsibleGroup a group container which can be collapsed based on a priority order if there is not enough space available to fully display the group.
  • RibbonPanel a custom panel for the Ribbon to automatically expand or collapse the RibbonCollapsibleGroups
Using

You can try it out via the NuGet Packages here:

Read more about Preview Packages here.

Code
<Ribbon>
   <RibbonGroup Label="Selection" />
    <RibbonCollapsibleGroup Label="Edit" Style="{StaticResource RibbonLeftCollapsibleGroupStyle}" Priority="1">
        <!-- group content -->
    </RibbonCollapsibleGroup>
    <RibbonCollapsibleGroup Label="Shapes" Style="{StaticResource RibbonLeftCollapsibleGroupStyle}" Priority="2">
        <!-- group content -->
    </RibbonCollapsibleGroup>
</Ribbon>
Result

image
image

Additional info

The control comes with a list of predefined styles from its RibbonStyle.xaml file. All the different parts of the Ribbon should support light templating.

The RibbonLeftGroupStyle/RibbonRightGroupStyle and RibbonLeftCollapsibleGroupStyle/ RibbonRightCollapsibleGroupStyle can be used to add a separator before or after the group.

Implementation Requirements
  • Working Prototype
  • Feature Complete
  • Documentation
  • Samples
  • Unit Tests
  • Community Feedback / Usage Testimonies
Tested Platforms
  • UWP
  • WinAppSDK / WinUI 3
  • Web Assembly (WASM)
  • Android
  • iOS
  • MacOS
  • Linux / GTK
Technical Review
  • Accessibility Audit
  • API/Naming Review
  • Code Quality/Style
  • Dependency Review
  • Design/Style Review
  • Final Approval
Community Help?

Yes

Ngôn ngữ chính
C#
Star
484
Fork
89
Merge trung bình
2 ngày 18 giờ
Pull request đã merge (30 ngày)
1

Chuẩn bị môi trường

Mở trong Codespaces

Khởi chạy dev container của dự án ngay trên trình duyệt, bằng tài khoản GitHub của bạn.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của CommunityToolkit/Labs-Windows

Tất cả issue của CommunityToolkit/Labs-Windows

Issue tương tự

Thêm issue về C#

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.