Metro themes should support Accents rather than Tints

WPF Studio, Themes, and Shared Library for WPF Forum

Posted 4 years ago by keepITcool - Amsterdam
Avatar

What I need is a simple mechanism to use a Metro theme and change the accentcolors to something other than the default blue. Actipro's tinting was designed for Aero and is not suited for Metro...

The following will yield HORRENDOUS results:

Dim cat = New TintedThemeCatalog("MetroLightRed", ThemeName.MetroLight.ToString(), Colors.Red)
ThemeManager.RegisterThemeCatalog(cat.CustomTheme, cat)

... so you're forced to spend hours tweaking the correct TintingSet and TintingGroups until you've got it right. (You will be caught with a blue border somewhere in your UI as you apparently forgot to include that in your TintGroups)... And then you can (mostly) start fresh for MetroWhite and MetroDark...  Really: I've got better things to do.

So please (when your done with Docking/MDI vnext ;-).. give us Accent support!

Regards,

Jurgen

Comments (11)

Posted 4 years ago by keepITcool - Amsterdam
Avatar

Guys, any progress on the Theme front?  

Posted 4 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar

Hello,

Yes we have just started looking into it.  We have already updated Metro themes to use a newer larger title bar button size and adjusted their glyphs to render exactly like Windows 10.  See our related blog post:

http://blog.actiprosoftware.com/post.aspx?id=99151091-8ee5-44bd-809b-169bcd737c83

I know you are specifically looking for accent colors similar to Office 2016 and that is something we will be looking at next.  There are a number of design hurdles for that though.  We'd love to get your thoughts on some issues like:

1) Are you only looking to accent the title bar area?

2) Should all toolbar button, ribbon button, and other various highlights (listboxes, etc.) all be updated to match the accent color?

3) Would you ever have a scenario where two windows in an app would need different accents?  This would probably be very difficult to achieve.

4) How would you like to be able to configure an accent?  Like would you prefer to have some wizard where you input some colors at design time and it spits out a XAML resource dictionary file you reference in your app with updated brushes, or would you like to call a method on ThemeManager instead and have it all done for you?

There are other questions, but these are a start.


Actipro Software Support

Posted 4 years ago by keepITcool - Amsterdam
Avatar

I wouldn't mind a quick skype discussion first. My id is xlsupport  If it's green just holler!

Else I'll sit down and draft an answer over the weekend. Thanks, Jurgen

Answer - Posted 4 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar

We have the Office 2016-like Colorful and White themes and 7 accent color variations of each completed and ready to ship in the upcoming 2016.1 version.  If you would like to help test a pre-release, please write our support address and we'll communicate with you offline there.


Actipro Software Support

Posted 4 years ago by keepITcool - Amsterdam
Avatar

Yes!  Pm sent :-) 

Posted 2 years ago by edevis - edevis GmbH
Avatar

Has there been any progress made allowing to create custom MetroLight derived color themes?
Are there plans to support this?

Kind Regards

Posted 2 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar

Hello,

Can you give some specific detail on what you would like to do?  For instance, are you wanting to be able to specify an accent color and have it fill in everything else in similar to how we support the built-in variations for Metro themes?  Thanks!


Actipro Software Support

Posted 2 years ago by keepITcool - Amsterdam
Avatar

well..  assume i want a night theme: black background with an exact solid orange accent color. think about your current current approach with tinting and compare to an ideal scenario...

Posted 2 years ago by edevis - edevis GmbH
Avatar

Hello,

from what I have seen so far in reconstructing the available brushes, there are three main colors more or less for the ribbon itself (plus some foreground and background of the default controls which are usually black and white):

  1. Base color
  2. Hover color / Lighter base color
  3. Pressed color / Darker base color

At the moment I am manually redefining all brushes to recreate a theme with a different base color like this:

            <SolidColorBrush x:Key="{x:Static themes:AssetResourceKeys.WindowTitleBarButtonForegroundActiveNormalBrushKey}" Color="{StaticResource EdevisThemeForegroundLightColor}" />
            <SolidColorBrush x:Key="{x:Static themes:AssetResourceKeys.WindowTitleBarButtonForegroundActiveHoverBrushKey}" Color="{StaticResource EdevisThemeForegroundLightColor}" />
            <SolidColorBrush x:Key="{x:Static themes:AssetResourceKeys.WindowTitleBarButtonForegroundActivePressedBrushKey}" Color="{StaticResource EdevisThemeForegroundLightColor}" />
            <SolidColorBrush x:Key="{x:Static themes:AssetResourceKeys.WindowTitleBarButtonForegroundInactiveNormalBrushKey}" Color="{StaticResource EdevisThemeInactiveColor}" />
            <SolidColorBrush x:Key="{x:Static themes:AssetResourceKeys.WindowTitleBarButtonForegroundInactiveDisabledBrushKey}" Color="{StaticResource EdevisThemeDisabledColor}" />
            <SolidColorBrush x:Key="{x:Static themes:AssetResourceKeys.WindowTitleBarButtonBackgroundActiveHoverBrushKey}" Color="{StaticResource EdevisThemeHoverColor}" />
            <SolidColorBrush x:Key="{x:Static themes:AssetResourceKeys.WindowTitleBarButtonBackgroundActivePressedBrushKey}" Color="{StaticResource EdevisThemeSelectedColor}" />
            <SolidColorBrush x:Key="{x:Static themes:AssetResourceKeys.WindowTitleBarButtonBorderActiveHoverBrushKey}" Color="{StaticResource EdevisThemeHoverColor}" />
            <SolidColorBrush x:Key="{x:Static themes:AssetResourceKeys.WindowTitleBarButtonBorderActivePressedBrushKey}" Color="{StaticResource EdevisThemeSelectedColor}" />

All together are about 60 brushes which I needed to identify one by one because the demo tool lists them all, but from the naming it is not directly clear what they are for. And even now it is not 100% perfect but OK.

My suggestion would be to create a class like TintedThemeCatalog for Metro where you can specify all the colors that make up the theme (the three base colors, or all colors in seperate constructors, or give the class properties for the colors to change before registering the theme). The class would fill in the colors at the right spots.

Kind Regard

Posted 2 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar

Ok thanks for the input... we'll add this suggestion to the TODO list.


Actipro Software Support

Posted 2 years ago by keepITcool - Amsterdam
Avatar

Just derive all your brushes from a few base color resources... and make those accessible.

I vote to move it to the top of that TODO list ;-)

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

Add Comment

Please log in to a validated account to post comments.