Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New office theme #957

Open
korneliuscode opened this issue Jun 30, 2021 · 26 comments
Open

New office theme #957

korneliuscode opened this issue Jun 30, 2021 · 26 comments

Comments

@korneliuscode
Copy link

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
Copy link
Member

batzen commented Jun 30, 2021

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.

@batzen batzen added the Question ❓ Not an issue but a question instead. label Jun 30, 2021
@nlogozzo
Copy link

@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
Copy link

And if not fully this:
image

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

@jonasnordlund
Copy link

jonasnordlund commented Jun 1, 2022

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
Copy link
Member

batzen commented Jun 1, 2022

@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.

image

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
Copy link

nlogozzo commented Jun 1, 2022

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

@jonasnordlund
Copy link

jonasnordlund commented Jun 2, 2022

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
Copy link

kevwkev commented Jun 19, 2022

image

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

@batzen
Copy link
Member

batzen commented Jun 16, 2023

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

image

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 dotnet/wpf#7813

@nlogozzo
Copy link

nlogozzo commented Jun 16, 2023

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

@kevwkev
Copy link

kevwkev commented Jun 16, 2023

Just as an update.

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

What do you guys think?

image

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 dotnet/wpf#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
Copy link
Member

batzen commented Jun 16, 2023

Will start working on this after my vacation.

@batzen batzen added Styles Breaking Change 😨 and removed Question ❓ Not an issue but a question instead. labels Jun 16, 2023
@batzen batzen self-assigned this Jun 16, 2023
@nlogozzo
Copy link

after my vacation.

Enjoy :)

@kevwkev
Copy link

kevwkev commented Sep 20, 2023

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
Copy link
Member

batzen commented Sep 21, 2023

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 batzen pinned this issue Mar 21, 2024
@batzen
Copy link
Member

batzen commented Mar 21, 2024

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

@korneliuscode
Copy link
Author

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

@batzen
Copy link
Member

batzen commented Apr 21, 2024

@korneliuscode Mica effect will follow next. 😁

@korneliuscode
Copy link
Author

Oh, that would be great!!

@batzen
Copy link
Member

batzen commented May 1, 2024

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

@korneliuscode
Copy link
Author

I like it a lot. Thanks for adding!!

@nlogozzo
Copy link

nlogozzo commented May 1, 2024

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

@batzen
Copy link
Member

batzen commented May 4, 2024

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
Copy link

d-griet commented Jun 3, 2024

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
Copy link
Member

batzen commented Jun 8, 2024

@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
Copy link

kevwkev commented Jun 23, 2024

@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.
Screenshot 2024-06-23 at 9 54 23 AM
Screenshot 2024-06-23 at 9 55 45 AM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants