Theming of selected context ribbon tab

[stylefish]

Hey,
first of all: thanks for this awesome component :)
i'm trying to create a custom theme with the new ThemeManager.
My Question is: How do i change the ForeColor of a selected ContextTabItem?

the default tab looks ok:

but the contextual tab doesnt change the fore color like the normal tab:

as far as i can tell both tabs should use the same colors for selected etc, right?

if you could point me in the right direction, that would be really nice :)

thanks a lot
greetings

---

Environment

• Fluent.Ribbon v6.1.0
• Windows 10
• .NET Framework 4.7.1

[batzen]

The group's foreground color is used. Have a look at https://github.com/fluentribbon/Fluent.Ribbon/blob/develop/Fluent.Ribbon/Themes/Controls/RibbonTabItem.xaml

I guess there should be a dedicated property for that case on group. Something like SelectedTabForeground. Would that help?

[stylefish]

oh i see, so theres no way to change the color via theme i guess?
yeah a new property or we could use the color from RibbonTabItem:

<SolidColorBrush x:Key="Fluent.Ribbon.Brushes.RibbonTabItem.Selected.Foreground" Color="{StaticResource BlackColor}" options:Freeze="True" />

it seems to be unused or overriden by something else, i already set that one to "Black" but my foreground on the selected tabs is either blue:

or light gray (so thats the group color you mentioned i guess):

but for context tabs it behaves different:

so imho both types of tabs should use the same fore color and may be set by the theme (either by the one i suggested above, if its really unused, or by a new one).

it would also be great when you could change the title background from theme, because now i have to do the following in code behind:

TitleBackground = new SolidColorBrush(Color.FromArgb(255, 1, 115, 199));

thanks for your quick reply! :)

[batzen]

Fluent.Ribbon.Brushes.RibbonTabItem.Selected.Foreground not being used is a bug.
I mistakenly used the mouse over brush in that case.

Actions i will take to solve this:

• Fix the used selected brush
• Restructure and cleanup triggers in RibbonTabItem to make it easier to understand to conditions
• Introduce a separate Fluent.Ribbon.Brushes.RibbonTitleBar.Background resource

[batzen]

And i'll add SelectedRibbonTabItemForeground to the group.

[stylefish]

any plans on when version 7 will be released? or on publishing the dev branch to nuget as a prerelease? :)
thank you very much!
greetings

[batzen]

@stylefish Will publish a prerelease to nuget during the weekend, at least i hope so. But did you know that you can grab a prerelease from the appveyor feed at https://ci.appveyor.com/nuget/fluent-ribbon ?

[stylefish]

uh nice! looking forward to the nuget prerelease.
the appveyor feed is great also, i'll try to test the changes with that version! :)
thanks a lot!

[stylefish]

okay, sorry for the late reply, haven't found the time to test your changes until now.
i checked and it seems almost perfect for my use case :) but i still got one awkward behavior and i'm not sure why this happens, its quite similar to the issue i posed above, so i chose to post it in this issue, hope that's ok for you.

my desired behavior is:
selected tab
-> background: "white" (works)
-> foreground: "black" (works)
unselected tab
-> background "blue" (works)
-> foreground "white" (works)
mouse over tab
-> background "blue" with light transparent white overlay (works)
-> foreground: "white" (doesn't work, see "Edit" tab in image)

in addition, when i select a context tab and leave the tab and the group with the mouse the foreground color changes to the background color:

mouse withing context tab or group container:

mouse somewhere else:

i'm using the attached Accent "BlueAccent" and Theme "Light".
maybe you can point me to the right direction.
using the newest 7.0.0 alpha available in the appveyor nuget feed: 7.0.0-alpha0334
and controlzex 4.0.0-alpha0119

my used theme: Theme.zip

[batzen]

Wil have a look at this on saturday.

[batzen]

reopening this so i don't forget to have a look at it.

[batzen]

• The first issue happens because you have to overwrite the attached property Fluent:RibbonProperties.MouseOverForeground on RibbonTabItem with a style override
• The second issue is most likely caused because you have not overwritten TabItemSelectedForeground on RibbonContextualTabGroup

You currently can't overwrite these two brushes by only using theme resources but i got an idea on how to make this possible while still maintaining the current way it works.

Currently, for the first case, the mouse over foreground brush being used differs between the light and dark theme. Using a resource here wasn't possible because the highlight brush being used for light is not really visible on the dark theme.

Currently, for the second case, the first case also partially applies for this but in addition to that TabItemSelectedForeground is bound to Foreground.

[batzen]

@stylefish Could you have a look at the latest changes? Instructions are in the changelog. Feel free to ask any questions and give feedback on the features and changelog.

[stylefish]

Hey!Thanks for your feedback, will have a look next week, currently on a festival ;) Thank you!

