Changing Ribbon Tab Control Background color and possibly adding Graphic Styling.

[Alisaunder]

I'm looking for a way to change the color of the ribbon part behind the tabs like in Office 365. The method you mention here changes the entire ribbon selected tab. It would also be nice if there were a way to add a graphic like they do in Office 365.

Environment

• Fluent.Ribbon 5 v0.1.10
• Theme Generic (not needed in version 5.0 and upwards)
• Windows 10
• .NET Framework 4.62

[robertmuehsig]

(I hope I don't hijack this issue, but I have a similar problem)

With Version 5 we were able to paint the ribbon background in our desired color (e.g. grey for us) like that:

This was achived just by setting the background color on the ribbonwindow - the downside of this approach is (or was) that other controls that are normally have a transparent background needs to be set to a other (e.g. white) color.

Now I try to update to v6 and this "trick" doesn't seem to work anymore because the ribbon will stay white: When I try to set the background color on the RibbonTabControl then whole ribbon has this color (which makes sense) :

So my question is: Is there an existing solution to set a color for the ribbon background with v6?

[batzen]

There is no easy way to do this currently. Will add this to the 6.0 milestone, delay the release and try to get it done during the next two weeks.

[batzen]

Could you have a look if the things i have done fit your needs?

[batzen]

@Alisaunder @robertmuehsig ping

[robertmuehsig]

Fancy!

Works for me! :shipit:

[Alisaunder]

Yeah worked for me too but try it with a dark color and see how the Tab Text looks. Without being able to set the non-selected tab foreground colors they stay too dark to read.

[dthoeni]

Hi there,

I've tested this feature too. I'm missing a property to set the MouseOver background of an inactive RibbonTabItemHeader.

Office 2016 has the same MouseOver effect as the "File" tab for every RibbonTab.

[batzen]

Will have a look at that.

[batzen]

That one's a bit more difficult. The MouseOver only applies if the theme is dark. Doing this for the background is not a problem. But the foreground also changes differently on MouseOver. When the theme is light the foreground is a variant of the accent color, when the theme is dark the foreground is white on MouseOver. The current "logic" behind the color schemes has no way to express this, in regards to the foreground...

[dthoeni]

Yeah. Thats what I've figured when I had a look at the source code... How about adding a stylesheet that overwrites only this behaviour?

[Alisaunder]

I think the whole point of this was him trying to get away from style sheets, otherwise he could create a color theme to represent the colors Microsoft uses, Red, blue, green, purple, Orange etc.

[batzen]

@Menic0 I don't know what you mean by that. I guess microsoft has a more tailored engine to express such situations. I guess you should create a new issue for the dark/light MouseOver issue as it's not really in the scope of this particular issue. That way i can close this issue and think about the new issue. What do you think?

@Alisaunder I am not trying to get away from styles in general, i just removed the different themes because it was a maintenance nightmare. If the style were still there i would never have added the color schemes. ;-)

[dthoeni]

@batzen I thought of a optional stylesheet one can use if he wants that effect like in Office 2016. But I can open a seperate ticket with low prio if you want.

[batzen]

@Menic0 Could you open a new issue for your suggestion? I am closing this as the core feature is done.

[batzen]

@Menic0 FYI i am currently working on the dark theme and it now nearly matches the one in office 2016. Will push my changes during the next week.

[dthoeni]

Nice. When do you think about making a release? I'm still working with a self build version of fluent ribbon.

[TruePluto]

Maybe you can use this as temporary solve

           <f:Ribbon.Resources>
                <Style TargetType="{x:Type f:RibbonTabControl}">
                    <Setter Property="Background"
                            Value="#FFEA5E5E" />
                </Style>
            </f:Ribbon.Resources>

[batzen]

@Menic0 Forgot to answer. Version 6 was released on sunday.

[BendicoE]

