[Feature] Ribbon control

[XamDR]

Describe the problem this feature would solve

Nowadays there is no Ribbon control for UWP development, so in order to develop apps with a style similar to Office apps, one has to use workarounds like implement similar behavior with a TabView and/or a CommandBar. But this just make things more complicated than it should be.

Describe the solution

Therefore in order to make easier to develop Office style apps, a new Ribbon control should be added to the toolkit. I want to notice that this has also been proposed in the Windows UI Library GitHub repo, specifically in this issue, but there hasn't been updates on when this control will be implemented. On the other hand, the WCT has usually been a pioneer in adding new controls and APIs that eventually are ported to the Windows UI Library, so I think this could be a similar case.

I also want to notice that there is already a Ribbon control for WPF, so in order to have relatively easy migrations, the future Ribbon for UWP should have a similar API to the WPF one. For that matter, the source code of the WPF Ribbon control is available here.

Describe alternatives you've considered

Currently the only solution in order to have a true Ribbon control in UWP apps is actually to develop a WPF app and then add UWP controls through XAML islands. This is not ideal because there is always some issues when mixing different technologies. Even if the opposite would be true (i.e., add WPF controls to UWP apps, which is not possible as far as I know), the issues with interoperability would persists somehow.

Additional context & Screenshots

Here I'd like to share some screenshots:

[ghost]

Hello, 'XamDR! Thanks for submitting a new feature request. I've automatically added a vote 👍 reaction to help get things started. Other community members can vote to help us prioritize this feature in the future!

[michael-hawker]

Thanks @XamDR for the issue. I know there's been a revival of this discussion lately. I can sync more with the WinUI folks about this topic, I know they're busy with WinUI 3, so that's why not as many of the new control requests are getting funded at the moment.

A port of the WPF one at least could be an interesting starting point though. 🤔

[yoshiask]

I started creating a Ribbon control for the WCT at yoshiask/UWPRibbon. If you're interested in helping build or test a potential Ribbon control, you should check it out!

[yoshiask]

I wrote this comment on the WinUI Ribbon proposal, I hope it's of some use while we figure out what features we want for a UWP ribbon. microsoft/microsoft-ui-xaml#168 (comment)

[michael-hawker]

@yoshiask let's sync middle of next week sometime and see where you're at and where we should be heading. I think there's something we could do in this space, but we should make sure we're aligning with future design directions too.

[shaheedmalik]

Here's how the one in Word Mobile looks.

[mdtauk]

Mock ups I have posted in previous issues.

[shaheedmalik]

Here's a mockup I did in the other thread.

I'd like to see it tie in more with the other UWP designed apps with the back buttton, share button, profile, search, etc. Here's an example of those tied in.

[misuo]

Side question: Which tool/app have you used to create these mockups?

Mock ups I have posted in previous issues.

[mdtauk]

@misuo I did those in Photoshop - I'd do them in Figma today though

[skendrot]

The mockups by @mdtauk and @shaheedmalik and the Word version all seem like they can be achieved with a tab and menu bars. Is this something we need a full control for?

[mdtauk]

The mockups by @mdtauk and @shaheedmalik and the Word version all seem like they can be achieved with a tab and menu bars. Is this something we need a full control for?

• Common resize behaviours and layout adjustments;
• Contextual tabs;
• UI Commands;
• Applying altered control templates for controls within a ribbon;
• Consistency between apps and Office;
• Easing of the transition from Win32 to WinUI;
• WPF and MFC parity;

Just a few reasons

[shaheedmalik]

• Consistency between apps and Office;
• Easing of the transition from Win32 to WinUI;
• WPF and MFC parity;

These three are huge.

[XamDR]

The mockups by @mdtauk and @shaheedmalik and the Word version all seem like they can be achieved with a tab and menu bars. Is this something we need a full control for?

As I said at the beginning of my post, sure you can use a TabView with a Command/Menu bar, but that's just a workaround and not a real solution. On the other hand, I don't think I have anything to add to what @mdtauk wrote earlier. The last 3 reasons are important enough, IMO, to have a full Ribbon control.