[stylefish]

ok, sorry for the delay i just tested with the newest appveyor package, my own "light" theme with own blue accent now looks mostly perfect, but the context tabs still dont have a foreground when theyre not hovered:

it would also be nice to have the "hover foreground color" as a theme resource:

because in the hover state i would like the text to be black, not blue.

am i missing something? :/ i only tried theming these things with the "Theme" and "Accent" files. i you want i could provide them to you again, but theyre mostly unchanged to the last ones (just updated with your styles from the base themes).

thanks for your help! :)

[batzen]

Just add your new style files and i will have a look at whats wrong with your styles or with the lib ;-)

[stylefish]

here you go! thank you! :)
Themes.zip

[stylefish]

btw sth i noticed in your recent change:

<Trigger Property="Fluent:RibbonProperties.AppTheme"
                      Value="BaseLight">
                 <Setter Property="Fluent:RibbonProperties.MouseOverForeground"
                        Value="{DynamicResource Fluent.Ribbon.Brushes.RibbonTabItem.MouseOver.Foreground.Light}" />

you're checking the current theme and are setting the corresponding colors, but in my case i have a completely different theme, so this wont work, because my theme has another name.
why don't you integrate these colors into the apptheme xaml (introduce new variables), so it would be changeable for a theme developer (e.g. me ;))?
maybe this has to do sth with the behavior i'm seeing?

[batzen]

Ah, then that's the problem.
What's your suggestion on how to solve that issue?
How should i select which brush/resource to use if not by checking for the theme name?
I am not happy with the current solution to this problem but after thinking a lot about it this is the best solution i could come up with...

why don't you integrate these colors into the apptheme xaml (introduce new variables), so it would be changeable for a theme developer (e.g. me ;))?

I don't get what you mean with that. Which variables would that be?

[stylefish]

i thought maybe you could remove the trigger in the view, and just use
Fluent.Ribbon.Brushes.RibbonContextualTabGroup.TabItemMouseOverForeground and then move this to the BaseLight / BaseDark theme because it depends on the base theme, so maybe it should live there.

maybe thats a chance to define what exactly an Accent ist and what a Theme is.
As far as i interpreted it, the theme contains all things necessary for the complete ribbon and the accent just changes the Backstage Menu color and the status bar color. but to harmonize a "more colorful" theme with an accent you have to create an accent which adapts to the theme.
so when you want to create a more complex style like an Office 2016 Theme you have to adjust both to get to the finish line.

while i experimented with the office themes i thought "what if i could just create a theme with all colors (like backstage menu button etc) in it". after that you may apply an accent to that theme to change the base values. in that case you wouldnt have to create "Dark" and "Light" properties that break advanced custom themes,

just an idea but i dont know if thats possible or if the work amount is justified etc...

[batzen]

Basically the theme defines some base colors and the accents build on top of that.
That causes the problems you are experiencing and the problems i had to work around in some places.
Having everything in one file would solve all issues.
I could then produces files like Blue.BaseDark.xaml, Blue.BaseLight.xaml etc.

It would require some work but it would solve all problems as there would be no dependency between two resource files like it's now the case.

[stylefish]

sounds good to me, if you can define a "work package" or sth i can do easily without understanding the complete source, i'm happy to help. :) i think i got some time somewhere next week!

