Ribbon theme/colors

Ribbon for WPF Forum

Posted 10 years ago by Mick
Version: 10.1.0520
Platform: .NET 3.5
Environment: Windows 7 (32-bit)
Avatar
When I change the system colors, the set of colors that is applied to the ribbon control is different than what I would expect:

Steps to reproduce:
1) Create an app with a ribbon
2) Change the system colors

Here are screenshots showing the results from a sample app and from Office 2010:

Sample app:

Default Windows 7
High Contrast

Office:

Default Windows 7
High Contrast

Where is the gray metallic color in the Actipro ribbon is coming from?

I'm not going to cross-post in the Docking/MDI forums, but the document tabs are picking up the global/correct theme (black/green/yellow, etc.).

Is there something I need to do to get the ribbon to inherit its styles from the system default?

Thank you,
Mick

Comments (7)

Posted 10 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar
Hi Mick,

When using the High Contrast Windows theme, the Ribbon will load it's Classic theme. Classic uses the system colors, which in this case is one of the "Control*" colors. You can view the current system colors from our Sample Browser's Color Browser (under the General section). I've added a TODO item for adding a theme to Ribbon that is customized for High Contrast themes.


Actipro Software Support

Posted 10 years ago by Mick
Avatar
Thank you,

I appreciate the feedback, but the real issue here isn't that I want to use "High Contrast" as a theme in my application. I used that particular color scheme because it makes for a good example.

The issue is that Actipro doesn't seem to pick up the system colors correctly. This is even the case in the sample browser.

Here are screenshots of that the sample browser thinks the "System Colors" are and what Visual Studio thinks those same colors are (these are both using the Windows Classic theme):

Windows Standard colors (everything lines up correctly):

Actipro Sample Browser
Visual Studio (or any other software with a system color picker)

