CommunityToolkit / CommunityToolkit/Labs-Windows

🧪 [Experiment] Ribbon

Open
#545 0 comments 5 reactions 0 assignees View on GitHub
experiment :test_tube:
Dominant language
C#
Stars
482
Forks
89
PR merge metrics
No merged PRs in 30d

Description

### 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 **RibbonCollapsibleGroup**s

### Using

You can try it out via the NuGet Packages here:
- UWP: https://dev.azure.com/dotnet/CommunityToolkit/_artifacts/feed/CommunityToolkit-Labs/NuGet/CommunityToolkit.Labs.Uwp.Ribbon/overview/0.0.1
- WinUI 3: https://dev.azure.com/dotnet/CommunityToolkit/_artifacts/feed/CommunityToolkit-Labs/NuGet/CommunityToolkit.Labs.WinUI.Ribbon/overview/0.0.1

Read more about [Preview Packages here](https://aka.ms/wct/wiki/previewpackages).

### Code
```xml







````

### Result
![image](https://github.com/CommunityToolkit/Labs-Windows/assets/20152272/b612b83d-af9e-4722-b77a-b306f8114633)
![image](https://github.com/CommunityToolkit/Labs-Windows/assets/20152272/f8dab97b-3074-4b2e-9bbc-09d375e210f5)

### 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

- [X] Working Prototype
- [X] Feature Complete
- [X] Documentation
- [X] Samples
- [ ] Unit Tests
- [ ] Community Feedback / Usage Testimonies

### Tested Platforms

- [ ] UWP
- [X] 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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.