New office theme

[korneliuscode]

Hi, Are there any plans to support the new office theme?

Here is more detail on it: https://insider.office.com/en-us/blog/visual-refresh-of-office-apps-for-windows

[batzen]

Hi, the simplified styles are currently develop in #924. After that is done i will have a look at the changes Microsoft made and decide which changes in will adopt for Fluent.Ribbon. The community of Fluent.Ribbon will then have to decide which path is taken. As i won't, ever again, maintain completely different themes (rounded corners etc.). I did that for years with the Office 2010 and 2013 themes and it was way too much work. So the decision will have to be made if everything is changed to the new styles or if we find a good looking middle ground between the current theme and the new theme.

[nlogozzo]

@batzen I think it's time to address this. With Windows 11 here with its new styles and the new office refresh in effect, I feel like moving Fluent.Ribbon to this new rounded and visual style will greatly modernize our WPF apps and allow us to keep in touch with Windows 11's design.

[nlogozzo]

And if not fully this:

Then maybe something like this for a visual refresh of this library:

[jonasnordlund]

I understand if this is a lot of work but I don't think these refreshed Windows 11 styles are going away anytime soon and this would make Fluent.Ribbon a great pairing with other "modern WPF" projects like WPFUI or ModernWPF. So I think it could at least be time well spent!

[batzen]

@jonasnordlund @nlogozzo I don't fully get the differences to the current design. The only thing that stands out is the massive amount of wasted space around the ribbon groups and the gigantic titlebar height.

What should change in the ribbon:

• Foreground color should be pure white/black
• No border around collapsed groups
• Colored "underscore" on selected tabs instead of connected background color

What might be added to the ribbon:

• Rounded corners (if enough people request it and if we/i find a way that's not a maintenance horror)

What's already part of v 10:

• Native window border color (on win 11)
• Rounded window borders (on win 11, can be adjusted or turned off)
• Snap menu on maximize button

What else should change?

[nlogozzo]

I think you hit the nail on the head with what should change. Just a little refresh similar to this: Especially, Colored "underscore" on selected tabs instead of connected background color and just more roundness in general

[jonasnordlund]

Yes, no need for overwhelming changes, really? Font face should give priority to Segoe UI Variable, I think? Or does Fluent.Ribbon already use that on Windows 11? Potentially animated ribbon focus indicator changes (I don't remember if "New Office" has this but Windows 11 in general does) as a stretch goal. Title bar and ribbon group padding could perhaps be configurable to cater for both compact and Microsoft style preferences (Windows 11 in general tend to have greater title bar paddings, like its Settings app). In fact, WinUI has a compact style that could perhaps be a borrowed idea for a single setting that adjusts it all between tradition and "modern".

[kevwkev]

FYI: The "Ultimate UI for WPF" components from Infragistics also has a slick looking ribbon.

[batzen]

Just as an update. I tried a few things and the current result doesn't look that bad. What do you guys think?

Using Segoe UI Variable or using Variable fonts in general is not possible in WPF as of now. But support for it is listed in https://github.com/dotnet/wpf/issues/7813

[nlogozzo]

Looks great! Maybe if the separators between groups (Clipboard, Font, etc...) can be more "defined" as they are here in the Word screenshot:

[kevwkev]

Just as an update.

I tried a few things and the current result doesn't look that bad.

What do you guys think?

Using Segoe UI Variable or using Variable fonts in general is not possible in WPF as of now.

But support for it is listed in https://github.com/dotnet/wpf/issues/7813

This looks impressive already! Can't wait to see it in Simplified mode as well. To further enhance it, I have a few suggestions. As @nlogozzo mentioned, it would be great if the separator could be more defined or offering an option to adjust its color. This would add clarity and customization to the visual experience. Secondly, matching the width of the underline with the tab item header text will create a cohesive and balanced look. Lastly, increasing the margin for the buttons or providing an option to adjust the button's margin would improve spacing and readability. With these refinements, I believe we can achieve a sleek and modern style that truly stands out!

[batzen]

Will start working on this after my vacation.

[nlogozzo]

after my vacation.

Enjoy :)

[kevwkev]

Hey @batzen, I'm curious if there have been any updates regarding the new office theme. Could you consider sharing it on a new branch so that we can give it a test run?

[batzen]

I have a branch for that, but forgot to push it. Will do that during the weekend. If it's still not there after the weekend feel free to remind me again 😉

[batzen]

The changes are now in the develop branch. Would be nice if you could provide feedback. @kevwkev @nlogozzo @jonasnordlund @korneliuscode @GeertvanHorrik @robertmuehsig

[korneliuscode]

Thanks @batzen , i looked at it and think its looking pretty neat!

[batzen]

@korneliuscode Mica effect will follow next. 😁

[korneliuscode]

Oh, that would be great!!

[batzen]

@korneliuscode I added Mica last week. Would love to hear your feedback.

[korneliuscode]

I like it a lot. Thanks for adding!!

[nlogozzo]

I'm not able to test this right now... could we get some screenshots of what it looks like?

[batzen]

You can always grab the latest CI build, including the showcase application, from https://ci.appveyor.com/project/batzen/fluent-ribbon/branch/develop/artifacts

[d-griet]

You can always grab the latest CI build, including the showcase application, from https://ci.appveyor.com/project/batzen/fluent-ribbon/branch/develop/artifacts

I've been using the latest develop branch for some time now, it seems to work without issues. Really like the new office theme and the Mica theming options. Are you planning on creating a new release anytime soon?

[batzen]

@d-griet Will release a preview version to nuget later today. Not sure about the final release. But i guess, depending on the feedback on the preview version, in about 2 months.

[kevwkev]

@batzen Thank you for refreshing the UI; it looks fantastic. However, I believe there are some improvements that could make it more closely resemble Microsoft's official implementation. I came across an open-source library, Coho.UI https://github.com/sebbouez/Coho.UI, which has a very polished appearance of the ribbon control. Could you take a look at it and consider borrowing some ideas? Specifically, its handling of mouse-over highlights with rounded corners, button spacing, and the transparency of the background when a tab is selected. Honestly, it is the only open-source UI library I've found that closely replicates the official Microsoft version. Thank you again for all your hard work! Below are some screenshots of Coho.UI’s ribbon for reference.