High Contrast colors (Actipro doesn't pick up the system color changes):

Actipro Sample Browser
Visual Studio (or any other software with a system color picker)

How can I make Actipro to recognize the correct system colors when no theme is applied to the ribbon strip (just to clarify, I don't care about "High Contrast" specifically - I care about matching the system colors, regardless of the system color scheme)?

Mick
Posted 10 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar
Hi Mick,

We are simply leveraging the WPF SystemColors, which is what the Color Browser shows you. If you change the system theme while the application is running then WPF isn't very good at (if at all) updating the SystemColors. If you reference the Color or Brush directly, then it will never be updated, so neither your application or our controls can get updated colors.

If you restart our Sample Browser, then goto the Color Browser then it will show the updated colors, as WPF was restarted. So in general, if the user changes their color scheme, then your application would need to be restarted.


Actipro Software Support

Posted 10 years ago by Mick
Avatar
Thank you for clarifying. I confirmed that the sample browser updated the system colors accordingly.

While system colors may be mapped correctly into Actipro brushes, the issue now is that Actipro does not seem to map the system brushes correctly* into the ribbon strip colors, even after an application restart.

Reiterating my first post regarding the "high contrast" color scheme:Half of my Actipro example is working as expected in regard to the color scheme (the document tabs), while the other half (the ribbon strip) is not.

* by correct/intuitive, I mean that the color choices for the application's controls are readily obvious when compared to the current system colors

(Note: In response to the 2nd post in this thread, I don't care about the high contrast color scheme - it's just convenient color scheme for examples because it's so different from standard color schemes).

Please advise,

Mick
Posted 10 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar
Hi Mick,

I see what the problem is. We do have a Ribbon High Contrast theme, that should work better for your needs. I incorrectly assumed that WPF would load that, if the system theme was High Contrast. You should be able to use the High Contrast theme even when the system theme is Classic/Luna/Aero/etc, as it just uses system colors. The Ribbon's Classic/Luna/Aero/etc themes use system colors also, but uses those colors to create gradients and uses different colors than the High Contrast theme.

If you open the "SampleBrowser\MainControl.xaml" file in our Sample Browser and search for "High Contrast" you can uncomment the associated menu item to see it in action. Run run the Sample Browser and select the High Contrast menu option.


Actipro Software Support

Posted 10 years ago by Mick
Avatar
There seems to be some confusion about whether I care about the "High Contrast" color scheme. I do NOT care about the "High Contrast" color scheme. I care about matching the sytem color scheme. The system color scheme can be changed. I want the ribbon to change as well.

Because the "High Contrast" color scheme seems to be where we are having a disconnect, I will leave it out of the examples in this post.

I made a sample app, and changed my system colors. My application updated. This is what I want to have happen to Actipro:

Step 1: Open original application, note colors
Step 2: Open system color settings and change them: Part 1 (select base theme), Part 2 (customize): original / modified
Step 3: Note that sample application colors have changed

My concern is why Actipro does not work the same way, yet nearly every other Microsoft product does (Office 2007 is one of few exceptions).

---To reiterate---

What I care about:

  • Matching system colors
What I do NOT care about

  • The "High Contrast" color scheme
Part of the confusion may come from you (Actipro) thinking I need a "High Contrast" template. I do not need this template.

If you match the system colors with something like
Background="{DynamicResource {x:Static SystemColors.DesktopBrushKey}}"
(swapping for the correct brush) then by default EVERY windows color scheme would be picked up, even custom ones.

This 1 template would cover EVERY color scheme:
  • vista basic
  • windows standard
  • windows classic
  • high contrast white
  • high contrast black
  • high contrast #1
  • high contrast #2
  • downloaded themes, custom themes ...
  • ...
What am I missing here? How can I make Actipro match the system colors (not a specific/hardcoded color scheme)?

Mick
Posted 10 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar
Hi Mick,

I understand that you don't care specifically about High Contrast. The Ribbon's High Contrast theme uses system colors for all the various brushes of the Ribbon elements. It doesn't need to be used exclusively when the system is using a High Contrast theme. So it could be used when loading Aero/Classic/etc, but some brushes may need to be tweaked. The Ribbon's other operating system themes (Classic, Aero, Luna) actually use the Office 2007 Blue theme as a basis and tint the brushes towards SystemColors.ControlColor. They also redefine certain brushes, but not all, to directly reference system colors where needed.

So out of all the themes available for Ribbon, the High Contrast theme is better at using the various system colors. Which is why I suggested you try to use that, even if you are just customizing the system colors in when using the Classic system theme.

If you change the system colors while the application is running then it will not (always) be picked up. You would need to restart your application for the color changes to be picked up. In the following example, only 3 of the brushes will pick up system color changes:
<Window.Resources>
    <SolidColorBrush x:Key="MyBrush1" Color="{DynamicResource {x:Static SystemColors.ControlColorKey}}" />
    <SolidColorBrush x:Key="MyBrush2" Color="{StaticResource {x:Static SystemColors.ControlColorKey}}" />
    <SolidColorBrush x:Key="MyBrush3" Color="{x:Static SystemColors.ControlColor}" />
</Window.Resources>
<StackPanel>
    <Rectangle Height="25" Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" Stroke="Black" StrokeThickness="1" /> <!-- changes -->
    <Rectangle Height="25" Fill="{StaticResource {x:Static SystemColors.ControlBrushKey}}" Stroke="Black" StrokeThickness="1" />
    <Rectangle Height="25" Fill="{DynamicResource MyBrush1}" Stroke="Black" StrokeThickness="1" /> <!-- changes -->
    <Rectangle Height="25" Fill="{StaticResource MyBrush1}" Stroke="Black" StrokeThickness="1" /> <!-- changes -->
    <Rectangle Height="25" Fill="{DynamicResource MyBrush2}" Stroke="Black" StrokeThickness="1" />
    <Rectangle Height="25" Fill="{StaticResource MyBrush2}" Stroke="Black" StrokeThickness="1" />
    <Rectangle Height="25" Fill="{DynamicResource MyBrush3}" Stroke="Black" StrokeThickness="1" />
    <Rectangle Height="25" Fill="{StaticResource MyBrush3}" Stroke="Black" StrokeThickness="1" />
</StackPanel>
We generally follow the convention of MyBrush2 and reference it using DynamicResource, but we use ComponentResourceKeys. This allows us to define several themes, even non-Operating system ones such as Office 2007, by simply changing the common brushes. In addition, it allows the brush to be frozen. If you use DynamicResource then the brush cannot be frozen. If the brush can't be frozen, there are times when you will get a random exception when switching system themes and/or loading xaml files from different threads. In addition, frozen brushes perform faster than non-frozen brushes.

Hopefully, this clears things up :-)


Actipro Software Support

The latest build of this product (v2019.1 build 0683) was released 1 month ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.