I'm trying to achieve the look and feel of the Office 2016 ribbon, and I'm currently on the FluentRibbon 7.0.0-alpha0419. I have managed to set the background color using this this xaml:

            <Fluent:Ribbon.Resources>
                <Style TargetType="{x:Type Fluent:RibbonTabControl}">
                    <Setter Property="Background" Value="#2B579A" />
                </Style>
            </Fluent:Ribbon.Resources>

But I haven't found a way to make the text on the dark (not focused) tabs white, and a way to highlight the dark tab headers onmouseover.

My ribbon now looks like this:

And the Office 2016 ribbon looks like this:

Any hints on how to achieve the Office 2016 look?

[batzen]

Easy way: Use the recently added Theme Colorful.Blue. Don't know if i already released that to nuget. If i didn't i will do so during the weekend.

[BendicoE]

That would be great, thanks!

Another quick question: I'm combining Fluent.Ribbon with MahApps.Metro as per the instructions here. And I seem to have lost the title on the caption, it's just blank (only the icon shows). Any ideas?

[batzen]

Are there any binding errors being reported during debugging? Have you set the title on your window? If there are no errors and you have set the title it would nice if you could create a new issue for that and attach a repro there.

[BendicoE]

Yes, I get the following binding error:

System.Windows.Data Error: 4 : Cannot find source for binding with reference 'ElementName=window'. BindingExpression:Path=Title; DataItem=null; target element is 'RibbonTitleBar' (Name='RibbonTitleBar'); target property is 'Header' (type 'Object')

This led me to find the cause of the problem: I had forgot to give my main window an x:Name attribute, hence the Title binding could not be resolved:

<Metro:MetroWindow.TitleTemplate>
        <DataTemplate>
            <Fluent:RibbonTitleBar x:Name="RibbonTitleBar" Header="{Binding ElementName=TheMainWindow, Path=Title}" />
        </DataTemplate>
    </Metro:MetroWindow.TitleTemplate>

So when I named my main window x:Name="TheMainWindow", the title appears.

Thank you so much for leading me to the solution!

[batzen]

Thank you for pointing this issue out. Will have a look if i can get rid of that manual binding and make it work out of the box.

[yanbingms]

I use 6.1.0.326, still not work. please have a look.

---

[batzen]

@yanbingms Have you tried to use the current preview/pre-release of version 7.0?

[yanbingms]

@batzen Thank you for your instruction. I tried 7.0 again, but nothing changed. I installed it with this command. Install-Package Fluent.Ribbon -Version 7.0.0-alpha0532

[batzen]

@yanbingms you have to, at least, do something like:

    <Fluent:RibbonWindow.Resources>
        <SolidColorBrush x:Key="Fluent.Ribbon.Brushes.RibbonTabControl.Background">LightBlue</SolidColorBrush>
        <SolidColorBrush x:Key="Fluent.Ribbon.Brushes.RibbonTabControl.TabsGrid.Background">LightBlue</SolidColorBrush>
        <SolidColorBrush x:Key="Fluent.Ribbon.Brushes.RibbonTabControl.Content.Background">LightBlue</SolidColorBrush>
        <SolidColorBrush x:Key="Fluent.Ribbon.Brushes.RibbonWindow.TitleBackground">LightBlue</SolidColorBrush>
    </Fluent:RibbonWindow.Resources>

To change the background of the ribbon. The reason why it doesn't work when you just set the background are fine grained styling needs.

[yanbingms]

@batzen It worked! Thank you very much.

[vikastarlekar]

Fancy!

Works for me! :shipit:

Fancy!

Works for me! :shipit:

Fancy!

Works for me! :shipit:

Hi, I have upgraded the V2.1 to V7.0. In V2.1 we were using 'GlassBorderThickness' property which is not available in latest version of Fluent. Can you please help me on this ? Reason to upgrade the version is to change the Title Bar color of Fluent:Window. Error : The property 'GlassBorderThickness' was not found in type 'RibbonWindow'.