[yoshiask]

For anyone who may not have seen it yet:
Part of this feature request is implemented in PR #3556 (specifically, the TabbedCommandBar). There's still a lot to do even for just this simpler ribbon control, but a lot of it should be reusable in the full ribbon control.

The build pipeline is currently broken, but once it's fixed you should be able to install a preview build of the Toolkit and test it out for yourself!

[yoshiask]

Here's what it looks like so far. The default background brushes are based on the very last design that @mdtauk shared (they can be changed if the dev doesn't plan on extending into the title bar, but I suspect most who use this control will).

[michael-hawker]

@yoshiask the pipeline is fixed, if your CI builds properly in the CI then a package will drop on the new Preview Package feed.

[yoshiask]

Has anyone tried using the TabbedCommandBar preview yet? I'd like to gauge which features/fixes are required for an initial release of this control in v7.0. I've attached where it currently stands with regard to the initial WinUI proposal. I intend to at least finish the drop-in styles for SplitButton and ToggleButton, but anything else would likely mean missing the 7.0 release.

My question to you all is would you rather have a very limited ribbon in the next release, with continued updates later, or skip 7.0 and wait until it's more fleshed-out?

[mdtauk]

@yoshiask You may want to keep an eye on this spec.
microsoft/microsoft-ui-xaml-specs#108

[XamDR]

Has anyone tried using the TabbedCommandBar preview yet? I'd like to gauge which features/fixes are required for an initial release of this control in v7.0. I've attached where it currently stands with regard to the initial WinUI proposal. I intend to at least finish the drop-in styles for SplitButton and ToggleButton, but anything else would likely mean missing the 7.0 release.

My question to you all is would you rather have a very limited ribbon in the next release, with continued updates later, or skip 7.0 and wait until it's more fleshed-out?

In my opinion this initial version of the control is a good starting point to have a more feature complete Ribbon in the future, so I think it would be great to include it in the 7.0 release and to continue improving it in next versions of the toolkit. I also would like to contribute reporting any bugs or giving some suggestions while I use the control in one of my projects.

[dpaulino]

@yoshiask does your implementation use a NavigationView? If so, was pivot considered as well? I'm testing out your pr and the current implementation doesn't seem as smooth as in my Nightingale app. And Nightingale just uses a pivot.

[yoshiask]

@dpaulino I did consider using a Pivot, and early iterations of the control actually used one, but I ultimately decided not to use it because it's not very flexible. With a NavigationView, I can add tab footers and headers, easily change styles, hide the content, and customize animations. While possible with a Pivot, it'd be much more difficult, and near impossible for a full Ribbon control down the line.

[yoshiask]

Also, could you expand on what made it feel less smooth?

[mdtauk]

The pivot control definitely needs some upgrades, and this is another example of how dull, static, and inflexible it is to use.

[dpaulino]

Also, could you expand on what made it feel less smooth?

@yoshiask After looking into it more, it seems that less smooth feeling was caused by the sudden disappearance of the item content's background when switching tabs. If one were to set the background to transparent, the less smooth feeling is gone.

So in other words, ignore what I said about it being less smooth 😛 It was just an artifact of the animation, and not necessarily an issue with the navigation view control.

[yoshiask]

Also, could you expand on what made it feel less smooth?

@yoshiask After looking into it more, it seems that less smooth feeling was caused by the sudden disappearance of the item content's background when switching tabs. If one were to set the background to transparent, the less smooth feeling is gone.

So in other words, ignore what I said about it being less smooth 😛 It was just an artifact of the animation, and not necessarily an issue with the navigation view control.

Ah, yeah, that's a styling bug I haven't figured out how to fix without ugly stuff in the codebehind.

[michael-hawker]

🦙❤ Woot! This is so exciting to see be part of our next release. It'll be in our upcoming preview too. Excited for folks to try this out! Thanks @yoshiask!