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?)

[mdtauk]

The Ribbon control was mentioned at Build, as something coming to XAML in 2019. Of course the data validation for text fields was delayed, so who knows if any work has begun on it.

Office UWP apps would be a good guide to implementing it - in fact if the Office UWP team were to commit their work, it would be something to build off.

However the Ribbon shows up in UWP, it needs to be consistent from app to app. Implement UICommands as with CommandBarFlyouts and ApplicationBars. Be responsive for device type, and window size. And perhaps some thought about how to integrate visually with an extended Title Bar and the Sets Tab.

[adambarlow]

@mdtauk
Yes, we mentioned it at Build and continue to move the conversation forward, which includes this feature proposal.

I agree that we will want to ensure it's consistent app to app and that it is responsive to screen size and all input modalities. I am working closely with Office and intend for the designs to align as much as possible.

So i am sure, what are you referring to specifically when you say extended Title Bar and the Sets tab?

[mdtauk]

@mdtauk
Yes, we mentioned it at Build and continue to move the conversation forward, which includes this feature proposal...

...So i am sure, what are you referring to specifically when you say extended Title Bar and the Sets tab?

I hadn't realised this was an official proposal, as in you are someone at Microsoft beginning the process, and just wanted to ensure there was not cross purposes, like a third party proposing a Ribbon, whilst an official one was being made. No offence intended. :)

The Ribbon usually is set to the top of the window in which it is placed. Many apps extend their app into the TitleBar area to give a cleaner UI and use Acrylic. And then there is Sets which will someday replace the default TitleBar experience in UWP apps.

The Windows 7 and right back to the original implementation of the Ribbon UI, custom drew the Titlebar for the window they were in, but those Windows Vista/7 Ribbons need not dictate the new implementation of it - and UWP apps have different ways of handling the window chrome.

When developing a design for the UWP Ribbon, and devising how it is recommended for use in an App's UI - the fluent team should consider how it will look and work in both of those scenarios (extended title bar and within the tab used by Sets), as well as while using the current default TitleBar, and a coloured TitleBar.

Rather than just designing the control in isolation, from how it fits in with the rest of the App UI, Window Chrome, and the OS Shells.

[adambarlow]

@mdtauk, don't worry, absolutely no offense taken. Thanks for the clarifications and the explanation. I agree completely and I'll work on a way to ensure this goal is included in the proposal as we continue to flesh it out in more detail.

[mdtauk]

For what it is worth, here are my initial thoughts on how you would integrate the Ribbon with the various combinations of TitleBars you would get.

If these were to be considered, the Tab Bar, and the Tool Bar would each need their own Background Brush property, which would allow both to use the same colour/acrylic - or different ones.

And for comparison, here are other design patterns in Sets and Extended Titlebars.

[contextfree]

Win32 Office ribbon (including the single-line version in Outlook) also supports browsing through tabs using the mouse scroll wheel. This is something I miss in the OneNote UWP ribbon, which doesn't support it; it somewhat replicates the browsability of traditional menu bars, where you can hold the mouse conveniently "scrub" through the menus to see all the commands available. If it were expanded to also support horizontal scrolling with two-finger touchpad or swiping with touch, it would also be more consistent with the Pivot model, which the ribbon now resembles visually with its current design.

[contextfree]

Collapsed-mode ribbon (where the tab contents are hidden by default and appear transiently on demand on click) is another aspect of most of the various existing ribbon implementations not explicitly called out in the requirements. UWP OneNote, Win32 Office (including Outlook's one-line version), Windows ribbon all support some form of this (with various ways of toggling it - double-click on a tab, expand/collapse button, dropdown menu in the title bar).

It does work differently in UWP OneNote than in the Win32 implementations though - instead of a persistent mode, it's just a way to temporarily collapse an existing tab by tapping/clicking on it again. While this isn't as important with the single-line ribbon as it was with the full-height version, I still have found it handy to collapse sometimes while using OneNote on smaller screen sizes. Is it a decision to not include this or just not gotten to it yet?

[mdtauk]

Collapsed mode would make a lot of sense, and the NavigationView / SplitView control does this already for the sidebar when in collapsed and overlay modes.

There could be a property like DisplayMode for the Ribbon. With options like Expanded, Minimal, Collapsed and when it is set to collapsed, only the tabs are displayed permanently, and the toolbar appears when an item is pressed, with a light dismiss interaction.

I would like to suggest that if it is set to collapsed or minimal - that a chevron be added to the right of the tabs, to toggle it into view.

[TiredTrident]

@adambarlow How easy will it be to try to invoke the ribbon animation/content changes, when the app context changes, rather than the tab? For example, what has been seen in Outlook with the Email/Meetings/Contacts button that changes the ribbon contents but not the tab.

[adambarlow]

When you say it changes the Ribbon contents, you mean the contents of the tabs themselves? I don't quite understand the scenario you are describing. What's an example of the context switch you are describing?

[TiredTrident]

Sorry for the confusion @adambarlow . If I was looking to develop an application where the context referenced in the main window could change, would it possible to push an event to swap the contents of the Ribbon to match the new contents?

For example, when using Outlook and I switch from the email page to my calendar, the contents of the Home tab on Ribbon change swap with an animation.

[adambarlow]

Yes, good point. This certainly should be possible. I'll include this in the requirements section.

[mdtauk]

When I mentioned contextual tabs, I am referring to these...

@TiredTrident What it sounds like is the ribbon being swapped with a different one depending on the workflow. Is this a feature of the ribbon, or just replacing one ribbon with another?

[mdtauk]

Good luck @adambarlow with making this control a reality. Hopefully the Office team will be able to help, as well as getting the Windows teams on board, for that one day in the future re-write of File Explorer which may have need for it. 😆

[lukeblevins]

I'm no XAML expert, but we could base the Ribbon control off a custom TabView that contains a CommandBar as TabContent. Further, the selection indicator should have CornerRadius. I managed to recreate this control in my own app if anyone is interested.

[lukeblevins]

Another "nice-to-have" is the ability to collapse the ribbon.

[lukeblevins]

@adambarlow Developers should also have access to guidelines regarding how to differentiate the Ribbon from the rest of the UI. For instance Z-depth, background colors, acrylic?

[YuliKl]

@adambarlow Developers should also have access to guidelines regarding how to differentiate the Ribbon from the rest of the UI. For instance Z-depth, background colors, acrylic?

@duke7553, you're absolutely right. When this control is implemented (we're a little busy working on WinUI 3.0 at the moment), it will incorporate the styles into its default template. Are you noting this need because you want to incorporate into your custom control?

[lukeblevins]

@YuliKl I was just trying to ensure the makeshift XAML ribbon I created was in-line with Fluent Design guidelines, so I'll be anxiously awaiting the official WinUI ribbon control.

[YuliKl]

@duke7553, while I don't yet know what colors the ribbon control will use, I'm fairly confident in saying that it won't use acrylic or shadow, at least not in its non-transient pinned state. Shadow is designed to show elevation (which the ribbon doesn't have relative to the rest of its parent page), and acrylic is for temporary UI surfaces.

[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.
CommunityToolkit/WindowsCommunityToolkit#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...
CommunityToolkit/Windows#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.