Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

🧪 [Experiment] Ribbon

オープン
  • 何か問題がありますか？
#545 コメント 0 件 リアクション 5 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
5/5
見積もり時間
1週間以上
初心者へのやさしさ
25/100
issue の種類
機能追加
明瞭さ
おおむね明確
活発さ
停滞
技術スタック
csharp
領域
desktop-dev, frontend

調査の方向性

まず、Ribbon、RibbonGroup、RibbonCollapsibleGroup、RibbonPanel の各コンポーネントと、それらの RibbonStyle.xaml ファイルを探します。Issue では、単体テスト、コミュニティからのフィードバック、技術レビューが未完了として示されています。完了するには、WinUI 3 の実験について残りの領域に対応する必要がありますが、テストファイルや具体的なエントリポイントは指定されていません。

索引モデルが issue の本文から書いたものです。

説明

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

主要言語
C#
スター
485
フォーク
89
平均マージ
1日 11時間
マージ済み PR（30日）
3

環境構築

Codespaces で開く

このプロジェクトの開発コンテナを、あなたの GitHub アカウントでブラウザ上に起動します。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

CommunityToolkit/Labs-Windows のほかの issue

CommunityToolkit/Labs-Windows の issue をすべて見る

似ている issue

C# の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。