[batzen]

@stylefish The separation between AppTheme and Accent is gone and only Theme is left. Everything is now contained in single files named "Dark.Blue" for example.
Could you test the changes and see if you can theme everything like you want to?

[stylefish]

hey,
thanks for your continuous support. :) i've tested your changes with the newest appveyor package and the issue i reported originally is working fine! really nice theming experience now with a single file! :)
for me this issue is closed, anyhow it would be nice to theme the active tab mouseover independent from inactive tabs mouseover, but thats optional for me and may also be a new issue. however i wanted to elaborate and then you can decide what to do or not to do: :)

you can theme these properties nicely:

    Fluent.Ribbon.Brushes.RibbonTabItem.Foreground
    Fluent.Ribbon.Brushes.RibbonTabItem.BorderBrush

which will be correctly overriden by

    Fluent.Ribbon.Brushes.RibbonTabItem.MouseOver.Background
    Fluent.Ribbon.Brushes.RibbonTabItem.MouseOver.Foreground

but these will also override
Fluent.Ribbon.Brushes.RibbonTabItem.Selected.Foreground
now you can argue that the selected item should never be overriden by a mouse over (that would be best for my theme, and also because the "mouse over" is also triggered when you hover anywhere over the complete group):

hovered inactive tab (correctly whiter background and white foreground):

hovered active tab (incorrect white foreground, this should stay black, correct: background does not change)

in my case i changed the hover fore color to be "black" so if you hover an item the fore and background colors change. but thats ok for me.

but somebody else may have a different opinion on this - so i'll leave it to you.
possible solutions imho would be:

• ignore MouseOver for Selected items (tabs)
• add Fluent.Ribbon.Brushes.RibbonTabItem.MouseOver.Selected.Foreground and Background

but, like i said, for me this issue is resolved, the result is close enough to the office colorful theme. :)

PS: do you have a new ETA for the pre-release on nuget? :)

[batzen]

Fluent.Ribbon.Brushes.RibbonTabItem.MouseOver.Selected.Foreground would be my favorite here.
Will have a look.

It's already on nuget since saturday. ;-)
Announced it on twitter. Should have also done that in the gitter channel.

[batzen]

@stylefish Brush is added

[stylefish]

@batzen nice! it works! but for contextual tabs i haven't seen anything to set it... so there is the "black" foreground when you hover it or the white when its selected, like the above screenshots but with the contextual tab group. i used:
Fluent.Ribbon.Brushes.RibbonContextualTabGroup.TabItemMouseOverForeground
so should there be a
Fluent.Ribbon.Brushes.RibbonContextualTabGroup.Selected.TabItemMouseOverForeground or am i doing it wrong?

[batzen]

@stylefish Brush is added

[stylefish]

@batzen, nice. trying it out in a few secs. if you're at it right now, a
Fluent.Ribbon.Brushes.RibbonWindow.TitleForeground would be nice too, because on dark backgrounds you may want to change to sth more bright than black :)

[batzen]

@stylefish There you go

[stylefish]

nice, my themes look like this now:

Light:

Gray:

thats as close as i wanted to get to the office 2016 colorful theme and "gray" looks good too ;)
thank you very much for your continuous support and the patience! if anyone is interested i would share the "Light" and "Gray" theme files we produced in this issue :)

looking forward to version 7 release! :)
issue resolved and more!

[batzen]

Would be nice if you could share those. Maybe i can include them in the library then.

[stylefish]

of course, here they are. or should i create a PR to integrate them?
Themes.zip

[batzen]

If you like to try to integrate go ahead.
Feel free to ask any questions you have along the way. Best channel would be private chat on gitter.

[batzen]

Now that your themes are included in the library, i consider this issue resolved.
Do you think so too?

[stylefish]

yes, resolved! great! thanks for your support and the integration! :)

[LucaFagan]

Is it possible to change the color of the quick access menu arrow ? I'd like it to be white.

[batzen]

@DenZuck that's currently not possible as it's a hard coded path to a png. Could you create a new issue for this?