XAML Ribbon

[adambarlow]

Proposal: XAML Ribbon

Summary

tl:dr; Provide a Ribbon control for XAML apps which utilizes recent advancements in XAML commanding infrastructure, which is simple to implement and simple to interact with.

Since the release of the ribbon in Microsoft Office products in 2007 it has been a successful and frequently imitated commanding paradigm. It's success is demonstrated in the many implementations in frameworks on various platforms, as well as the ongoing requests for it's inclusion in WinUI.

This proposal details the creation of a simplified single-row Ribbon control, which can natively host XAML controls with great styling out of the box. This ribbon control will be familiar to those who have worked with the commandbar control and will allow for apps with more advanced commanding capabilities than are currently possible with XAML.

Rationale

Implementing a XAML Ribbon will provide the following for the community:

1. Allow for the creation of apps that scale to have offer many commands to users (e.g sophisticated apps with more commands than comfortably fit in, say, a current XAML commandbar)
2. Provide users with commanding UX which is familiar, usable, and coherent with what they see across other apps on Windows (e.g. Microsoft Office)
3. Provide a commanding surface that complements our existing suite of XAML commanding assets (e.g. button, ToggleButton, SplitButton, XamlUICommand, StandardUICommand, CommandBarFlyout, CommandBar, Menubar, etc.)

Terminology

• Ribbon A set of toolbars that are grouped by tabs
• QAT "Quick Access Toolbar" a small group of commands in the Ribbon which always stays around no matter which tab currently has focus
• Contextual Tab A tab of commands representing actions that are available only because of the current app context
• File Menu A section of the Ribbon which contains commonly used commands that refer to the document in general or the app in general. Commonly used for, "open, save, close, etc."
• Chunk A sub-section of a given tab. These can be named and are separated by vertical separators
• Overflow An area which contains commands that do not fit in the currently visible ribbon tab

Functional Requirements

#	Feature	Priority	Wave
1	Basic Ribbon tabbing experience (e.g. a tabbed set of command bars)	Must	0
2	Animation when switching tabs	Should	1
3	Contextual tabbing support	Should	1
4	Support for overflow of items (one per tab)	Must	1
4.1	Ability for the end-user to add and remove items from the overflow	Could	2
4.2	Split or dropdown buttons in the overflow have cascading menus	Should	1
4.3	Overflow area organized by the ‘chunk’ commands came from	Could	2
5	Supports resize behavior (e.g. losing labels, dropping commands into the overflow for each tab on window resize	Should	1
5.1	Support for mandatory text labels	Should	1
6	Optional built-in menu for ‘File Menu' (a contextflyout hosted in the ribbon for commands like Save and Open)	Should	1
7	Support for a QAT menu for frequently used commands	Should	1
7.1	Ability for end-users to add / remove items from the QAT	Could	2
8	Able to host a set of commonly used controls in the control without the need to style them (drop in support) List: - Button - Split Button - DropDown Button - Combo-box - Toggle Button	Should	1
9	Ability to host arbitrary XAML (developer would not get styling for free)	Should	1
10	Supports icon only commands	Should	1
11	Integrates with XamlUICommand registry (when developed)	Could	1
12	Built-in search bar across XamlUICommand registry	Could	2

Open Questions

• What is the object model for Ribbon (is it multiple command bars in a tabbing control? QAT as a separate commandbar, file menu as a MenuFlyout?)
• How do we achieve the drop in styling? (is it an interface, like IRibbonStylable that Button, DropDownButton, etc. implement?)

[adambarlow]

@yoshiask , it's been a long time since I wrote this. But I believe that I meant that the ribbon author should be able to force an item to display a text label if they want, instead of an icon.

@trsht-tmyk , this control doesn't yet exist, so sadly it's not available to open source or use.

[michael-hawker]

Thanks @adambarlow, @yoshiask I think you support the labels already as you're just using the standard CommandBarItem, eh?

@trsht-tmyk we have a PR for this open by Yoshi on the Windows Community Toolkit here: https://github.com/windows-toolkit/WindowsCommunityToolkit/pull/3556

You can find out about pulling a preview NuGet of it from our preview feeds here: https://github.com/windows-toolkit/WindowsCommunityToolkit/wiki/Preview-Packages - Would love any feedback you have on it as we continue development. We'll hopefully ship this as part of our upcoming 7.0 release.

[yoshiask]

@yoshiask I think you support the labels already as you're just using the standard CommandBarItem, eh?

I don't, precisely because I'm using a standard CommandBar. The AppBarButton template(s) assume that you'll always have both a label and an icon, not one or the other. As a result, if you only use a label or icon, the content of the button will be off-center.

I think I can fix this, but I would have to duplicate the template and switch it from hardcoded margins to ColumnSpacing

[ad1Dima]

@adambarlow why did you close this?

[adambarlow]

@ad1Dima mistaken button press. Thank you.

[0x5bfa]

@adambarlow thank you for your answer. So did you mean that this image was created in photoshop or something?

Isn't this image also a uwp app?

[0x5bfa]

I'm thinking of creating software that extends word with uwp so that I can experience more experiences. I would like to make a ribbon that can be folded like a split view like onenote for windows 10.

The tabbedcommandbar is a good control to achieve this, but it doesn't allow you to display two lines without expanding, and it's far from being achieved using it.

Like this

This image is powerpoint ribbon. In this image, multiple controls are lined up vertically in the command bar. Since word app has many functions, we have to increase the number of controls. Therefore, I would like to add or turn on such a function.

[mdtauk]

@trsht-tmyk Those images are mock-ups for how a UWP Ribbon could look, if it were to be made.

[0x5bfa]

Well...., what control is used to create the ribbon-like appearance of onenote for windows10? Also, does it mean that it is impossible to create with navigation view / split view etc.? I'm so so sorry I'm ignorant.

[mdtauk]

Well...., what control is used to create the ribbon-like appearance of onenote for windows10? Also, does it mean that it is impossible to create with navigation view / split view etc.? I'm so so sorry I'm ignorant.

I think Office created a custom control for their UWP apps. There may be a similar control coming to the Community Toolkit. https://github.com/windows-toolkit/WindowsCommunityToolkit/pull/3556

[michael-hawker]

Wanted to call out that we have the TabbedCommandBar that we shipped in the 7.0.0 version of the Windows Community Toolkit.

[Shomnipotence]

unbeliveable that it is 2022, today , we still cannot have it

[adambarlow]

Thank you all for the feedback given. I am closing this issue as it's not currently in our roadmap to invest in this feature. However, please see the TabbedCommandBar linked above by Michael in the Windows Community Toolkit.

[thatsofia]

I'll go out on a limb here and say that Paint in Windows 11 and OneNote do not use TabbedCommandBar from the Windows Community Toolkit.

[kmgallahan]

@adambarlow Should you inform @andrewleader so he can remove it from the productboard page that links this issue?.

[adambarlow]

@kmgallahan, I don't think that is necessary. You'll notice on that page that this is marked as on the 'backlog', and this feature was previously marked in the freezer. I am not saying that this feature will never be built, just that it's not currently being developed. I just want to set expectations correctly.

[soroshsabz]

ITNOA

@adambarlow How to choose feature for your roadmap? this feature has many votes here and 31 votes on https://portal.productboard.com/winappsdk/1-windows-app-sdk/tabs/7-backlog

[mdtauk]

Someone should speak to the people who updated the Paint UI, because they have the basis for a XAML Ribbon control. If it can be generalised to be flexible, and possibly add a Compact mode in a similar vein to the Office's Simplified Ribbon.

[michael-hawker]

The simplified ribbon is basically the TabbedCommandBar we have in the Toolkit. @Niels9001 not sure if this has come up with your discussions with the design team. Not sure what the current modern guidance is here? I think that's certainly why we went with looking at the more simplified experience over trying to create the larger ribbon experience, as I think the direction has been towards the simplified pattern, eh?

[niels9001]

The simplified ribbon is basically the TabbedCommandBar we have in the Toolkit. @Niels9001 not sure if this has come up with your discussions with the design team. Not sure what the current modern guidance is here? I think that's certainly why we went with looking at the more simplified experience over trying to create the larger ribbon experience, as I think the direction has been towards the simplified pattern, eh?

Not specifically.. I agree that the simplified ribbon and the TabbedCommandBar have a lit in common. Would be worthwhile to port this over and making sure we adopt the latest W11 styling and make sure we come close to what is shown in Office/Paint!

[mdtauk]

If there was to be an option for a Full and Simple Ribbon, perhaps you could use a Tag on the "important" controls, and the others move to an overflow when in the Simple mode?

But there are two examples of Ribbon like experiences that can inform the design spec. The Fluent 2 Web kit seems to be the best official Guidance available for Toolbar designs in Fluent. I would imagine the Paint team did their own design spec, as would have Office.

Posting this link as cross reference... https://github.com/CommunityToolkit/Windows/issues/93

[yoshiask]

The simple ribbon is way simpler than the full ribbon, I would implement them as completely separate controls.

[mdtauk]

The simple ribbon is way simpler than the full ribbon, I would implement them as completely separate controls.

Two separate controls makes it harder for devs to offer the user the choice. Its the same set of tools, just presented differently.

[yoshiask]

I understand that, but again they are very different controls. For one, the full ribbon has button layout options that the simple one just doesn't support. The "simple ribbon" really is nothing more than a command bar in a navigation view. Making the simple and full ribbon the same control would require completely rebuilding the simple one as well.

[mdtauk]

I understand that, but again they are very different controls. For one, the full ribbon has button layout options that the simple one just doesn't support. The "simple ribbon" really is nothing more than a command bar in a navigation view. Making the simple and full ribbon the same control would require completely rebuilding the simple one as well.

But with a simple tag or property on the buttons, you could set which ones appear in the Simplified view, and the others move to the flyout.